/* Touch adaptation of the existing Poto surfaces. Existing spacing and palette
   stay authoritative; 44px targets derive from 40px control + 4px spacing. */
@media (max-width:900px) {
  .poto-main { --poto-touch-target:calc(var(--poto-control-height) + var(--poto-space-xs)); --poto-mobile-header:calc(var(--poto-touch-target) * 2 + var(--poto-space-md) + env(safe-area-inset-top,0px)); }
  .poto-main .poto-header {
    position:fixed; inset:0 0 auto; z-index:20; display:grid;
    grid-template-columns:minmax(0,1fr) auto; gap:0 var(--poto-space-sm);
    padding:calc(var(--poto-space-sm) + env(safe-area-inset-top,0px)) max(5%,env(safe-area-inset-right,0px)) var(--poto-space-sm) max(5%,env(safe-area-inset-left,0px));
    color:var(--poto-ink); background:var(--poto-paper); opacity:1; transform:none;
  }
  .poto-main .poto-header::before { display:none; }
  .poto-main .header-primary { display:contents; }
  .poto-main .wordmark { grid-column:1; grid-row:1; min-height:var(--poto-touch-target); }
  .poto-main .poto-header .wordmark-logo { width:auto; height:calc(var(--poto-space-lg) - var(--poto-space-xs)); filter:brightness(0); }
  .poto-main .header-meta { display:flex; flex-direction:row; grid-column:2; grid-row:1; gap:0; }
  .poto-main .place-time { display:none; }
  .poto-main .scene-controls,.poto-main .theme-controls { display:flex; flex-direction:row; gap:var(--poto-space-xs); }
  .poto-main .poto-header .theme-controls { max-width:none; opacity:1; visibility:visible; pointer-events:auto; }
  .poto-main .poto-header .poto-button { width:var(--poto-touch-target); min-height:var(--poto-touch-target); color:inherit; border-color:currentColor; background:transparent; }
  .poto-main .poto-header .poto-button[aria-pressed='true'] { color:var(--poto-paper); background:var(--poto-ink); }
  .poto-main .poto-header .main-nav { grid-row:2; grid-column:1/-1; display:flex; flex-direction:row; align-items:center; justify-content:space-between; width:100%; gap:var(--poto-space-xs); }
  .poto-main .main-nav a { justify-content:center; min-height:var(--poto-touch-target); min-width:var(--poto-touch-target); font-size:.8125rem; }
  .poto-main .main-nav a::after { background:currentColor; }
  .poto-main .main-nav a[aria-current='location']::after { transform:scaleX(1); }
  .poto-main .poto-header[data-header-surface='hero'] { background:transparent; color:var(--poto-paper); }
  .poto-main .poto-header:is([data-header-surface='dark'],[data-header-surface='blue'],[data-header-surface='project-dark']) { color:var(--poto-paper); background:var(--poto-header-dark,var(--poto-ink)); }
  .poto-main .poto-header[data-header-surface='project-dark'] { background:var(--poto-ink); }
  .poto-main .poto-header:is([data-header-surface='hero'],[data-header-surface='dark'],[data-header-surface='blue'],[data-header-surface='project-dark']) .wordmark-logo { filter:none; }
  html[data-landscape-mode='night'] .blog-standalone .poto-header { background:var(--poto-ink); color:var(--poto-paper); }
  html[data-landscape-mode='night'] .blog-standalone .wordmark-logo { filter:none; }
  .poto-main .a-hello { top:calc(var(--poto-mobile-header) + var(--poto-space-lg)); left:5%; right:5%; transform:none; white-space:normal; max-width:32ch; font-size:1rem; line-height:1.5; }
  .poto-main.is-passing:not(.is-opening) .poto-header { opacity:1; transform:none; }
  .poto-main.is-opening .poto-header { opacity:0; }
  .poto-main :is(#blog,#contact,#projects,#archive) { scroll-margin-top:var(--poto-mobile-header); }
  .blog-standalone .blog-section { padding-top:calc(var(--poto-mobile-header) + var(--poto-space-xxl)); }
  .poto-main .beam-case { padding-inline:5%; padding-bottom:calc(var(--poto-space-xxl) + env(safe-area-inset-bottom,0px)); }
  .beam-case .case-topline a { display:inline-flex; align-items:center; gap:var(--poto-space-sm); min-height:var(--poto-touch-target); }
  .beam-case .case-themes a,.beam-case [data-case-close] { min-height:var(--poto-touch-target); display:flex; align-items:center; }
  .blog-search input { font-size:1rem; }
  .blog-filters button { min-height:var(--poto-touch-target); }
}
@media (max-width:700px) {
  /* The readable card fallback avoids fourteen full-screen scroll holds on phones. */
  #projects:not([data-enhanced]) .project-stage { padding:var(--poto-space-xxl) 5%; }
  #projects:not([data-enhanced]) .project-stream { gap:var(--poto-space-xxl); }
  #projects:not([data-enhanced]) .project-cover img { aspect-ratio:16/10; object-fit:cover; }
  #projects:not([data-enhanced]) .project-footer { display:none; }
  #projects:not([data-enhanced]) .project-cover figcaption { font-size:1.5rem; }
  #projects:not([data-enhanced]) .project-cover figcaption p { font-size:1rem; line-height:1.6; }
  .beam-case .case-intro,.beam-case .case-row { gap:var(--poto-space-lg); margin-bottom:var(--poto-space-xxl); }
  .beam-case h1 { font-size:clamp(2rem,9vw,3rem); overflow-wrap:normal; }
  .beam-case .case-summary { font-size:1.25rem; line-height:1.5; }
  .beam-case .case-themes { gap:0; margin-block:var(--poto-space-md); }
  .beam-case .case-aside p { max-width:none; font-size:1rem; }
  .blog-sheet :is(p,li,dd,dt,blockquote) { font-size:1rem; line-height:1.7; }
  .blog-sheet .blog-chapter-text .blog-chapter-copy { grid-column:1; }
  .blog-section { padding-inline:5%; }
  .blog-grid { row-gap:var(--poto-space-xxl); }
  .blog-heading p { font-size:1rem; }
  .blog-toolbar { gap:var(--poto-space-md); }
  .blog-toolbar .blog-filters { width:100%; display:flex; justify-content:space-between; }
  .blog-filters button { padding-inline:var(--poto-space-sm); font-size:.8125rem; }
  .blog-card h3,.blog-card h2 { font-size:1.5rem; line-height:1.25; }
  .blog-card p { font-size:1rem; line-height:1.6; }
  .poto-contact { padding-top:var(--poto-space-xxl); }
  .contact-invitation h2 { font-size:clamp(2rem,9vw,3rem); }
  .contact-email { font-size:clamp(1.25rem,6vw,2rem); overflow-wrap:anywhere; min-height:var(--poto-touch-target); }
  .contact-social { min-height:var(--poto-touch-target); }
  .poto-main .a-label { left:5%; bottom:calc(var(--poto-space-xxl) + var(--poto-space-xl) + env(safe-area-inset-bottom,0px)); }
  .poto-main .preview-controls { right:5%; bottom:calc(var(--poto-space-md) + env(safe-area-inset-bottom,0px)); }
  .poto-main .intro-card { left:5%; width:auto; right:auto; bottom:calc(var(--poto-space-md) + env(safe-area-inset-bottom,0px)); transform:none; }
  .poto-main .a-scroll { flex-direction:row; padding-inline:0; min-height:var(--poto-touch-target); }
}
@media (max-width:900px) {
  .poto-main.is-case-study .poto-header .header-meta { display:flex; }
  /* At tablet widths the desktop triptych makes paragraphs too narrow. */
  .beam-case .case-intro,.beam-case .case-row { grid-template-columns:1fr; gap:var(--poto-space-lg); margin-bottom:var(--poto-space-xxl); }
  .beam-case :is(.case-intro-copy,.case-hero-figure,.case-visual,.case-insight),
  .blog-sheet .blog-chapter-text .blog-chapter-copy { grid-column:1; }
  .beam-case :is(.case-insight,.blog-chapter-copy,.case-aside) { max-width:65ch; }
  .blog-sheet video { max-height:60svh; object-fit:contain; }
  .poto-contact { min-height:calc(100svh - var(--poto-mobile-header)); }
}
@media (max-width:700px) {
  #projects:not([data-enhanced]) #projects-title { position:static; width:auto; height:auto; clip-path:none; overflow:visible; white-space:normal; margin:0; }
  #projects:not([data-enhanced]) .project-stream { margin-top:var(--poto-space-xl); }
}
@media (max-width:360px) {
  .blog-filters button { flex:1 1 0; min-width:0; white-space:normal; line-height:1.3; padding-inline:var(--poto-space-xs); }
}

/* Profile/case expansion: uses the existing spacing, colour and type system. */
.case-credits { margin-block:var(--poto-space-lg) var(--poto-space-xxl); }

.case-credits dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:var(--poto-space-md); margin:0; }
.case-credits dl div { min-width:0; }
.beam-case .case-credits dt { font-size:.8125rem; line-height:1.5; }
.beam-case .case-credits dd { margin:0; font-size:1rem; line-height:1.5; }
.beam-case .case-credits p { max-width:70ch; font-size:1rem; line-height:1.6; margin-top:var(--poto-space-lg); }
.archive-case-link { display:inline-flex; align-items:center; min-height:calc(var(--poto-control-height) + var(--poto-space-xs)); margin-top:var(--poto-space-md); color:inherit; text-underline-offset:var(--poto-space-xs); pointer-events:auto; }
/* The floating scene controls only belong to the opening, never reading content. */
.poto-main.hero-controls-away .preview-controls { visibility:hidden; pointer-events:none; }
/* The opaque stage prevents the previous collage bleeding into the paper gallery. */
#projects[data-enhanced] .project-stage { background:var(--poto-paper); }
.poto-main .poto-header[data-header-surface^='project-']::before { background:var(--poto-header-tint); backdrop-filter:none; -webkit-backdrop-filter:none; }
@media (max-width:700px) {
 .poto-main .a-hello { max-width:90%; width:90%; line-height:1.5; }
 .poto-main .preview-controls { max-width:90%; }
 .poto-main .motion-settings > summary { min-height:var(--poto-touch-target); }
 .case-credits dl { grid-template-columns:1fr; }
}

/* Case overview: context first, then artwork; chapter layouts stay unchanged. */
.beam-case .case-intro-stacked { display:flex; flex-direction:column; gap:var(--poto-space-xl); }
.beam-case .case-intro-stacked > * { width:100%; }
.beam-case .case-intro-stacked .case-summary { max-width:70ch; margin-bottom:0; }
.beam-case .case-intro-stacked .case-credits { margin:0; }
.beam-case .case-intro-stacked .case-credits dl { grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr)); }
.beam-case .case-intro-stacked .case-hero-figure { max-width:calc(var(--poto-space-xxl) * 24); align-self:center; }
.beam-case .case-intro-stacked .case-themes { display:flex; flex-wrap:wrap; gap:var(--poto-space-sm) var(--poto-space-xl); margin:0; }
@media (max-width:700px) {
 .beam-case .case-intro-stacked { gap:var(--poto-space-lg); }
 .beam-case .case-intro-stacked .case-credits dl { grid-template-columns:1fr; }
}
/* Project sheets share the article shell but retain a three-column work grid. */
@media (min-width:901px) {
 .beam-case:has(.case-intro-stacked) .case-related-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Keep the CV with the greeting so text wrapping never overlaps its link. */
.poto-main .hero-profile { position:absolute; z-index:5; top:calc(var(--poto-space-lg) + var(--poto-control-height) + var(--poto-space-md)); left:var(--poto-space-xl); right:var(--poto-space-xl); color:var(--poto-paper); transition:opacity var(--poto-reveal) var(--poto-ease); }
.poto-main .hero-profile .a-hello { position:static; transform:none; margin:0; max-width:none; width:auto; white-space:normal; }
.hero-cv-link { display:inline-flex; align-items:center; gap:var(--poto-space-sm); min-height:var(--poto-control-height); margin-top:var(--poto-space-xs); color:inherit; font-size:.875rem; text-underline-offset:var(--poto-space-xs); }
.hero-cv-link span { font-size:.75rem; }
.is-opening .hero-profile { opacity:0; pointer-events:none; }
.poto-a.is-passing .hero-profile { opacity:clamp(0,calc(1 - var(--pass,0) * 4)); }
@media(max-width:600px) { .poto-main .hero-profile { top:calc(var(--poto-mobile-header) + var(--poto-space-lg)); left:5%; right:5%; } }