/*
 * Short-phone director pass
 * ------------------------------------------------------------
 * This edit is deliberately narrow: phones with little vertical room get
 * their own composition instead of a clipped version of the tall-phone shot.
 */

@media (max-width: 700px) {
  /* The puzzle is one contained shot on a phone: image, words and controls
     share the same 62svh frame instead of becoming two distant blocks. */
  .scroll-painting #contact-sheet .puzzle-story,
  .scroll-painting #contact-sheet .puzzle-story.is-static {
    height: auto;
    min-height: 0;
    margin-top: clamp(58px, 9vh, 82px);
    overflow: visible;
  }

  .scroll-painting #contact-sheet .puzzle-story__sticky,
  .scroll-painting #contact-sheet .puzzle-story.is-static .puzzle-story__sticky {
    position: relative;
    top: auto;
    display: grid;
    width: 100%;
    height: 62svh;
    min-height: 56svh;
    max-height: 62svh;
    padding: 0;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid rgb(232 217 196 / .12);
    border-radius: 22px;
    background: #071019;
    box-shadow: 0 26px 70px rgb(0 0 0 / .3);
    isolation: isolate;
  }

  .scroll-painting #contact-sheet .puzzle-story__visual,
  .scroll-painting #contact-sheet .puzzle-story.is-static .puzzle-story__visual {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
    border: 0;
    background: #071019;
    box-shadow: none;
  }

  .scroll-painting #contact-sheet .puzzle-story__visual::before {
    display: none !important;
  }

  .scroll-painting #contact-sheet .puzzle-story__visual::after {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: block;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(180deg, rgb(2 7 12 / .08) 0 28%, rgb(2 8 14 / .34) 58%, rgb(2 7 12 / .94) 100%),
      linear-gradient(90deg, rgb(3 8 13 / .18), transparent 50% 78%, rgb(3 8 13 / .1));
  }

  .scroll-painting #contact-sheet .puzzle-story__frames,
  .scroll-painting #contact-sheet .puzzle-story.is-static .puzzle-story__frames,
  .scroll-painting #contact-sheet .puzzle-story__frame,
  .scroll-painting #contact-sheet .puzzle-story.is-static .puzzle-story__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .scroll-painting #contact-sheet .puzzle-story__image,
  .scroll-painting #contact-sheet .puzzle-story.is-static .puzzle-story__image {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: 50% 43%;
  }

  .scroll-painting #contact-sheet .puzzle-story__copy,
  .scroll-painting #contact-sheet .puzzle-story.is-static .puzzle-story__copy {
    position: absolute;
    z-index: 4;
    right: 18px;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 18px;
    width: auto;
    margin: 0;
    padding: clamp(74px, 16svh, 126px) 2px 0;
    align-self: end;
    color: rgb(246 238 225 / .96);
    background: transparent;
    text-shadow: 0 2px 18px rgb(0 0 0 / .72);
  }

  .scroll-painting #contact-sheet .puzzle-story__copy h3 {
    max-width: 9em;
    margin: 0;
    color: inherit;
    font-size: clamp(1.5rem, 7vw, 2.05rem);
    line-height: 1.06;
    letter-spacing: -.035em;
  }

  .scroll-painting #contact-sheet .puzzle-story__copy > p:not(.eyebrow, .puzzle-story__hint, .puzzle-story__final) {
    display: -webkit-box;
    max-width: 28em;
    margin-top: 7px;
    overflow: hidden;
    color: rgb(240 232 219 / .84);
    font-size: clamp(.72rem, 3.15vw, .84rem);
    line-height: 1.48;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .scroll-painting #contact-sheet .puzzle-story__hint {
    display: block;
    margin-top: 5px;
    color: rgb(237 226 210 / .66);
    font-size: .61rem;
    letter-spacing: .045em;
    line-height: 1.4;
  }

  .scroll-painting #contact-sheet .puzzle-story__controls {
    position: static;
    display: flex;
    width: 100%;
    margin-top: 8px;
    gap: 6px;
    opacity: 1;
    pointer-events: auto;
  }

  .scroll-painting #contact-sheet .puzzle-story__control {
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    flex: 1;
    justify-content: center;
    border: 1px solid rgb(239 226 207 / .17);
    border-radius: 999px;
    color: rgb(238 229 216 / .68);
    background: rgb(3 9 14 / .3);
    font-size: .65rem;
    letter-spacing: .08em;
    text-shadow: none;
  }

  .scroll-painting #contact-sheet .puzzle-story__control::after {
    display: none;
  }

  .scroll-painting #contact-sheet .puzzle-story__control:hover,
  .scroll-painting #contact-sheet .puzzle-story__control:focus-visible,
  .scroll-painting #contact-sheet .puzzle-story__control[aria-pressed="true"] {
    border-color: rgb(239 212 173 / .42);
    color: rgb(250 239 222 / .96);
    background: rgb(117 85 64 / .34);
  }

  .scroll-painting #contact-sheet .puzzle-story__final {
    max-height: 0;
    margin: 0;
    overflow: hidden;
    color: rgb(244 229 207 / .88);
    font-size: .72rem;
    line-height: 1.42;
    opacity: 0;
    transform: translateY(4px);
    transition:
      max-height 420ms ease,
      margin 420ms ease,
      opacity 360ms ease,
      transform 420ms ease;
  }

  .scroll-painting #contact-sheet .puzzle-story__final.is-visible {
    max-height: 3.2em;
    margin-top: 6px;
    opacity: 1;
    transform: none;
  }

  /* Keep dawn cinematic but never white-hot. The copy sits on an ink-dark
     plane and the six coordinates form a readable lower constellation. */
  .scroll-painting .dawn-coordinates {
    box-sizing: border-box;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    margin-block: 42px 58px;
    padding:
      max(68px, env(safe-area-inset-top))
      20px
      max(30px, env(safe-area-inset-bottom));
    align-items: stretch;
    color: rgb(248 240 226 / .95);
    background:
      radial-gradient(circle at 78% 18%, rgb(238 207 160 / .12), transparent 12%),
      linear-gradient(180deg, #07121d 0%, #162a36 55%, #384b53 100%);
  }

  .scroll-painting .dawn-coordinates.is-awake {
    color: rgb(250 242 229 / .96);
    background:
      radial-gradient(circle at 78% 18%, rgb(242 208 158 / .16), transparent 14%),
      radial-gradient(ellipse 72% 32% at 54% 102%, rgb(185 132 99 / .14), transparent 74%),
      linear-gradient(180deg, #122431 0%, #2c424b 57%, #555b59 100%);
  }

  .scroll-painting .dawn-coordinates::before,
  .scroll-painting .dawn-coordinates__sky {
    opacity: calc(.54 + var(--dawn-progress) * .22);
    filter:
      saturate(calc(.7 + var(--dawn-progress) * .16))
      brightness(calc(.78 + var(--dawn-progress) * .12));
  }

  .scroll-painting .dawn-coordinates::after {
    background:
      radial-gradient(ellipse 78% 42% at 62% 104%, rgb(226 175 129 / .22), transparent 72%),
      linear-gradient(180deg, transparent 58%, rgb(179 138 108 / .1) 100%);
    opacity: clamp(0, calc((var(--dawn-progress) - .62) * 1.35), .42);
  }

  .scroll-painting .dawn-coordinates__copy {
    z-index: 4;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 43%;
    margin: 0;
    padding: 20px 16px 24px;
    align-self: start;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgb(229 196 151 / .2);
    border-radius: 0 20px 20px 0;
    color: rgb(249 241 228 / .97);
    background: linear-gradient(90deg, rgb(3 10 17 / .82), rgb(5 13 20 / .56) 78%, transparent);
    box-shadow: -18px 0 44px rgb(2 8 14 / .18);
  }

  .scroll-painting .dawn-coordinates__copy .eyebrow {
    margin: 0 0 10px;
    color: rgb(241 226 205 / .75);
    font-size: .57rem;
    letter-spacing: .2em;
    opacity: 1;
  }

  .scroll-painting .dawn-coordinates__copy h2,
  .scroll-painting .dawn-coordinates__title {
    max-width: 10em;
    color: inherit;
    font-size: clamp(2.05rem, 9.5vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.045em;
  }

  .scroll-painting .dawn-coordinates.is-awake .dawn-coordinates__copy h2 em {
    color: rgb(241 200 149 / .96);
  }

  .scroll-painting .dawn-coordinates__line,
  .scroll-painting .dawn-coordinates__note {
    max-width: 25em;
    margin-top: 14px;
    color: rgb(242 233 218 / .82);
    font-size: clamp(.75rem, 3.3vw, .9rem);
    line-height: 1.56;
    opacity: 1;
  }

  .scroll-painting .dawn-coordinates__route {
    display: none;
  }

  .scroll-painting .dawn-coordinates__points {
    z-index: 3;
    top: 55%;
    right: 20px;
    bottom: max(28px, env(safe-area-inset-bottom));
    left: 20px;
    display: grid;
    box-sizing: border-box;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 12px;
    border: 1px solid rgb(238 217 186 / .15);
    border-radius: 18px;
    background: linear-gradient(118deg, rgb(3 10 16 / .68), rgb(8 18 24 / .46));
    box-shadow: 0 18px 52px rgb(2 8 13 / .2);
    backdrop-filter: blur(5px);
  }

  .scroll-painting .dawn-coordinates__points > .dawn-coordinate,
  .scroll-painting .dawn-coordinates__points > .dawn-coordinates__coordinate {
    position: relative;
    inset: auto;
    z-index: 1;
    display: grid;
    min-width: 0;
    margin: 0;
    padding: 6px 4px;
    grid-template-columns: 11px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 8px;
    row-gap: 2px;
    color: rgb(244 235 220 / .84);
    opacity: .7;
    transform: translateY(5px);
    text-shadow: 0 2px 12px rgb(0 0 0 / .5);
  }

  .scroll-painting .dawn-coordinates__points > .dawn-coordinate::before,
  .scroll-painting .dawn-coordinates__points > .dawn-coordinates__coordinate::before {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 6px;
    height: 6px;
    margin: 0;
  }

  .scroll-painting .dawn-coordinates__points > .dawn-coordinate strong,
  .scroll-painting .dawn-coordinates__points > .dawn-coordinate time,
  .scroll-painting .dawn-coordinates__points > .dawn-coordinate b,
  .scroll-painting .dawn-coordinates__points > .dawn-coordinates__coordinate strong {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-size: clamp(.92rem, 4vw, 1.08rem);
    line-height: 1.08;
  }

  .scroll-painting .dawn-coordinates__points > .dawn-coordinate small,
  .scroll-painting .dawn-coordinates__points > .dawn-coordinate > span,
  .scroll-painting .dawn-coordinates__points > .dawn-coordinates__coordinate small {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    font-size: .53rem;
    line-height: 1.2;
    letter-spacing: .075em;
  }

  .scroll-painting .dawn-coordinates__points > .dawn-coordinate.is-lit,
  .scroll-painting .dawn-coordinates__points > .dawn-coordinates__coordinate.is-lit,
  .scroll-painting .dawn-coordinates.is-awake .dawn-coordinate.is-lit {
    color: rgb(252 241 222 / .98);
    opacity: 1;
    transform: translateY(0);
  }

  /* On a phone, headings start nearly sharp and finish the focus pull in
     360ms. Motion can continue after that without keeping words blurred. */
  .scroll-painting .reveal:not(.is-visible) > .display-title,
  .scroll-painting .reveal:not(.is-visible) > h2,
  .scroll-painting .reveal:not(.is-visible) > h3,
  .scroll-painting .reveal:not(.is-visible) h2,
  .scroll-painting .reveal:not(.is-visible) h3 {
    filter: blur(2px);
  }

  .scroll-painting .reveal.is-visible > .display-title,
  .scroll-painting .reveal.is-visible > h2,
  .scroll-painting .reveal.is-visible > h3,
  .scroll-painting .reveal.is-visible h2,
  .scroll-painting .reveal.is-visible h3 {
    transition:
      transform 520ms cubic-bezier(.16, 1, .3, 1),
      filter 360ms ease,
      letter-spacing 360ms ease;
  }

  .scroll-painting .archive-door.reveal.is-visible h2 {
    transition:
      filter 360ms ease,
      transform 480ms cubic-bezier(.16, 1, .3, 1);
  }
}

@media (max-width: 600px) and (max-height: 700px) and (orientation: portrait) {
  /* 05:00 must open as one stable shot.  Suppress the outgoing chapter
     invitation as well as the persistent controls while the memory is open. */
  body.scroll-painting:has(#fiveAmMemory.is-open) .site-chrome,
  body.scroll-painting:has(#fiveAmMemory.is-open) .chapter-nav,
  body.scroll-painting:has(#fiveAmMemory.is-open) .memory-map-toggle,
  body.scroll-painting:has(#fiveAmMemory.is-open) .scene-ritual-hint,
  body.scroll-painting:has(#fiveAmMemory.is-open) .chapter-bridge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .scroll-painting .five-am-memory.five-am-interlude,
  .scroll-painting .five-am-interlude {
    box-sizing: border-box;
    height: 100svh;
    min-height: 100svh;
    margin-bottom: 20px;
    padding:
      max(28px, env(safe-area-inset-top))
      20px
      max(24px, env(safe-area-inset-bottom));
  }

  .scroll-painting .five-am-interlude > .five-am-memory {
    display: grid;
    width: 100%;
    height: 100%;
    margin: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    gap: 12px;
  }

  .scroll-painting .five-am-interlude .five-am-memory__clock {
    grid-column: 1;
    grid-row: 1;
    gap: 7px;
  }

  .scroll-painting .five-am-interlude .five-am-memory__clock time {
    font-size: clamp(3.45rem, 18vw, 4rem);
    line-height: .82;
  }

  .scroll-painting .five-am-interlude .five-am-memory__clock > span {
    display: grid;
    gap: 4px;
  }

  .scroll-painting .five-am-interlude .five-am-memory__clock small {
    font-size: .56rem;
    letter-spacing: .2em;
  }

  .scroll-painting .five-am-interlude .five-am-memory__clock strong {
    font-size: .88rem;
    line-height: 1.52;
  }

  .scroll-painting .five-am-interlude .five-am-memory__words {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .scroll-painting .five-am-interlude .five-am-memory__words::before {
    width: 40px;
    margin-bottom: 9px;
  }

  .scroll-painting .five-am-interlude .five-am-memory__words p {
    max-width: none;
    font-size: clamp(.92rem, 4.7vw, 1.02rem);
    line-height: 1.62;
    letter-spacing: .01em;
  }

  .scroll-painting .five-am-interlude .five-am-memory__words footer {
    margin-top: 10px;
    padding-top: 8px;
    font-size: .68rem;
    line-height: 1.55;
  }

  .scroll-painting .five-am-interlude .five-am-memory__hint {
    right: 20px;
    bottom: 12px;
    left: 20px;
    font-size: .58rem;
  }

  .scroll-painting .five-am-interlude .five-am-memory.is-open .five-am-memory__hint {
    visibility: hidden;
  }

  /* Dawn is recomposed into two explicit planes: copy above, six coordinates
     below.  The warm exposure is held back until the final third. */
  .scroll-painting .dawn-coordinates {
    box-sizing: border-box;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    margin-block: 36px 48px;
    padding:
      max(24px, env(safe-area-inset-top))
      20px
      max(20px, env(safe-area-inset-bottom));
    grid-template-rows: 50% 50%;
    align-items: stretch;
    color: rgb(247 239 225 / .94);
    background:
      radial-gradient(circle at 78% 18%, rgb(238 207 160 / .1), transparent 12%),
      linear-gradient(180deg, #06101a 0%, #132532 54%, #30434a 100%);
  }

  .scroll-painting .dawn-coordinates.is-awake {
    color: rgb(247 239 225 / .94);
    background:
      radial-gradient(circle at 78% 18%, rgb(242 208 158 / .15), transparent 14%),
      linear-gradient(180deg, #101f2b 0%, #293f49 56%, #505957 100%);
  }

  .scroll-painting .dawn-coordinates::after {
    background:
      radial-gradient(ellipse 82% 48% at 62% 104%, rgb(226 175 129 / .24), transparent 72%),
      linear-gradient(180deg, transparent 58%, rgb(179 138 108 / .1) 100%);
    opacity: clamp(0, calc((var(--dawn-progress) - .7) * 1.7), .42);
    transition: opacity 1.8s ease;
  }

  .scroll-painting .dawn-coordinates__copy {
    z-index: 4;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 13px 14px 14px;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgb(229 196 151 / .24);
    border-radius: 0 18px 18px 0;
    color: rgb(249 241 228 / .96);
    background:
      linear-gradient(90deg, rgb(3 10 17 / .78), rgb(5 13 20 / .52) 78%, transparent);
    box-shadow: -20px 0 46px rgb(2 8 14 / .2);
  }

  .scroll-painting .dawn-coordinates__copy .eyebrow {
    margin: 0 0 7px;
    font-size: .54rem;
    letter-spacing: .2em;
    opacity: .74;
  }

  .scroll-painting .dawn-coordinates__copy h2,
  .scroll-painting .dawn-coordinates__title {
    max-width: 10em;
    font-size: clamp(1.92rem, 9.6vw, 2.2rem);
    line-height: 1.06;
    letter-spacing: -.045em;
  }

  .scroll-painting .dawn-coordinates.is-awake .dawn-coordinates__copy h2 em {
    color: rgb(239 197 141 / .94);
  }

  .scroll-painting .dawn-coordinates__line,
  .scroll-painting .dawn-coordinates__note {
    max-width: 24em;
    margin-top: 9px;
    color: rgb(242 233 218 / .78);
    font-size: .72rem;
    line-height: 1.52;
    opacity: 1;
  }

  .scroll-painting .dawn-coordinates__route {
    display: none;
  }

  .scroll-painting .dawn-coordinates__points {
    z-index: 3;
    top: 52%;
    right: 20px;
    bottom: max(20px, env(safe-area-inset-bottom));
    left: 20px;
    display: grid;
    box-sizing: border-box;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 7px 12px;
    padding: 10px;
    border: 1px solid rgb(238 217 186 / .12);
    border-radius: 16px;
    background:
      linear-gradient(118deg, rgb(4 11 17 / .7), rgb(8 18 24 / .46));
    box-shadow: 0 20px 56px rgb(2 8 13 / .16);
    backdrop-filter: blur(8px);
  }

  .scroll-painting .dawn-coordinates__points > .dawn-coordinate,
  .scroll-painting .dawn-coordinates__points > .dawn-coordinates__coordinate {
    position: relative;
    inset: auto;
    z-index: 1;
    display: grid;
    min-width: 0;
    margin: 0;
    padding: 5px 4px;
    grid-template-columns: 10px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 7px;
    row-gap: 1px;
    color: rgb(244 235 220 / .84);
    opacity: .68;
    transform: translateY(5px);
  }

  .scroll-painting .dawn-coordinates__points > .dawn-coordinate::before,
  .scroll-painting .dawn-coordinates__points > .dawn-coordinates__coordinate::before {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 6px;
    height: 6px;
    margin: 0;
  }

  .scroll-painting .dawn-coordinates__points > .dawn-coordinate strong,
  .scroll-painting .dawn-coordinates__points > .dawn-coordinate time,
  .scroll-painting .dawn-coordinates__points > .dawn-coordinate b,
  .scroll-painting .dawn-coordinates__points > .dawn-coordinates__coordinate strong {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-size: .9rem;
    line-height: 1.08;
  }

  .scroll-painting .dawn-coordinates__points > .dawn-coordinate small,
  .scroll-painting .dawn-coordinates__points > .dawn-coordinate > span,
  .scroll-painting .dawn-coordinates__points > .dawn-coordinates__coordinate small {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    font-size: .52rem;
    line-height: 1.2;
    letter-spacing: .08em;
  }

  .scroll-painting .dawn-coordinates__points > .dawn-coordinate.is-lit,
  .scroll-painting .dawn-coordinates__points > .dawn-coordinates__coordinate.is-lit,
  .scroll-painting .dawn-coordinates.is-awake .dawn-coordinate.is-lit {
    color: rgb(250 238 218 / .94);
    opacity: 1;
    transform: translateY(0);
  }
}