/* mobile.css: the BRIDGE pages on a phone (under 761 px). Direction A, "the title screen", picked by Omar on 17 October
   (T-053): the paintings fill the phone, framed for a tall screen; headlines sit low on the painting like a game's title;
   notes inside a scene are small, sit where nobody is standing (mobile.js measures every person on screen), and point
   at the person or place they talk about; a slim status line at the top. Desktop is untouched: every rule below sits in
   a phone media query, and the lab sections (.mx) never show on a wider screen. */
@media (min-width: 761px) { .mx { display: none !important; } }

@media (max-width: 760px) {
  /* ---------- the status line: two light chips, no outlines, nothing cut off ---------- */
  body > .top { position: fixed; z-index: 40; padding: max(10px, env(safe-area-inset-top)) 12px 0; }
  body > .top .mark { background: rgba(251, 248, 242, .9); box-shadow: none; border-radius: 12px; min-height: 40px; padding: 8px 9px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  body > .top .mark .bridge-mark { width: 30px; height: 18px; }
  body > .top .bstatus, body > .top .who { background: rgba(251, 248, 242, .9); box-shadow: none; min-height: 40px; font-size: 13px; padding-left: 12px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  body > .top .bstatus .st-town { display: none; }
  body > .top .mark, body > .top .bstatus { transition: opacity .3s var(--ease); }
  body > .top .m-aside { opacity: 0; pointer-events: none; }
  body > .top .m-tuck { opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); }
  body > .top .bstatus .st-time::before { margin: 0 6px 0 2px; }
  /* T-156: the Board tab sits with the mark and steps aside or tucks away with it */
  body > .top:has(.btab) { --btab-w: 72px; }
  /* the status bar gets what the mark (48 px) and the tab leave, so its sound switch stays on screen at 360 px */
  body > .top .bstatus { max-width: calc(100vw - 24px - 48px - 6px - var(--btab-w) - 8px); }
  body > .top .btab { background: rgba(251, 248, 242, .9); box-shadow: none; border-radius: 12px; min-height: 40px; margin-left: 6px; padding: 0 10px 0 9px; font-size: 14px; gap: 6px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .3s var(--ease); }
  body > .top .btab[aria-current="page"] { background: #0433ff; }
  body > .top .btab .btab-ic { display: none; }   /* the word alone on a phone, so a long city name still fits beside it */
  /* the city name gives way before the sound switch would leave the screen (a long city on the narrowest phones) */
  body > .top .st-where-wrap, body > .top .st-city-btn, body > .top .st-city { min-width: 0; }
  body > .top .st-city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body > .top .mark.m-aside + .btab { opacity: 0; pointer-events: none; }
  @media (max-width: 374px) {
    body > .top:has(.btab) { --btab-w: 44px; }
    body > .top .btab { font-size: 0; padding: 0 12px; }   /* the board's three bars alone; its name stays for screen readers */
    body > .top .btab .btab-ic { display: inline-flex; }
  }
  body > .top .mark.m-tuck + .btab { opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); }

  /* ---------- headings ---------- */
  body h2 { font-size: clamp(29px, 8.2vw, 34px); }

  /* ---------- notes and titles shared by every page ---------- */
  .mx { position: relative; }
  .mx .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  .mx .lpanel { position: relative; overflow: hidden; background: var(--mist-2); }
  .mx .lpanel.full { position: absolute; inset: 0; }
  .mx .lpanel .plate { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
  .mx .lpanel .plate > img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .mx .tags { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
  .mx .tag { position: absolute; transform: translate(-50%, -100%); opacity: 0; transition: opacity .4s var(--ease); }
  .mx .tag.on { opacity: 1; }
  .mx .tag small { font-size: 11px; opacity: .72; margin-left: 5px; font-weight: 400; }
  .mx h1 { margin: 0; font-weight: 600; line-height: 1.04; }
  .mx h2 { margin: 0; font-weight: 600; line-height: 1.06; }
  .mx h3 { margin: 0 0 5px; font-size: 18px; font-weight: 600; letter-spacing: -.012em; line-height: 1.2; text-wrap: balance; }
  .mx p { text-wrap: pretty; }
  .mx .rung { display: inline-block; font-size: 12px; font-weight: 500; padding: 4px 9px 3px; border-radius: 999px; color: var(--paper); margin-right: 8px; vertical-align: 1px; }
  .mx .steps, .mnote .steps { display: flex; gap: 5px; }
  .mx .steps i { width: 7px; height: 7px; background: rgba(28, 45, 41, .16); transition: background .3s var(--ease); }
  .mx .steps i.on { background: #0433ff; }
  /* the shade under a title: the painting darkens toward the words, like dusk at the foot of the screen */
  .mveil { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none;
    background: linear-gradient(180deg, rgba(28, 45, 41, 0) 0%, rgba(28, 45, 41, .3) 42%, rgba(28, 45, 41, .6) 100%); }

  /* ---------- home: the title screen and the walk through town ---------- */
  html.m-home .b1, html.m-home .b3 { display: none !important; }
  .mA-hero { height: 640vh; }
  .mA-mail { height: 470vh; }
  .mA-title { position: absolute; z-index: 3; left: 22px; right: 22px; bottom: calc(26px + env(safe-area-inset-bottom)); color: var(--paper); }
  .mA-title h1 { font-size: clamp(32px, 9.6vw, 40px); max-width: 11ch; text-shadow: 0 2px 0 rgba(28, 45, 41, .3), 0 0 28px rgba(28, 45, 41, .55); }
  .mA-title .mk { margin: 0 0 10px; font-size: 13px; font-weight: 600; text-shadow: 0 1px 10px rgba(28, 45, 41, .8); }
  .mA-title .go { margin: 22px 0 0; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; text-shadow: 0 1px 10px rgba(28, 45, 41, .8); }
  .mA-title .chev { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); animation: mA-bob 1.6s var(--ease) infinite; }
  @keyframes mA-bob { 50% { transform: rotate(45deg) translate(3px, 0); } }
  .mA-note { position: absolute; z-index: 4; left: 14px; right: 14px; top: 50%; background: var(--paper); border-radius: 16px; padding: 14px 16px;
    box-shadow: 0 18px 40px -22px rgba(28, 45, 41, .75); opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .4s var(--ease), top .3s var(--ease); pointer-events: none; }
  .mA-note.on { opacity: 1; transform: none; pointer-events: auto; }
  .mA-note .pt { position: absolute; top: -7px; left: var(--px, 40px); width: 16px; height: 16px; background: var(--paper); transform: rotate(45deg); border-radius: 3px 0 0 0; }
  .mA-note.up .pt { top: auto; bottom: -7px; border-radius: 0 0 3px 0; }
  .mA-note .nt { display: none; position: relative; }
  .mA-note .nt.on { display: block; }
  .mA-note .pl { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--brick); }
  .mA-note .nt > p:last-child { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ink-soft); }
  .mA-note .steps { margin-top: 12px; }
  .mA-mtitle { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 30px 22px calc(26px + env(safe-area-inset-bottom)); color: var(--paper); }
  .mA-mtitle h2 { font-size: clamp(28px, 8vw, 33px); text-shadow: 0 2px 0 rgba(28, 45, 41, .3), 0 0 26px rgba(28, 45, 41, .55); }
  .mA-mtitle p { margin: 10px 0 0; font-size: 16px; line-height: 1.45; text-shadow: 0 1px 12px rgba(28, 45, 41, .8); }

  /* home: the cast; the words come first on the page, then the Workshop fills the phone */
  html .b2 .mcopy { padding: 72px 22px 30px; background: var(--mist); }
  html .b2 .mcopy p { margin: 12px 0 0; font-size: 16.5px; color: var(--ink-soft); }
  html .b2 .mcopy .fams { margin-top: 16px; }
  html .b2 .mcopy .seathint { display: none; }
  html .b2 .stage { display: block; }
  html .b2 .stage .panel { position: absolute; inset: 0; }

  /* home: the mail pile */
  html .bp .copy { padding-top: 84px; }

  /* home: the way into town; the invitation is a title on the painting */
  html .b4 .window { clip-path: none !important; }
  html .b4 .invite { left: 0; right: 0; bottom: 0; width: auto; background: none; box-shadow: none; border-radius: 0; color: var(--paper);
    padding: 120px 22px calc(22px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(28, 45, 41, 0) 0%, rgba(28, 45, 41, .45) 40%, rgba(28, 45, 41, .7) 100%); }
  html .b4 .invite h2 { font-size: clamp(28px, 8vw, 33px); text-shadow: 0 2px 0 rgba(28, 45, 41, .3), 0 0 26px rgba(28, 45, 41, .5); }
  html .b4 .invite p { color: rgba(251, 248, 242, .95); text-shadow: 0 1px 12px rgba(28, 45, 41, .8); }
  html .b4 .invite .note { color: rgba(251, 248, 242, .9); }
  html .b4 .invite .btn { background: var(--paper); color: var(--ink); }
  html .b4 .invite .btn:hover { background: #fff; }

  /* ---------- the heroes of How it works, Where it came from and The paper: titles low on the painting ---------- */
  html .hero .hcard, html .hero .card { left: 0; right: 0; top: auto; bottom: 0; width: auto; transform: none !important; background: none; box-shadow: none;
    border-radius: 0; padding: 120px 22px calc(24px + env(safe-area-inset-bottom)); color: var(--paper);
    background: linear-gradient(180deg, rgba(28, 45, 41, 0) 0%, rgba(28, 45, 41, .42) 36%, rgba(28, 45, 41, .66) 100%); pointer-events: none; }
  html .hero .hcard h1, html .hero .card h1 { color: var(--paper); font-size: clamp(36px, 10.6vw, 44px); text-shadow: 0 2px 0 rgba(28, 45, 41, .3), 0 0 28px rgba(28, 45, 41, .5); }
  html .hero .hcard p, html .hero .card p { color: rgba(251, 248, 242, .95); font-size: 16px; line-height: 1.45; margin-top: 12px; text-shadow: 0 1px 12px rgba(28, 45, 41, .75); }
  html .hero .clockchip { top: calc(60px + env(safe-area-inset-top)); }

  /* Where it came from: the 2019 canyon page fills the phone (a tall cut of it, the two villages and the river, the words
     band left out), then wipes to the town */
  html .hero .then img { top: 0 !important; bottom: 0 !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover !important; object-position: 50% 100% !important; content: url(blueprint/p-016-phone.jpg); }
  /* Where it came from: three pairs, the 2019 page on top, the words in the middle, the town below; nothing on top of anyone */
  html .pairs .pstage { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); gap: 0; padding: calc(62px + env(safe-area-inset-top)) 0 0; }
  html .pairs .side.then { grid-row: 1; margin: 0 12px; aspect-ratio: 1400 / 788; border-radius: 14px; box-shadow: 0 0 0 1px rgba(42, 37, 34, .1); }
  html .pairs .pcap { grid-row: 2; position: relative; left: auto; right: auto; bottom: auto; margin: 12px 12px 12px; }
  html .pairs .pcap article { box-shadow: none; padding: 14px 16px 15px; }
  html .pairs .side.now { grid-row: 3; border-radius: 0; }
  html .pairs .side .yr { box-shadow: none; background: rgba(251, 248, 242, .92); }
}

/* ---------- the pinned scenes, only when they move (reduced motion keeps every caption in a list) ---------- */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  html .scene, html .scene.bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  html .scene .sstage, html .scene.bleed .sstage { top: 0; height: 100vh; height: 100svh; }
  html .scene .panel, html .scene.bleed .panel { border-radius: 0; }
  html .scene .clockchip { display: none; }
  html .scene .cap, html .scene .cap.r, html .scene.bleed .cap, html .scene.bleed .cap.r { left: 12px; right: 12px; width: auto; bottom: auto; top: var(--note-y, calc(100% - 140px)); }
  html .scene .cap.placed { transition: top .3s var(--ease); }
  html .scene .cap li { font-size: 15.5px; line-height: 1.45; padding: 12px 15px 13px; border-radius: 16px; box-shadow: 0 16px 34px -20px rgba(28, 45, 41, .75); }
  html .scene .cap li.send { box-shadow: inset 4px 0 0 #b8473b, 0 16px 34px -20px rgba(28, 45, 41, .75); }
  html .scene .cap li.fix { box-shadow: inset 4px 0 0 #3f8a49, 0 16px 34px -20px rgba(28, 45, 41, .75); }
  html .scene .cap .mpt { position: absolute; z-index: 1; left: var(--px, 30px); width: 16px; height: 16px; background: var(--paper); transform: rotate(45deg); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
  html .scene .cap.pt-up .mpt { top: var(--pt-top, -6px); border-radius: 3px 0 0 0; opacity: 1; }
  html .scene .cap.pt-down .mpt { bottom: -6px; border-radius: 0 0 3px 0; opacity: 1; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .mA-hero, .mA-mail { height: auto; }
  .mA-title .chev { animation: none; }
}