/* Phone layout (portrait phones, up to 700px wide). Loaded last; every rule sits inside a phone-width query,
   so the laptop and desktop layout are untouched.
   On a phone the whole page scrolls (not a strip between a pinned header and footer), the header is two
   short rows that scroll away, text runs edge to edge with a 20px gutter, and the game figure gets the full width. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 700px) {
  /* ---- one scroll for the whole page ---- */
  /* photographic.css pins <body> to one screen with overflow:hidden (made for the desktop's inner scroller).
     On a phone that blocked finger scrolling, so the body is released here. */
  body.art-research { height: auto; min-height: 100svh; overflow: visible; }
  body.art-research .site-reader { height: auto; max-height: none; min-height: 100svh; overflow: visible; }
  /* a page title receives focus when you change page (for screen readers); no ring around it on touch screens */
  body.art-research [tabindex="-1"]:focus { outline: none; }
  /* a soft peach flash when a link is tapped, instead of the browser's blue box */
  body.art-research { -webkit-tap-highlight-color: rgba(255, 219, 184, .16); }
  body.art-research .site-reader > main { flex: 1 0 auto; display: flex; flex-direction: column; overflow: visible; overflow-x: clip; }
  body.art-research .site-reader > main > .page { flex: none; scroll-margin-top: 100vh; }   /* a link to #model etc. opens at the top, header included */
  body.art-research .site-reader > main > #home { flex: 1 0 auto; }
  /* Impressions is a full-screen picture with its doors laid over it: it needs a real height to fill */
  body.art-research .site-reader > main > #impressions { flex: 1 0 auto; min-height: max(560px, calc(100svh - 196px)); }

  /* ---- header: name + language on one row, the five sections on the next ---- */
  body.art-research .site-header {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand lang" "nav nav";
    align-items: center; gap: 6px 12px; padding: 14px 16px 2px;
  }
  body.art-research .site-header .header-brand { grid-area: brand; gap: 2px; }
  body.art-research .site-header .header-end { display: contents; }
  body.art-research .header-name { font-size: 19px; }
  body.art-research .home-affiliation { font-size: 9.5px; letter-spacing: .07em; }
  body.art-research .lang-switch { grid-area: lang; justify-self: end; min-height: 36px; margin: 0; padding: 4px 14px; font-size: 13px; }
  body.art-research .site-nav {
    grid-area: nav; display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 0;
    margin: 0 -6px; overflow-x: auto; scrollbar-width: none;
  }
  body.art-research .site-nav::-webkit-scrollbar { display: none; }
  body.art-research .site-nav a {
    flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px;
    font-size: 12.5px; letter-spacing: .02em; white-space: nowrap;
  }
  body.art-research .site-nav a:hover, body.art-research .site-nav a:focus-visible { transform: none; }

  /* ---- page gutters and reading size ---- */
  body.art-research .page, body.art-research .interactive-page { padding: 22px 20px 0; }
  /* Home: the name sits just under the gull in the first background photo (about 37% down the screen), as before */
  body.art-research #home { height: auto; min-height: 0; align-items: flex-start; padding: max(20px, calc(44svh - 128px)) 20px 16px; }

  /* the side "previous / next page" arrows sat on top of the text; a sideways swipe still turns the page */
  body.art-research .panel-scroll { display: none !important; }

  /* ---- Research: the title starts at the gutter and the glowing line drops from under its first letter,
     so the text gets most of the width (it was a 212px column beside a centred title) ---- */
  body.art-research #research { padding: 20px 20px 40px; align-items: stretch; }
  body.art-research #research > .hero-title { padding: 0; text-align: start; font-size: clamp(28px, 7.6vw, 32px); }
  body.art-research #research .research-split { width: 100%; margin-top: 18px; padding-inline-start: 30px !important; --rail-gap: 36px; --rail-dot: -26.5px !important; }
  body.art-research #research .research-rail { left: 28px !important; }
  html[dir="rtl"] body.art-research #research .research-rail { left: auto !important; right: 28px; }
  body.art-research #research .research-statement { font-size: 16.5px; line-height: 1.62; max-width: none; }
  body.art-research #research .research-projects { gap: 26px 14px; margin-top: 20px; }
  body.art-research #research .research-orb { max-width: none; }
  body.art-research #research .research-name { font-size: 15.5px; line-height: 1.2; }

  /* research project pages had wide side margins to clear the arrows; the arrows are gone on phones */
  body.art-research .site-reader :is(#model, #sleep, #circadian, #organoids) { padding-inline: 20px; }
  body.art-research :is(#model, #sleep, #circadian, #organoids) .model-essay p,
  body.art-research :is(#model, #sleep, #circadian, #organoids) .project-intro { font-size: 16.5px; line-height: 1.6; }
  body.art-research :is(#model, #sleep) > .paper-finding { font-size: 18px; line-height: 1.5; }
  body.art-research .page-header h1 { font-size: clamp(30px, 8.4vw, 36px); }
  body.art-research .page-header .project-question { font-size: 20px; line-height: 1.4; margin-top: 12px; }
  body.art-research .model-links a { display: inline-flex; align-items: center; min-height: 44px; }
  body.art-research .back-link { display: inline-flex; align-items: center; min-height: 40px; margin-bottom: 6px; }

  /* ---- Embody lab pages (the games): a small heading so the figure starts high on the screen ---- */
  body.art-research #embody.is-lab { gap: 6px; padding: 14px 12px 0; }
  /* the Embody heading repeats the highlighted "Embody" tab; on a game page it stays for screen readers only */
  body.art-research #embody.is-lab #embody-title {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  body.art-research #embody.is-lab .embody-gates { gap: 8px; margin: 0; }
  body.art-research #embody.is-lab .embody-gate summary { min-height: 40px; padding: 8px 32px 8px 14px; font-size: 13px; }

  /* the E. coli game: figure full width, instructions and buttons right under it, then the readouts */
  #ecoliLab .plate { padding-top: 6px; }
  #ecoliLab .plate-title { font-size: 26px; line-height: 1.12; }
  #ecoliLab .plate-lede { font-size: 16px; line-height: 1.45; margin-top: 6px !important; }
  #ecoliLab .plate-head { padding-bottom: 4px; }
  #ecoliLab .plate-nav { justify-self: stretch; justify-content: space-between; margin: 0 -4px; scrollbar-width: none; }
  #ecoliLab .plate-nav button { min-height: 44px; min-width: 44px; padding: 8px 8px 6px; font-size: 13.5px; }
  #ecoliLab .plate-body { padding-top: 8px; gap: 14px; }
  #ecoliLab .plate-main { border-radius: 10px; }
  #ecoliLab .eg-fig { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }   /* quick repeat taps tumble, not zoom */
  #ecoliLab .plate-side { gap: 14px; }
  #ecoliLab .plate-side > .caption { order: -1; padding-top: 0; }
  #ecoliLab .caption-head { font-size: 19px; }
  #ecoliLab .caption-text { font-size: 16.5px; }
  #ecoliLab .actions { gap: 10px; margin-top: 12px; }
  #ecoliLab .btn { min-height: 46px; padding: 10px 18px; font-size: 15px; }
  #ecoliLab .btn.small { min-height: 46px; min-width: 46px; padding: 2px 10px; font-size: 30px; line-height: 1; }
  #ecoliLab .eg-strip { max-width: none; }
  #ecoliLab .plate-title { font-size: clamp(22px, 6.6vw, 26px); }
  #ecoliLab .plate-foot { flex-wrap: wrap; gap: 8px 16px; }
  #ecoliLab .plate-foot summary { display: inline-flex; align-items: center; min-height: 40px; }
  #ecoliLab .plate-about { position: fixed; left: 12px; right: 12px; bottom: 12px; width: auto; max-height: 70vh; border-radius: 12px; }

  /* ---- Embody on a phone: one screen, no scrolling ---- */
  /* no footer on the Embody page and its games (the email is on Home and About) */
  body.art-research:has(#embody:not([hidden])) .site-footer { display: none; }
  /* game pages: the header keeps only the section tabs; the Concepts/Projects menus live on the Embody page */
  body.art-research:has(#embody.is-lab:not([hidden])) .site-header { grid-template-areas: "nav"; grid-template-columns: 1fr; padding: 4px 16px 0; }
  body.art-research:has(#embody.is-lab:not([hidden])) :is(.header-brand, .lang-switch) { display: none; }
  body.art-research #embody.is-lab { padding: 6px 12px 0; gap: 0; }
  /* the Concepts / Projects menus stay on game pages, as one compact row, to jump to the next one */
  body.art-research #embody.is-lab .embody-gates { display: flex; gap: 8px; margin: 2px 0 6px; }
  body.art-research #embody.is-lab .embody-gate summary { min-height: 38px; padding: 6px 30px 6px 12px; font-size: 12px; }
  /* the Embody page: the sphere takes the height that is left */
  body.art-research #embody:not(.is-lab) { padding-top: 10px; }
  body.art-research #embody:not(.is-lab) .hero-title { font-size: 25px; line-height: 1.15; }
  body.art-research #embody:not(.is-lab) .embody-lead { margin-top: 6px; font-size: 14.5px; line-height: 1.4; }
  body.art-research #embody:not(.is-lab) .embody-explore { margin-top: 10px; gap: 8px; }
  body.art-research #embody:not(.is-lab) .embody-explore-btn { min-height: 40px; padding-block: 6px; }
  body.art-research #embody:not(.is-lab) .embody-net-cue { margin-top: 8px; font-size: 13px; line-height: 1.35; }
  body.art-research #embody:not(.is-lab) .embody-net { height: clamp(180px, calc(100svh - 390px), 380px); margin-top: 0; }
  body.art-research #embody:not(.is-lab) .embody-net-stage { min-height: 0; }

  /* the E. coli game fills the screen below the tabs (game.js sets --plate-h); the figure takes what is left */
  #ecoliLab .plate { height: var(--plate-h, auto); display: flex; flex-direction: column; padding: 2px 0 4px; }
  #ecoliLab .plate-head { flex: none; gap: 0; }
  #ecoliLab .plate-title { font-size: clamp(20px, 5.8vw, 23px); }
  #ecoliLab .plate-lede { font-size: 14px; line-height: 1.35; margin-top: 2px !important; }
  #ecoliLab .plate-nav button { min-height: 42px; }
  #ecoliLab .plate-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
  #ecoliLab .plate-main { flex: 1 1 auto; min-height: 150px; padding: 4px; }
  #ecoliLab .plate-side { flex: none; gap: 6px; }
  #ecoliLab .caption-head { font-size: 16.5px; }
  #ecoliLab .caption-text { font-size: 15px; line-height: 1.4; margin-top: 2px; }
  #ecoliLab .actions { margin-top: 8px; gap: 8px; }
  #ecoliLab .btn { min-height: 44px; padding: 8px 16px; }
  #ecoliLab .panel-title { margin-bottom: 0 !important; }
  #ecoliLab .eg-strip { margin: 2px 0; }
  #ecoliLab .eg-key { padding-top: 2px; font-size: 11.5px; }
  #ecoliLab .plate-foot { flex: none; margin-top: 4px; padding-top: 2px; font-size: 11.5px; }
  #ecoliLab .plate-foot summary { min-height: 32px; }
  /* ---- the E. coli game, played by touch (game.js marks the plate .is-phone) ----
     instructions on top, the figure fills the screen, a training bar in level iii, results in a sheet at the bottom */
  #ecoliLab .plate.is-phone > .caption { flex: none; padding: 4px 0 0; }
  #ecoliLab .plate.is-phone .caption .actions { display: none; }
  #ecoliLab .plate.is-phone .eg-hint { display: block; flex: none; margin: 3px 0 6px; font: 500 12.5px/1.35 var(--sans); color: var(--ink-3); }
  #ecoliLab .plate.is-phone .plate-body { padding: 0 0 60px; gap: 6px; overflow: hidden; }   /* the closed sheet must not lengthen the page */
  #ecoliLab .plate.is-phone .plate-main { flex: 1 1 auto; min-height: 0; }
  #ecoliLab .plate.is-phone .eg-fig { touch-action: none; }
  #ecoliLab .plate.is-phone .eg-fig.is-holding { filter: drop-shadow(0 0 10px #ffdbb899); }
  #ecoliLab .plate.is-phone[data-level="3"] .eg-scrub {
    display: block; position: relative; flex: none; height: 34px; border-radius: 999px; overflow: hidden; touch-action: none;
    background: #ffffff1f; border: 1px solid var(--hair);
  }
  #ecoliLab .plate.is-phone .eg-scrub-fill { position: absolute; inset: 0 auto 0 0; background: #ffffff38; border-radius: 999px; }
  #ecoliLab .plate.is-phone .eg-scrub-label { position: relative; display: block; text-align: center; font: 600 12.5px/34px var(--sans); color: var(--ink); }
  #ecoliLab .plate.is-phone .plate-side {
    position: absolute; left: -2px; right: -2px; bottom: 0; z-index: 5; max-height: 78%; overflow: auto; overscroll-behavior: contain;
    padding: 0 14px 12px; border-radius: 16px 16px 0 0; background: var(--glass); box-shadow: 0 -10px 30px #0006;
    transform: translateY(calc(100% - 56px)); transition: transform .35s cubic-bezier(.22,.7,.28,1);
  }
  #ecoliLab .plate.is-phone.sheet-open .plate-side { transform: none; }
  #ecoliLab .plate.is-phone .plate-side > .panel { display: block; }
  #ecoliLab .plate.is-phone .eg-sheet-handle {
    display: flex; flex-direction: column; align-items: center; gap: 5px; position: sticky; top: 0; z-index: 1; width: 100%; min-height: 48px;
    padding: 7px 0 6px; border: 0; background: transparent; color: var(--ink-2); font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; touch-action: none;
  }
  #ecoliLab .plate.is-phone .eg-sheet-grip { width: 38px; height: 4px; border-radius: 4px; background: var(--hair); }
  #ecoliLab .plate.is-phone .plate-side > .plate-foot { display: flex; margin-top: 10px; }

  /* "Explore the concepts / projects": the title steps aside so the circles get the height, and every circle stays round */
  body.art-research #embody:has(.embody-net.is-gallery-open) :is(.hero-title, .embody-lead) { display: none; }
  body.art-research #embody:not(.is-lab) .embody-net.is-gallery-open { height: calc(100svh - 367px); min-height: 220px; }
  body.art-research #embody:has(.embody-net.is-gallery-open) .embody-explore-btn[aria-pressed="true"] { display: none; }
  body.art-research #embody:has(.embody-net.is-gallery-open) :is(.embody-explore-btn, .embody-explore-back) { font-size: 14.5px; min-height: 40px; padding: 6px 14px; }
  body.art-research .embody-net.is-gallery-open .embody-waypoint { display: none; }
  body.art-research .embody-node.is-gallery .embody-node-disc { aspect-ratio: 1; min-height: 0; overflow: hidden; padding: 2px; }
  body.art-research .embody-node.is-gallery .embody-role { display: none; }
  body.art-research .embody-node.is-gallery .embody-name { font-size: 11px; line-height: 1.15; }

  /* Impressions: exactly one screen (no footer); the title and the two doors sit higher on the face */
  body.art-research:has(#impressions:not([hidden])) .site-footer { display: none; }
  body.art-research .site-reader > main > #impressions { min-height: 0; height: calc(100svh - 104px); }
  body.art-research .impressions-stage .impression-side { padding-bottom: 16svh; }
  body.art-research #impressions .page-header { transform: translateY(-9svh); }

  /* ---- the springs and sleep games on a phone (labs/phone-plate.js marks the plate .pp.is-phone) ----
     the same pattern as the E. coli game: headline + hint on top, the figure fills the screen, big buttons under it,
     results in a sheet that slides up from the bottom */
  body.art-research :is(#springLab, #sleepLab) { padding: 0; }
  .plate.pp.is-phone { height: var(--plate-h, auto); min-height: 0; display: flex; flex-direction: column; padding: 2px 0 4px; }
  .plate.pp.is-phone .plate-head { flex: none; gap: 0; padding-bottom: 2px; }
  .plate.pp.is-phone .plate-title { font-size: clamp(20px, 5.8vw, 23px); line-height: 1.15; }
  .plate.pp.is-phone .plate-lede { font-size: 13.5px; line-height: 1.35; margin-top: 2px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .plate.pp.is-phone .plate-nav { justify-self: stretch; justify-content: space-between; margin: 0 -4px; scrollbar-width: none; }
  .plate.pp.is-phone .plate-nav button { min-height: 42px; min-width: 44px; padding: 8px 6px 6px; font-size: 13px; }
  .plate.pp.is-phone > .caption { flex: none; padding: 4px 0 0; overflow: visible; }
  .plate.pp.is-phone > .caption .caption-head { font-size: 16.5px; line-height: 1.3; }
  .plate.pp.is-phone > .caption .caption-text { font-size: 14.5px; line-height: 1.4; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .plate.pp.is-phone .pp-hint { flex: none; margin: 3px 0 6px; font: 500 12.5px/1.35 var(--sans); color: var(--ink-3); }
  .plate.pp.is-phone .plate-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 0 0 60px; overflow: hidden; }
  .plate.pp.is-phone .plate-main { flex: 1 1 auto; min-height: 0; padding: 4px; }
  .plate.pp.is-phone .plate-main > .fig { touch-action: none; }
  .plate.pp.is-phone .plate-body > .actions { flex: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
  .plate.pp.is-phone .plate-body > .actions .btn { flex: 1 1 auto; min-height: 48px; padding: 10px 16px; font-size: 15.5px; border-radius: 12px; }
  .plate.pp.is-phone .plate-body > .actions:empty { display: none; }
  .plate.pp.is-phone .plate-side {
    position: absolute; left: -2px; right: -2px; bottom: 0; z-index: 5; display: block; max-height: 78%; overflow: auto; overscroll-behavior: contain;
    padding: 0 14px 12px; border-radius: 16px 16px 0 0; background: var(--glass); box-shadow: 0 -10px 30px #0006;
    transform: translateY(calc(100% - 56px)); transition: transform .35s cubic-bezier(.22,.7,.28,1);
  }
  .plate.pp.is-phone.sheet-open .plate-side { transform: none; }
  .plate.pp.is-phone .plate-side > * { margin-bottom: 12px; }
  .plate.pp.is-phone .plate-side > .caption-text { font-size: 15px; line-height: 1.5; color: var(--ink); }
  .plate.pp.is-phone .pp-sheet-handle {
    display: flex; flex-direction: column; align-items: center; gap: 5px; position: sticky; top: 0; z-index: 1; width: 100%; min-height: 48px; margin: 0;
    padding: 7px 0 6px; border: 0; background: transparent; color: var(--ink-2); font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; touch-action: none;
  }
  .plate.pp.is-phone .pp-sheet-grip { width: 38px; height: 4px; border-radius: 4px; background: var(--hair); }
  .plate.pp.is-phone .plate-side > .plate-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .plate.pp.is-phone .plate-side > .plate-lede { display: block; -webkit-line-clamp: unset; font-size: 15px; line-height: 1.5; color: var(--ink); }
  /* the sleep network: a square box, as large as the space allows (no margins showing the wide desktop drawing) */
  .plate.pp.is-phone .sg2-fig { flex: 1 1 auto; min-height: 0; width: auto; max-width: 100%; height: 100%; aspect-ratio: 1; align-self: center; }
  .plate.pp.is-phone .plg-handle-hit { r: 46px; }   /* the blue spring's grab area: fingertip size even on small phones */
  /* the sleep game's budget, as a bar across the top of the figure */
  .plate.pp.is-phone .sg2-pbudget { display: block; flex: none; padding: 2px 4px 6px; font: 500 11.5px/1.3 var(--sans); color: var(--ink-2); }
  .plate.pp.is-phone .sg2-pbudget p { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 4px !important; }
  .plate.pp.is-phone .sg2-pbudget p .c { color: var(--blue); } .plate.pp.is-phone .sg2-pbudget p .p { color: var(--red); text-align: end; }
  .plate.pp.is-phone .sg2-pbudget i { font-style: normal; display: block; } .plate.pp.is-phone .sg2-pbudget b { font-weight: 650; }
  .plate.pp.is-phone .sg2-pbudget .bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--red); opacity: .9; }
  .plate.pp.is-phone .sg2-pbudget .bar .c { background: var(--blue); transition: width .3s ease; }

  /* ---- the 12 concepts on a phone: one screen, tighter text, no empty paper around the drawing, a big Equations button ---- */
  body.art-research [data-concept] .concept h2 { font-size: 22px; line-height: 1.2; margin: 0; }
  body.art-research [data-concept] .concept-intro { font-size: 14.5px; line-height: 1.4; margin-top: 4px; }
  body.art-research [data-concept] .concept-cue { font-size: 14.5px; line-height: 1.4; margin-top: 6px; min-height: 0; }
  body.art-research [data-concept] .concept-stage { margin-top: 8px; }
  body.art-research [data-concept] .concept-intro { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.art-research [data-concept] .concept-note { font-size: 12.5px; line-height: 1.4; padding-bottom: var(--badge-h, 0px); }   /* clear of Netlify's badge */
  body.art-research .nw-stage.is-portrait .nw-pill { transform: translateX(140px); }      /* Network: buttons and title inside the zoomed picture */
  body.art-research .nw-stage.is-portrait .nw-title { transform: translateX(-130px); }
  body.art-research .am-trace text { font-size: 26px !important; }                         /* Active matter: the speed graph's text, readable */
  body.art-research [data-concept] .eq-btn { min-height: 44px; padding: 8px 18px; font-size: 14.5px; }

  /* ---- concepts on a phone, round 2: small words, a big drawing ----
     stack.js shows one panel at a time, cropped to its drawing; it fills the width at its own shape */
  body.art-research [data-concept] .concept h2 { font-size: 20px; }
  body.art-research [data-concept] .concept-intro { font-size: 13.5px; line-height: 1.38; margin-top: 2px; }
  body.art-research [data-concept] .concept-cue { font-size: 13.5px; line-height: 1.38; margin-top: 4px; }
  body.art-research [data-concept] .concept-stage { margin: 6px -6px 0; border-radius: 12px; }
  body.art-research [data-concept] .concept-svg.is-half { height: auto !important; aspect-ratio: var(--cs-ar, 1); max-height: calc(100svh - 250px); }
  body.art-research [data-concept] .concept-note, body.art-research [data-concept] [class$="-ref"] { font-size: 12px; line-height: 1.4; }
  body.art-research .cs-tabs { display: flex; gap: 6px; margin: 8px 0 0; }
  body.art-research .cs-tabs[hidden] { display: none; }
  body.art-research .cs-tab {
    flex: 1 1 0; min-width: 0; min-height: 40px; padding: 6px 10px; border: 1px solid #fff8ee55; border-radius: 999px;
    background: transparent; color: #fff8eecc; font: 600 13px/1.2 var(--sans); text-transform: none; letter-spacing: .01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  body.art-research .cs-tab[aria-pressed="true"] { background: #f6e3cf; border-color: #f6e3cf; color: #0d1a2e; }
  /* the tabs stay at the top of a concept or game page, so they can always be reached */
  body.art-research:has(#embody.is-lab:not([hidden])) .site-header {
    position: sticky; top: 0; z-index: 40; background: #0b1626e0;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }

  /* Impressions doors: "Photography" touched the screen edge */
  body.art-research .impression-side .research-name { font-size: clamp(24px, 6.6vw, 30px); }

  /* ---- footer: at the end of the page, not pinned ---- */
  /* the extra bottom space keeps the end of every page clear of Netlify's "Powered by Netlify" badge,
     which Netlify pins to the bottom-right corner (it is part of the free plan and cannot be hidden) */
  body.art-research .site-footer { margin: 28px 20px 0; padding: 12px 0 calc(78px + env(safe-area-inset-bottom)); gap: 4px 18px; }
  body.art-research .site-footer a { min-height: 40px; }
}

/* The first background photo used to sit in an inline style in index.html, so phones downloaded the 3 MB landscape
   photo too. It now comes from here on wide screens only; phones get their portrait photo from site.js. */
@media (min-width: 701px) {
  #artLayerA { background-image: url('assets/landscape-v2/IMG_1107.jpg?v=hq'); }
}

/* Short phone screens (e.g. iPhone SE / mini with Safari's bars): the game's one-line intro steps aside so the
   figure and its fingertip targets keep their size */
@media (max-width: 700px) and (max-height: 640px) {
  #ecoliLab .plate.is-phone .plate-lede { display: none; }
}