html, body { margin: 0; padding: 0; background: #3778B5; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #FF2E9A; text-decoration: none; }
a:hover { color: #1D3D64; }
input, button, textarea, select { font-family: 'Space Mono', ui-monospace, monospace; }
input:focus { outline: 3px solid #FF2E9A; outline-offset: 2px; }

/* printing the clearance report: only the white pages, one per sheet */
@media print {
  body { background: #fff; }
  body * { visibility: hidden; }
  .report-page, .report-page * { visibility: visible; }
  .report-page { box-shadow: none !important; margin: 0 auto !important; page-break-after: always; }
  .launch-ribbon, .appnav { display: none !important; }
}

/* oblique launch ribbon pinned across the top-right corner */
.launch-ribbon {
  position: fixed;
  top: 79px;
  right: -70px;
  width: 300px;
  transform: rotate(45deg);
  z-index: 100;
  pointer-events: none;
  background: #FFD535;
  color: #1D3D64;
  border: 2px solid #1D3D64;
  font: 700 11px/1 'Space Mono', ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 0;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .25);
}

/* app shell: phone column by default, wide layout on desktop */
.shell, .appnav { width: min(100%, 560px); }
@media (min-width: 900px) {
  .shell, .appnav { width: min(100%, 1000px); }
  .cols2 { display: grid; gap: 10px; grid-template-columns: 1fr 1fr !important; }
  .cols2 > * { margin-bottom: 0 !important; }
  .cols3 { grid-template-columns: repeat(3, 1fr) !important; }
  .login-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: start; }
  .narrow { max-width: 640px; margin: 0 auto; }
  .settings-cols { columns: 2; column-gap: 20px; }
  .settings-cols > div { break-inside: avoid; margin-bottom: 18px; }
}

/* hero collage: clicked piece lifts to the front with a deeper shadow */
img[data-lift] { transition: filter .35s ease; }
img.front-item { filter: drop-shadow(16px 24px 20px rgba(0,0,0,.42)) !important; }

/* extra hero objects: desktop only, until more are authored */
.dsk { display: none; }
@media (min-width: 900px) { .dsk { display: block; } }

@keyframes fa { 0%,100% { transform: translate3d(0,0,0) rotate(var(--r,0deg)); } 50% { transform: translate3d(6px,-22px,0) rotate(calc(var(--r,0deg) + 6deg)); } }
@keyframes fb { 0%,100% { transform: translate3d(0,0,0) rotate(var(--r,0deg)); } 50% { transform: translate3d(-14px,-16px,0) rotate(calc(var(--r,0deg) - 8deg)); } }
@keyframes fc { 0%,100% { transform: translate3d(0,-10px,0) rotate(var(--r,0deg)); } 50% { transform: translate3d(10px,12px,0) rotate(calc(var(--r,0deg) + 4deg)); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes ladyFloat { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-14px); } }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes barber { to { background-position: 64px 0; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }