/* Calmer phone reading (phones up to 700px wide only; laptops and desktops are untouched).
   Loaded after mobile.css. Each block is independent: delete one to undo just that change.
   The Embody games and concepts are left alone here (they are styled in mobile.css). */

@media (max-width: 700px) {

  /* 1. Long reading text on the dark pages: a warm off-white instead of near-white, so the lines glow less */
  body.art-research #research .research-statement,
  body.art-research #about .about-body { color: #ede4d7; }

  /* 2. Links inside paragraphs: a fainter, lower underline, so a paragraph with many citations reads as text first */
  body.art-research #research .research-statement a,
  body.art-research #about .about-body a,
  body.art-research :is(#model, #sleep, #circadian, #organoids) :is(.model-essay, .project-intro, .paper-finding, .project-notes) a {
    text-decoration-color: #b7c8da5c !important;   /* sans.css sets every link's underline with !important */
    text-decoration-thickness: 1px;
    text-underline-offset: .24em;
  }

  /* 3. No small ↗ after every citation in running text (it often wrapped onto its own line as "↗)").
        The arrow stays on the buttons: "Read the paper ↗", the arXiv line and figure sources. */
  body.art-research .research-statement a::after,
  body.art-research #about .about-body a::after,
  body.art-research :is(#model, #sleep, #circadian, #organoids) :is(.model-essay, .project-intro, .paper-finding, .project-notes) a[target="_blank"]::after { content: none; display: none; }

  /* 4. Concept words (adaptation, genome, cell–matrix mechanochemical feedback…) wrap like normal words,
        instead of jumping whole onto the next line and leaving a short word stranded */
  body.art-research :is(.research-statement, .welcome-title) :is(a, button).concept-link { display: inline; }

  /* 5. Home: the opening sentence in a medium weight and with the same quiet underlines (it has nine links) */
  body.art-research .welcome-title { font-weight: 500; }
  body.art-research #home .welcome-title :is(a, button).concept-link {
    text-decoration-color: #b7c8da70 !important;
    text-underline-offset: .2em;
  }

  /* 6. Home: background photos fade into each other slowly instead of switching in about a second */
  body.art-research .art-layer { transition: opacity 3s ease, filter .8s ease, transform .8s ease; }

  /* 7. Impressions: a soft shade behind the name and tabs, so they read over the painting */
  body.art-research:has(#impressions:not([hidden])) .site-header {
    background: linear-gradient(to bottom, #0b1626b8 0%, #0b162680 60%, #0b162600 100%);
    padding-bottom: 12px;
  }

  /* 8. White paper figures on the project pages: a little less bright, so they don't flash in the dark */
  body.art-research :is(#model, #sleep, #circadian, #organoids) .model-figure img { filter: brightness(.9); }

  /* 9. Tiny capital line under the name: one step larger and less spaced, easier to read */
  body.art-research .home-affiliation { font-size: 10.5px; letter-spacing: .05em; }

  /* 10. Impressions doors: the wide coloured glow blurred the letters, and the face behind is as light as the glow.
         Now each word sits on a soft cream haze, with a tight halo and slightly deeper colour, so the letters are crisp. */
  body.art-research .impressions-stage .impression-side .research-name {
    background: radial-gradient(closest-side, #fbf4eacc 55%, #fbf4ea00);
    padding: 10px 22px 14px;
  }
  body.art-research .impressions-stage .impression-side[href="#writing"] .research-name {
    color: #a8473a; text-shadow: 0 0 2px #fff8ee, 0 0 12px #fff8ee99;
  }
  body.art-research .impressions-stage .impression-side[href="#photography"] .research-name {
    color: #586843; text-shadow: 0 0 2px #fff8ee, 0 0 12px #fff8ee99;
  }

  /* 11. Embody sphere: "Start here" / "Finish here" were hidden behind nearer circles as the sphere turned.
         Their two circles now always stay in front (photographic.js sets depth inline, hence !important),
         and each label sits on a soft dark pill so it reads over any circle. Not while the gallery is open. */
  body.art-research .embody-net:not(.is-gallery-open) .embody-node:is(.is-entry, .is-exit) { z-index: 11 !important; }
  body.art-research .embody-node .embody-waypoint {
    padding: 3px 9px; border-radius: 999px;
    background: #0b1626a6; text-shadow: none;
  }
}

/* On touch screens there is no hover: tapping a concept word no longer lifts it or leaves a tooltip stuck on screen */
@media (max-width: 700px) and (hover: none) {
  body.art-research :is(.research-statement, .welcome-title, .concept-intro) :is(a, button).concept-link:hover,
  body.art-research :is(.research-statement, .welcome-title, .concept-intro) :is(a, button).concept-link:focus-visible { transform: none; }
  body.art-research :is(.research-statement, .welcome-title, .concept-intro) :is(a, button).concept-link:hover::after { content: none; }
}

/* The springs and sleep games' Results sheet (labs/phone-plate.js): the results first, then one quiet folded line,
   "About this level", holding the level's longer explanation */
@media (max-width: 700px) {
  .plate.pp.is-phone .pp-more { margin: 4px 0 12px; border-top: 1px solid var(--hair); padding-top: 8px; }
  .plate.pp.is-phone .pp-more > summary {
    display: flex; align-items: center; min-height: 40px; cursor: pointer; list-style: none;
    color: var(--ink-2); font: 600 13px/1.2 var(--sans); letter-spacing: .02em;
  }
  .plate.pp.is-phone .pp-more > summary::-webkit-details-marker { display: none; }
  .plate.pp.is-phone .pp-more > summary::after { content: "+"; margin-inline-start: auto; font-size: 18px; font-weight: 400; }
  .plate.pp.is-phone .pp-more[open] > summary::after { content: "−"; }
  .plate.pp.is-phone .pp-more :is(.plate-lede, .caption-text) {
    display: block; -webkit-line-clamp: unset; overflow: visible; margin: 0 0 10px !important;
    font-size: 15px; line-height: 1.5; color: var(--ink);
  }
}
/* the game sheets were see-through: buttons and legends behind them showed through the results. Blur what is behind. */
@media (max-width: 700px) {
  :is(.plate.pp.is-phone, #ecoliLab .plate.is-phone) .plate-side { -webkit-backdrop-filter: blur(18px) saturate(.9); backdrop-filter: blur(18px) saturate(.9); }
}