/* ================= MOBILE STUDY · the phone composition inside the site =================
   Phones (and tall, narrow screens such as tablets held upright) get the approved mobile composition: HOME · A Corner and
   WORK · the running sheet. Everything else of the site is the approved one: the intro, the masthead, the footer, INFO
   and the project pages. Wider screens keep the desktop composition, untouched. */
#m { display: none; }
html.m-on #m { display: block; position: fixed; inset: 0; z-index: 30; }
html.m-on #home, html.m-on #work { display: none !important; }
html.m-on .stage { min-height: 0; }                          /* the footer stays on screen on short phones held sideways */
html.m-on body { overscroll-behavior: none; }

#m-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overflow-anchor: none; scroll-snap-type: y mandatory; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#m-scroll::-webkit-scrollbar { display: none; }
#m.wk #m-scroll { overflow-y: hidden; }
#m-stage { position: sticky; top: 0; height: 100%; overflow: hidden; }
#m-track { pointer-events: none; }
#m-scroll .snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }
#m-stage > * { position: absolute; }

#m-fig { left: 0; top: 0; z-index: 1; pointer-events: none; }
#m-spine { inset: 0; z-index: 3; pointer-events: none; }
#m .w { position: absolute; left: 0; top: 0; will-change: transform, opacity; pointer-events: auto; cursor: pointer; transition: filter .35s var(--ease-out, ease); }
#m .w img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--placeholder); transition: opacity .4s ease; }
#m .w .no { position: absolute; right: 100%; top: -1px; padding-right: 6px; font: 400 11px/14px var(--mono); letter-spacing: .08em; color: var(--ink-muted); }
#m .w.sel .no { color: var(--ink); }
#m .w:not(.sel) img { opacity: .9; }
#m .w.transit { filter: blur(1.4px); } #m .w.transit img { opacity: .45; }

/* the works' own line: 01-07, crossing the page behind the spine (each number kept whole on one line) */
#m-line { left: 0; right: 0; z-index: 2; height: 18px; display: flex; justify-content: space-between; align-items: center; white-space: nowrap;
  padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px)); font: 400 10px/14px var(--mono); letter-spacing: .06em; color: var(--ink-muted); }
#m-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); z-index: -1; }
#m-line button { font: inherit; letter-spacing: inherit; color: inherit; padding: 6px 2px; margin: -6px 0; background: var(--surface, #fff); border: 0; white-space: nowrap; position: relative; cursor: pointer; }
#m-line button::after { content: ""; position: absolute; left: -4px; right: -4px; top: -8px; bottom: -8px; }   /* a fingertip, invisibly */
#m-line button.on { color: var(--ink); }
@media (max-width: 380px) { #m-line { letter-spacing: 0; } #m-line button { padding: 6px 0; } }

/* the selected work's caption: number, title, type and year, in the desktop archive's type */
#m-cap { left: 0; top: 0; z-index: 4; display: grid; gap: 2px; pointer-events: auto; }
#m-cap .n, #m .sp-c .n { font: 400 11px/16px var(--mono); letter-spacing: .08em; color: var(--ink-muted); }
#m-cap .ti, #m .sp-c .ti { font: 400 15px/20px var(--sans); text-wrap: balance; }
#m-cap .t, #m .sp-c .t { font: 400 10px/14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
#m-cap .op, #m .sp-c button { justify-self: start; font: 500 13px/16px var(--sans); color: var(--ink); background: none; border: 0; cursor: pointer;
  padding: 14px 18px 14px 0; margin: -8px 0 -14px; }       /* a 44 px touch area around a 16 px line */

/* her side: her caption, the ring, and her timeline as a quiet detail */
#m-wall { left: 0; top: 0; z-index: 4; display: grid; gap: 2px; pointer-events: none; }
#m-wall b { font: 500 13px/18px var(--sans); }
@media (orientation: portrait) { #m-wall .fl { display: none; } }
#m-ticks { display: flex; gap: 2px; margin-top: 6px; height: 7px; align-items: flex-end; }
#m-ticks i { width: 1px; height: 4px; background: var(--line); }
#m-ticks i.on { height: 7px; background: var(--ink); }
#m-ring { left: 0; top: 0; z-index: 4; width: 76px; height: 76px; margin: -38px 0 0 -38px; pointer-events: none; }
#m-ring svg { width: 100%; height: 100%; overflow: visible; }
#m-ring text { font: 400 7px var(--mono); letter-spacing: .14em; fill: var(--ink-muted); text-transform: uppercase; }
#m-dot { left: 0; top: 0; z-index: 8; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 9px; background: var(--pulse); pointer-events: none; }
#m-cue { right: max(var(--gutter), env(safe-area-inset-right, 0px)); top: 0; z-index: 4; text-align: right; cursor: pointer; }

/* WORK · the running sheet */
#m-wbar { left: 0; top: 0; z-index: 7; opacity: 0; pointer-events: none; display: flex; justify-content: space-between; align-items: baseline; }
#m-wbar h2 { margin: 0; }
#m-wbar button { font: 500 13px/16px var(--sans); letter-spacing: .02em; padding: 14px 0 14px 20px; margin: -14px 0; background: none; border: 0; color: var(--ink); cursor: pointer; }
#m-sheet { inset: 0; z-index: 6; visibility: hidden; touch-action: none; cursor: grab; }
#m-sheet.on { visibility: visible; }
#m-sheet > * { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
#m .sp-h { background: var(--placeholder); }
#m .media { position: absolute; inset: 0; background: transparent; }
#m .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#m .sp-h.cur { box-shadow: var(--shadow-diffuse); }
#m .sp-h::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, rgba(255, 250, 238, 0) 30%, rgba(255, 250, 238, .55) 50%, rgba(255, 250, 238, 0) 70%) no-repeat; background-size: 260% 100%; }
#m .sp-h.lit::after { animation: m-sheen 1.5s cubic-bezier(.33, 1, .68, 1) both; }
@keyframes m-sheen { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -60% 0; } }
html.is-still #m .sp-h.lit::after { animation: none; }
#m .sp-i { display: block; object-fit: cover; background: var(--placeholder); box-shadow: 1px 2px 3px rgba(22, 28, 37, .06); -webkit-user-drag: none; }
#m .sp-c { display: grid; gap: 2px; align-content: start; color: var(--ink); }
#m .sp-c .x { font-size: 12px; line-height: 17px; color: var(--ink-muted); margin-top: 6px; }
#m .sp-c .rl { font-size: 12px; line-height: 17px; color: var(--ink); margin-top: 6px; }
#m .sp-c:not(.tall) .rl, #m .sp-c.nx .x { display: none; }
#m .sp-c button { margin-top: 0; }
html.m-wk-tiny .foot { opacity: 0; pointer-events: none; transition: opacity .3s; }
#m-idx { left: 0; top: 0; z-index: 7; opacity: 0; pointer-events: none; height: 20px; }
#m-idx button { position: absolute; top: 0; transform: translateX(-50%); padding: 4px; font: 400 10px/12px var(--mono); letter-spacing: .06em; color: var(--ink-muted); background: none; border: 0; cursor: pointer; }
#m-idx button::after { content: ""; position: absolute; left: -8px; right: -8px; top: -20px; bottom: -6px; }   /* a fingertip, invisibly */
#m-idx button.on { color: var(--ink); }
html.m-on.m-wk .masthead #work-link::before { content: ""; position: absolute; left: -12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 9999px; background: var(--pulse); }
html.m-on.m-wk .masthead #work-link { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
@media (prefers-reduced-motion: reduce) { #m .w, #m .w img { transition: none; } }

/* ================= responsive corrections to approved parts (phones only; the desktop is untouched) ================= */
/* the intro on short screens held sideways: the character on the left, the two languages on the right, nothing crossing it */
@media (orientation: landscape) and (max-height: 500px) {
  .v-a2 { --cw: min(44vw, calc((100vh - 96px) * 2.273)); --cy: 54vh; }
  .v-a2 .in-char, .v-a2 .in-shadow { left: 28%; }
  .v-a2 .in-langs { flex-direction: column !important; left: 58% !important; right: max(var(--gutter), env(safe-area-inset-right, 0px)) !important; top: 54% !important; bottom: auto !important;
    transform: translateY(-50%); justify-content: center; touch-action: none; }
  .v-a2 .in-lang { flex: none !important; min-height: 0 !important; padding: 12px 0 !important; gap: 4px !important; justify-items: start !important; grid-template-columns: none; border: 0 !important; display: grid; }
  .v-a2 .in-lang + .in-lang { border-left: 0 !important; border-top: 1px solid var(--line) !important; }
  .v-a2 .in-lang .w { font-size: clamp(22px, 7.5vh, 30px) !important; }
  .v-a2 .in-hint { left: 58% !important; right: var(--gutter) !important; top: auto !important; bottom: calc(46vh + 70px) !important; text-align: left !important; }
}
@media (orientation: landscape) and (max-height: 330px) {
  .v-a2 .in-lang { padding: 6px 0 !important; }
  .v-a2 .in-hint { bottom: calc(46vh + 56px) !important; }
}

/* touch: the masthead's name and the language switch get a fingertip-sized area on phones (nothing visible changes) */
html.m-on .masthead #home-link, html.m-on .masthead .lang-sw button { position: relative; }
html.m-on .masthead #home-link::after { content: ""; position: absolute; left: -8px; right: -8px; top: -14px; bottom: -14px; }
html.m-on .masthead .lang-sw button::after { content: ""; position: absolute; left: -10px; right: -10px; top: -14px; bottom: -14px; }
/* the narrowest phones: the red mark of the current page sits under its word, so it never touches the name */
@media (max-width: 340px) { html.m-on .masthead nav a[aria-current="page"]::before { left: 50%; top: auto; bottom: 2px; margin: 0 0 0 -3px; } }

#m-cap.onp { background: var(--surface, #fff); padding: 6px 10px 2px; margin: -6px 0 0 -10px; box-shadow: 0 0 0 1px rgba(255,255,255,.6); }

/* preview chrome only (removed at integration): on phones the test bar steps aside while WORK or a project is open, so it
   never covers WORK's title, Close or a project's bar; the old layout pickers no longer apply here */
html.m-on.m-wk .studybar, html.m-on.m-moved .studybar, html.m-on:has(.proj.is-open) .studybar, html.m-on:has(#about:not([hidden])) .studybar { display: none !important; }
html.m-on .studybar .lpick, html.m-on .studybar .mpick, html.m-on .studybar .tpick, html.m-on .studybar .npick, html.m-on .studybar .fpick { display: none !important; }
@media (orientation: landscape) and (max-height: 500px) { html.m-on .studybar, html:has(#intro) .studybar { display: none !important; } }   /* preview chrome: no room for it sideways on a phone */
@media (min-width: 600px) { html.m-on .studybar { display: none !important; } }   /* preview chrome: on upright tablets it would sit on the masthead */