/* 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%; } }

/* Mobile reading mode: one continuous feed, thumb navigation and existing tokens. */
.mobile-nav-icon,.mobile-career-feed { display:none; }
.poto-main .preview-controls { display:none !important; }
@media(max-width:900px) {
 .poto-main { --poto-mobile-header:calc(var(--poto-touch-target) + var(--poto-space-md) + env(safe-area-inset-top,0px)); padding-bottom:0; }
 .poto-main .poto-header { align-items:center; }
 .poto-main .poto-header .wordmark-logo { height:var(--poto-space-xl); max-width:100%; }
 .poto-main .main-nav {
  position:fixed; inset:auto 5% calc(var(--poto-space-sm) + env(safe-area-inset-bottom,0px));
  width:auto; z-index:40; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0;
  padding:var(--poto-space-xs); border-radius:var(--poto-space-xl);
  background:color-mix(in srgb,var(--poto-paper) 55%,transparent); color:var(--poto-ink);
  box-shadow:0 var(--poto-space-xs) var(--poto-space-lg) rgb(0 0 0 / .15);
  backdrop-filter:blur(var(--poto-space-md)); -webkit-backdrop-filter:blur(var(--poto-space-md));
 }
 html[data-landscape-mode='night'] .poto-main .main-nav { background:color-mix(in srgb,var(--poto-ink) 55%,transparent); color:var(--poto-paper); }
 .poto-main .main-nav a { display:flex; flex-direction:column; gap:var(--poto-space-xs); padding:var(--poto-space-sm) 0; border-radius:var(--poto-space-lg); font-size:.625rem; line-height:1; text-decoration:none; }
 .poto-main .main-nav a::after { display:none; }
 .poto-main .main-nav a[aria-current='location'] { background:transparent; }
 .poto-main .main-nav .mobile-nav-icon { display:block; width:var(--poto-space-lg); height:var(--poto-space-lg); stroke-width:1.7; transition:transform var(--poto-fast) var(--poto-ease); }
 .poto-main .main-nav a:active .mobile-nav-icon { transform:translateY(calc(var(--poto-space-xs) * -1)); }
 .poto-main .hero-profile { top:calc(var(--poto-mobile-header) + var(--poto-space-lg)); left:5%; right:5%; text-align:center; }
 .poto-main .hero-profile .a-hello { max-width:30ch; margin-inline:auto; font-size:1rem; line-height:1.5; text-wrap:balance; }
 .poto-main .hero-cv-link { margin-top:var(--poto-space-sm); }
 .poto-main .intro-card { bottom:calc(var(--poto-control-height) * 2 + env(safe-area-inset-bottom,0px)); }
 .poto-main .a-label { bottom:calc(var(--poto-control-height) * 3 + var(--poto-space-lg) + env(safe-area-inset-bottom,0px)); }
 .poto-main :is(#experience,#journey,#toolkit,#archive,#projects,#blog,#contact) { scroll-margin-top:var(--poto-mobile-header); }
 .poto-main .career-timeline { padding:var(--poto-space-xxl) 5%; height:auto !important; }
 .poto-main .career-stage { position:static; height:auto; min-height:0; padding:0; }
 .poto-main .career-heading { margin-bottom:var(--poto-space-xl); }
 .poto-main .career-heading h2 { font-size:clamp(2rem,8vw,3rem); }
 .poto-main :is(.career-scroll,.career-navigation) { display:none; }
 .mobile-career-feed { display:grid; gap:var(--poto-space-xxl); list-style:none; margin:0; padding:0; }
 .mobile-career-feed .career-label { display:grid; grid-template-columns:1fr auto; gap:var(--poto-space-sm); margin-bottom:var(--poto-space-md); white-space:normal; }
 .mobile-career-feed .career-company { grid-column:1; grid-row:1; color:var(--poto-paper); font-size:1.5rem; }
 .mobile-career-feed .career-role { grid-column:1; grid-row:2; font-size:1rem; font-weight:400; }
 .mobile-career-feed .career-dates { grid-column:2; grid-row:1; font-size:.8125rem; }
 .poto-main :is(#venus,#aicowork) .archive-stage { min-height:0; padding:var(--poto-space-xxl) 5%; }
 .poto-main :is(#venus,#aicowork) .archive-copy { width:100%; margin:0 0 var(--poto-space-xl); text-align:left; }
 .poto-main .archive-statement { font-size:clamp(2rem,8vw,3rem); }
 .poto-main .archive-description { font-size:1rem; margin:var(--poto-space-md) 0 0; }
 .poto-main .archive-case-link { font-size:1rem; }
 .poto-main :is(#venus,#aicowork) .archive-collage { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--poto-space-sm); }
 .poto-main :is(#venus,#aicowork) .archive-media { grid-column:auto; grid-row:auto; margin:0; aspect-ratio:1; }
 .poto-main :is(#venus,#aicowork) .archive-phone { grid-column:1/-1; grid-row:1; aspect-ratio:16/9; }
 .poto-main :is(#venus,#aicowork) .archive-lower-right { grid-column:1/-1; aspect-ratio:16/9; }
 .poto-main .beam-case { border:0; border-radius:0; box-shadow:none; padding-bottom:calc(var(--poto-control-height) * 3); }
 .poto-main .beam-case::before,.poto-main .beam-case::after { display:none; }
 .poto-main .blog-section { border:0; border-radius:0; }
 .poto-main .blog-card h3,.poto-main .project-cover figcaption { font-size:1.5rem; line-height:1.3; }
 .poto-main .blog-card p,.poto-main .project-cover figcaption p { font-size:1rem; line-height:1.6; }
 .poto-main .contact-socials { padding-bottom:var(--poto-space-xl); }
}
@media(prefers-reduced-motion:reduce) { .poto-main .main-nav .mobile-nav-icon { transition:none; } }
.mobile-nav-selection { display:none; }
@media(max-width:900px) {
 .poto-main .main-nav { pointer-events:auto; isolation:isolate; border:1px solid color-mix(in srgb,var(--poto-paper) 65%,transparent); backdrop-filter:blur(var(--poto-space-lg)) saturate(1.7); -webkit-backdrop-filter:blur(var(--poto-space-lg)) saturate(1.7); }
 .mobile-nav-selection { display:block; position:absolute; z-index:-1; left:var(--poto-space-xs); top:var(--poto-space-xs); bottom:var(--poto-space-xs); width:calc((100% - var(--poto-space-xs) * 2) / 5); border-radius:var(--poto-space-xl); background:color-mix(in srgb,currentColor 15%,transparent); transform:translateX(calc(var(--nav-index,0) * 100%)); transition:transform var(--poto-reveal) var(--poto-ease); }
 .poto-main .hero-profile .a-hello { max-width:none; font-size:.875rem; }
 .a-hello .conversation-word:nth-child(-n+2) { font-size:1.25rem; }
 .a-hello .hero-line-break { display:block; height:var(--poto-space-sm); font-size:0; visibility:hidden; }
 .mobile-career-feed { gap:var(--poto-space-md); }
 .mobile-career-entry { padding:var(--poto-space-md); border:1px solid var(--poto-glass-line); border-radius:var(--poto-control-radius); background:color-mix(in srgb,var(--reference-dark) 70%,var(--archive-black)); }
 .mobile-career-feed .career-label { margin:0; }
 .mobile-career-feed .career-company { font-size:1.125rem; }
 .poto-main .blog-toolbar .blog-filters { display:grid; grid-template-columns:auto 1fr 1fr; gap:var(--poto-space-xs); overflow:visible; }
 .poto-main .blog-filters button { font-size:.8125rem; padding:var(--poto-space-sm); line-height:1.3; white-space:normal; min-height:var(--poto-touch-target); }
 .poto-main .poto-contact { min-height:0; padding-bottom:calc(var(--poto-control-height) * 2 + env(safe-area-inset-bottom,0px)); gap:var(--poto-space-xl); }
 .poto-main .archive-media.has-touch-video { cursor:pointer; }
 .poto-main .archive-media.has-touch-video .archive-desktop-video { display:block; }
 .poto-main .archive-media.has-touch-video > img,.poto-main .archive-media.has-touch-video .archive-mobile-video { display:none; }
}
@media(prefers-reduced-motion:reduce) { .mobile-nav-selection { transition:none; } }
.touch-video-toggle { display:none; }
@media(max-width:900px) {
 .poto-main .touch-video-toggle { display:block; position:absolute; bottom:var(--poto-space-sm); left:var(--poto-space-sm); width:auto; min-height:var(--poto-touch-target); padding-inline:var(--poto-space-sm); background:var(--poto-ink); color:var(--poto-paper); font-size:.75rem; }
}
@media(max-width:900px) {
 .mobile-career-current { position:relative; overflow:hidden; border-color:var(--poto-blue-light); background:radial-gradient(ellipse at 25% 0%,color-mix(in srgb,var(--poto-year-accent) 32%,transparent),transparent 75%),var(--poto-blue-deep); box-shadow:inset 0 1px 0 var(--poto-glass-line); }
 .mobile-career-play { display:block; width:100%; padding:0; border:0; background:none; color:inherit; text-align:left; font:inherit; cursor:pointer; }
 .mobile-career-play:focus-visible { outline:2px solid var(--poto-paper); outline-offset:var(--poto-space-xs); }
 .mobile-career-hint { display:block; margin-top:var(--poto-space-sm); font-size:.8125rem; text-decoration:underline; text-underline-offset:var(--poto-space-xs); }
 .mobile-career-current video:not([hidden]) { display:block; width:100%; height:auto; margin-top:var(--poto-space-md); border-radius:var(--poto-control-radius); }
}