/* Scene 2, the agency side: Mumbai, 07:12, what needs a person today. Light ground, ink type. */

.sc--morning { color: var(--ink-w); }
.motion .sc--morning { height: 100svh; min-height: 560px; }
.motion .sc--morning .sc__f { position: absolute; inset: 0; }
.sc--morning .sc__f { min-height: max(100svh, 640px); }

.m-kick, .m-lab, .inbox__h, .inbox__k, .inbox__m {
  font-family: var(--f-mono); font-size: var(--t-lab); letter-spacing: .12em; text-transform: uppercase;
}
.m-kick { position: absolute; left: var(--gut); top: clamp(92px, 14svh, 150px); color: var(--ink-2); }
.m-clock {
  position: absolute; left: calc(var(--gut) - .04em); top: calc(clamp(92px, 14svh, 150px) + clamp(26px, 3svh, 40px));
  font-size: var(--t-disp); font-weight: 470; font-stretch: 125%; line-height: .8; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums; color: var(--ink-w); white-space: nowrap;
}
.m-clock__t { display: inline-block; }

.inbox {
  position: absolute; right: var(--gut); bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(104px, 14svh, 160px));
  width: min(46vw, 680px);
}
.inbox__h { display: flex; justify-content: space-between; padding-bottom: 14px; color: #8a4a12; }
.inbox__l li {
  position: relative; display: grid; grid-template-columns: 7.4em minmax(0, 1fr) auto; align-items: baseline; gap: 18px;
  padding: 14px 0;
}
.inbox__l li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hair-ink); transform-origin: 0 50%; transform: scaleX(var(--rule, 1)); }
.inbox__l li:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hair-ink); transform-origin: 0 50%; transform: scaleX(var(--rule, 1)); }
.inbox__k { color: var(--ink-3); }
.inbox__v { font-size: clamp(15px, 1.12vw, 19px); font-weight: 500; font-stretch: 104%; line-height: 1.3; letter-spacing: -.005em; }
.inbox__m { color: var(--ink-3); text-align: right; white-space: nowrap; font-size: calc(var(--t-lab) * .94); }
.inbox__l li:first-child .inbox__v::before { content: ""; display: inline-block; width: .42em; height: .42em; margin-right: .55em; border-radius: 50%; background: #b8431f; vertical-align: .12em; }

.m-cap { position: absolute; left: var(--gut); bottom: calc(var(--gut) + 3.6em); width: min(23vw, 300px); font-size: var(--t-cap); line-height: 1.42; font-stretch: 108%; }
.m-cap::before { content: ""; display: block; width: 28px; height: 1px; background: var(--hair-ink); margin-bottom: 1.2em; }
.m-cap .cap__k { color: #8a4a12; }
.m-cap .cap__t { color: var(--ink-2); }
.m-lab { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(18px, 2.4vw, 34px)); line-height: 1.5; color: var(--ink-3); }
.m-lab--l { left: var(--gut); }
.m-lab--l span + span::before { content: "· "; }
.m-lab--r { right: var(--gut); text-align: right; }

.m-say {
  position: absolute; left: var(--gut); right: var(--gut); top: clamp(110px, 17svh, 200px);
  font-size: var(--t-say); font-weight: 520; font-stretch: 125%; line-height: .98; letter-spacing: -.035em; color: var(--ink-w);
  text-wrap: balance;
}
.m-say__a { color: rgba(29, 21, 17, .42); }
.m-say .word { display: inline-block; }

/* the light that makes ink readable over the harbour */
.cam__veil--morning, .sc--morning .m-a .bg__veil {
  background:
    radial-gradient(70% 78% at 86% 84%, rgba(248, 239, 226, .9) 0%, rgba(248, 239, 226, .6) 46%, rgba(248, 239, 226, 0) 78%),
    radial-gradient(60% 50% at 12% 92%, rgba(248, 239, 226, .72) 0%, rgba(248, 239, 226, 0) 70%),
    linear-gradient(180deg, rgba(248, 236, 220, .18), rgba(248, 236, 220, 0) 30%);
}
.sc--morning .m-b .bg__veil { background: rgba(247, 238, 226, .5); }
.sc--morning .m-a .bg img { filter: blur(5px); transform: scale(1.03); }
.sc--morning .m-b .bg img { filter: saturate(1.05); }

@media (orientation: portrait), (max-width: 760px) {
  .inbox { left: var(--gut); right: var(--gut); width: auto; }
  .inbox__l li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 11px 0; }
  .inbox__m { display: none; }
  .m-cap, .m-lab--r { display: none; }
  .m-lab--l { right: var(--gut); bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); }
  .m-lab--l span { display: block; }
  .m-lab--l span + span::before { content: none; }
  .m-clock { font-size: clamp(96px, 27vw, 210px); }
  .cam__veil--morning, .sc--morning .m-a .bg__veil {
    background:
      linear-gradient(180deg, rgba(248, 236, 220, .1) 0%, rgba(248, 239, 226, 0) 26%, rgba(248, 239, 226, .62) 46%, rgba(248, 239, 226, .9) 70%, rgba(248, 239, 226, .92) 100%);
  }
}
@media (orientation: portrait) and (max-width: 760px) {
  .inbox { bottom: calc(env(safe-area-inset-bottom, 0px) + 132px); }
  .m-lab--l { display: none; }
}
@media (max-height: 700px) and (orientation: landscape) {
  .m-cap { display: none; }
}