/* Phone banner, greeting and page-two refresh; approved previous artwork retained. */
@media (max-width: 640px), (min-width: 641px) and (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
  header { position: relative; top: auto; }
  .hero { top: 0; }
  .work { scroll-margin-top: 0; }
  .work .print {
    color: #fff; border: 1px solid rgb(255 255 255 / 25%); border-radius: 16px;
    background: radial-gradient(ellipse at 0% 0%, rgb(255 255 255 / 15%), transparent 65%),
      linear-gradient(145deg, rgb(255 255 255 / 11%), rgb(255 255 255 / 3%));
    box-shadow: 0 18px 32px rgb(17 21 14 / 27%), inset 0 1px 1px rgb(255 255 255 / 50%);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .work .print img { border-radius: 8px; }
  .work .print .project { color: rgb(255 255 255 / 88%); font-weight: 400; text-shadow: none; line-height: 1.2; }
  .work .print .project::before { content: 'Pictured: '; }
  .work .print h3 { color: #fff; font-weight: 400; font-size: 12px; line-height: 1.2; letter-spacing: .005em; text-shadow: none; }
  .work .number:not(.matched) { color: #ff8a7a; font-size: 26px; font-weight: 600; letter-spacing: -.03em; min-height: 44px; text-shadow: 0 3px 8px #0003; }
  .work .number:not(.matched) small { font-size: 10px; font-weight: 600; margin-top: 4px; }
  .work .number.matched { font-size: 14px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .work .simplify-line { display: grid; grid-template-columns: auto 1fr; justify-items: start; column-gap: .22em; row-gap: .3em; width: 100%; margin: 26px 0 22px; }
  .work .simplify-changing, .work .simplify-play { grid-column: 1 / -1; }
  .work .simplify-changing { grid-row: 2; }
  .work .simplify-caret { width: .03em; height: .78em; opacity: .5; }
  .work .board-reset { top: 22px; }
  .work .sound-enable { top: 24px; }
  .work.board-complete .tablet-object { transition: left 2400ms cubic-bezier(.45,0,.2,1) 900ms, top 2400ms cubic-bezier(.45,0,.2,1) 900ms, transform 1050ms cubic-bezier(.2,.8,.2,1); }
  .work.board-complete .tablet-object.dragging, .work.board-complete.film-settled .tablet-object { transition: none; }
  .work .coffee-invite { display: flex; position: absolute; z-index: 3; visibility: hidden; gap: 8px; flex-direction: column; align-items: flex-start; --coffee-art-height: 145px; }
  .work.board-complete .coffee-invite { visibility: visible; }
  .work .coffee-words { gap: 4px; }
  .work .coffee-prompt { font-size: 26px; min-height: 26px; }
  .work .coffee-arrow { width: 16px; height: 26px; }
}
@media (max-width: 640px) {
  header { height: 52px; padding: 0 5%; }
  .hero { height: clamp(650px, calc(100svh - 52px), 850px); }
  .work.board-complete .studio-board { height: var(--mobile-final-film-bottom, 800px); }
  .work.board-complete .simplify-line { left: 2%; width: 98%; margin: 15px 0 22px; }
  .work .simplify-line { font-size: clamp(44px, 11.75vw, 51px); }
  .work.board-complete .tablet-object { width: 46%; }
  .work.board-complete .print img,
  .work.board-complete .print[data-id="elevated"] img,
  .work.board-complete .print[data-id="amenity"] img { height: 135px; }
  .work.board-complete .dealer-face { height: 100%; }
}
@media (min-width: 641px) and (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
  .work { height: auto; overflow: visible; }
  .work-intro .statement { width: min(590px, 80%); }
  .work.board-complete .studio-board { height: var(--mobile-final-film-bottom, 720px); }
  .work.board-complete .tablet-object { width: 29%; }
  .work .coffee-invite { flex-direction: row; align-items: center; gap: 14px; --coffee-art-height: 175px; }
  .work .coffee-prompt { font-size: 32px; min-height: 32px; }
  .work .simplify-line { font-size: clamp(60px, 9vw, 76px); }
}
@media (prefers-reduced-motion: reduce) {
  html.mobile-portrait-board .work.board-complete .tablet-object,
  html.mobile-landscape-board .work.board-complete .tablet-object { transition: none; }
}
@media (min-width: 641px) and (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
  .work.board-complete .print img,
  .work.board-complete .print[data-id="elevated"] img,
  .work.board-complete .print[data-id="amenity"] img { height: 150px; }
}
@media (max-width: 640px), (min-width: 641px) and (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
  .work .simplify-play { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; margin: 0; }
}

/* Match the approved darker greeting, with a tap counterpart to desktop hover. */
@media (max-width: 640px), (min-width: 641px) and (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
  .hero h1 { font-size: 20px; font-weight: 500; color: #171815; text-shadow: none; }
  .hero-name { display: inline-block; cursor: pointer; transition: color .22s ease, transform .22s ease; }
  .hero-name.is-selected { color: #234b74; transform: translateX(7px); }
  .hero-name:focus-visible { outline: 1px solid #234b74; outline-offset: 4px; border-radius: 2px; }
}
@media (min-width: 641px) and (max-width: 720px) and (max-height: 600px) and (orientation: landscape) {
  .hero h1 { left: calc(36% + 6px); font-size: 16.2px; top: calc(8.13802083vw - 12.15px); }
}
@media (min-width: 721px) and (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
  .hero h1 { left: calc(46% + 6px); font-size: 16.2px; top: calc(6.7204301vw - 12.15px); }
}
@media (prefers-reduced-motion: reduce) {
  html.mobile-portrait-board .hero-name,
  html.mobile-landscape-board .hero-name { transition: none; }
}

@media (max-width: 640px) {
  .work.board-complete .coffee-invite {
    --coffee-art-height: clamp(170px, 44vw, 185px);
    flex-direction: row; align-items: center; justify-content: center; gap: 2px;
  }
  .work.board-complete .coffee-prompt { font-size: 21px; min-height: 21px; }
  .work.board-complete .coffee-arrow { height: 22px; width: 14px; }
}

@media (max-width: 640px), (min-width: 641px) and (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
  .work .board-drag-note-split { display: none; }
}

@media (min-width: 641px) and (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
  /* Give the single Duke cue a clear lane beside the introductory handwriting. */
  .work:not(.board-complete) .annotation-original { width: min(580px, 60vw); margin-left: 30%; }
}

@media (min-width: 641px) and (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
  .work.board-complete .simplify-line { left: 3%; width: 62%; margin: 15px 0 22px; }
  .work.board-complete .coffee-invite {
    --coffee-art-height: clamp(225px, 60svh, 258px);
    flex-direction: column; align-items: center; gap: 8px;
  }
  .work.board-complete .coffee-prompt { font-size: 28px; min-height: 28px; }
  .work.board-complete .coffee-words { align-items: center; }
  .work.board-complete .coffee-arrow { height: 28px; width: 18px; }
}

/* The first greeting line follows the portrait's eye line at the existing crop.
   Source eye height is about125px on the1024px-high artwork. */
@media (max-width: 640px) {
  .hero h1 { top: calc(clamp(650px, calc(100svh - 52px), 850px) * .1220703125 - 13.5px); }
}
/* Hold the last screen of page two while the cream calendar slides over it. */
@media (max-width: 640px), (min-width: 641px) and (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
 .work { position: sticky; top: var(--work-freeze-top, 0px); z-index: 2; }
 .coffee { position: relative; z-index: 3; }
 .portrait-panel-hold { display: block; height: 18svh; pointer-events: none; }
}

/* Phone landscape: shrink introductory handwriting around its arrow tip,
   keeping that tip aimed at the StruXure dealership card. */
@media (min-width:641px) and (max-width:1000px) and (max-height:540px) and (orientation:landscape) {
  .work .annotation-original > image {
    transform: matrix(.8, 0, 0, .8, 192.4, 70.8);
    transform-origin: 0 0;
    transform-box: view-box;
  }
}