/* Scene 4, your name on everything: a still life on cream (the Jesko cream section),
   "Your name" and "on everything." on either side as Jesko's "Fly in ... Luxury", the still life rising between;
   the agency's name re-brands every object live. */

.sc--brand {
  position: relative; display: grid; color: var(--ink-w); --mark-ink: var(--ink-w);
  /* one composed frame: the still life is sized from the screen's height so headline, still, field and spec all hold */
  --still: min(40vw, 700px, calc((100svh - 300px) / 1.02));
  grid-template-columns: minmax(0, 1fr) var(--still) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(28px, 3.4vw, 64px);
  min-height: max(100svh, 640px);
  padding: clamp(84px, 11svh, 140px) var(--gut) clamp(96px, 12svh, 140px);
}
.motion .sc--brand { height: max(100svh, 640px); }
.b-hl { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 1em; position: relative; z-index: 2; }
.b-hl__a, .b-hl__b { display: block; font-size: clamp(42px, 5.3vw, 116px); font-weight: 520; font-stretch: 125%; line-height: .9; letter-spacing: -.04em; white-space: nowrap; }
.b-hl__b { text-align: right; }

/* ---------- the field ---------- */
.b-name { grid-column: 1; grid-row: 2; align-self: start; margin-top: clamp(26px, 5svh, 64px); max-width: 420px; }
.b-name .cap__k { display: block; color: #8a4a12; }
.b-name__field { position: relative; display: block; margin-top: .35em; }
.b-name__in {
  display: block; width: 100%; margin: 0; padding: .1em 0 .22em; border: 0; border-bottom: 1px solid var(--hair-ink); border-radius: 0;
  background: transparent; color: var(--ink-w); font: italic 400 clamp(26px, 2.3vw, 40px)/1.15 var(--f-agency); letter-spacing: 0;
  outline: none; caret-color: #b8431f; transition: border-color .4s;
}
/* the resting caret: it says the name is a field without a word of instruction */
.b-name__caret {
  position: absolute; left: calc(var(--x, 0px) + 3px); top: 50%; width: 2px; height: var(--h, 1.1em); margin-top: calc(var(--h, 1.1em) / -2 - .04em);
  background: #b8431f; pointer-events: none; animation: b-caret 1.06s steps(1, end) infinite;
}
@keyframes b-caret { 50% { opacity: 0; } }
.b-typing .b-name__caret { animation: none; }
.b-name__field:focus-within .b-name__caret { display: none; }
.rm .b-name__caret { animation: none; }
.b-name__in:hover { border-bottom-color: var(--ink-3); }
.b-name__in:focus-visible { border-bottom-color: var(--ink-w); box-shadow: 0 1px 0 var(--ink-w); }
.b-name__url { margin-top: .9em; font-family: var(--f-mono); font-size: var(--t-lab); letter-spacing: .06em; color: var(--ink-3); word-break: break-all; }
.b-name__url span { color: var(--ink-2); }

/* ---------- the spec, Jesko's 650ER table in our words ---------- */
.b-spec { grid-column: 3; grid-row: 2; align-self: center; margin: 0; }
.b-spec div { padding: 14px 0 15px; border-top: 1px solid var(--hair-ink); }
.b-spec div:last-child { border-bottom: 1px solid var(--hair-ink); }
.b-spec dt { font-size: clamp(15px, 1.1vw, 19px); font-weight: 520; font-stretch: 108%; letter-spacing: -.01em; }
.b-spec dd { margin: .35em 0 0; font-family: var(--f-mono); font-size: var(--t-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.b-spec div:last-child dd { color: #8a4a12; }
.b-foot { grid-column: 1; grid-row: 2; align-self: end; max-width: 26ch; font-size: var(--t-cap); font-stretch: 108%; line-height: 1.42; color: var(--ink-2); }
.b-foot::before { content: ""; display: block; width: 28px; height: 1px; margin-bottom: 1.2em; background: var(--hair-ink); }
.b-foot .o42 { --o42-ink: var(--ink-w); font-weight: 640; font-stretch: 125%; }

/* ---------- the still life ---------- */
.still { grid-column: 2; grid-row: 2; align-self: center; margin-top: clamp(8px, 2svh, 36px); position: relative; width: 100%; aspect-ratio: 1 / .98; container-type: inline-size; z-index: 1; }

/* the proposal, its cover */
.still__deck {
  position: absolute; left: 0; top: 10cqw; width: 66cqw; aspect-ratio: 16 / 10.4; overflow: hidden; border-radius: 2cqw; background: #12161f;
  transform: rotate(-3deg); box-shadow: 0 3cqw 7cqw rgba(70, 45, 25, .28), 0 .6cqw 1.4cqw rgba(70, 45, 25, .2);
}
.still__deck img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.still__deck::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 20, .5) 0%, rgba(10, 12, 20, 0) 32%, rgba(10, 12, 20, .1) 52%, rgba(10, 12, 20, .8) 100%); }
.still__deck-ag { position: absolute; z-index: 1; left: 3.6cqw; top: 3.2cqw; color: #f3ebdf; font-size: 1.45cqw; }
.still__deck-x { position: absolute; z-index: 1; left: 3.6cqw; right: 20cqw; bottom: 3.6cqw; display: grid; gap: 1cqw; color: #f6efe3; }
.still__deck-k { font-size: 1.5cqw; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; opacity: .82; }
.still__deck-t { font: italic 400 5.6cqw/.95 var(--f-agency); letter-spacing: -.015em; }

/* the invoice, on paper */
.still__inv {
  position: absolute; right: -5cqw; top: 30cqw; width: 42cqw; padding: 3.4cqw 3.4cqw 3cqw; border-radius: .8cqw; background: #fffaf2; color: #1b1a1d;
  transform: rotate(3.5deg); box-shadow: 0 3cqw 7cqw rgba(70, 45, 25, .24), 0 .5cqw 1.2cqw rgba(70, 45, 25, .16);
  font-size: 1.75cqw;
}
.still__inv-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 2cqw; border-bottom: 1px solid rgba(27, 26, 29, .14); font: 400 2.5cqw/1 var(--f-agency); }
.still__inv-top i { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: #16181f; color: #f3ebdf; font: italic 400 2cqw/1 var(--f-agency); }
.still__inv-k { margin-top: 2.4cqw; font-family: var(--f-mono); font-size: 1.4cqw; letter-spacing: .14em; text-transform: uppercase; color: rgba(27, 26, 29, .55); }
.still__inv-t { margin-top: .8cqw; font: 400 3.6cqw/1.05 var(--f-agency); }
.still__inv-l { margin-top: 2cqw; }
.still__inv-l li { display: flex; justify-content: space-between; gap: 2cqw; padding: 1.1cqw 0; border-top: 1px solid rgba(27, 26, 29, .08); }
.still__inv-l span { color: rgba(27, 26, 29, .64); }
.still__inv-l b, .still__inv-tot b { font-weight: 560; font-variant-numeric: tabular-nums; }
.still__inv-tot { display: flex; justify-content: space-between; margin-top: .6cqw; padding-top: 1.4cqw; border-top: 1.5px solid #1b1a1d; font-weight: 600; }
.still__inv-upi { display: flex; align-items: center; gap: 2cqw; margin-top: 2.4cqw; font-size: 1.6cqw; color: rgba(27, 26, 29, .7); }
.still__inv-vpa { font-family: var(--f-mono); color: #1b1a1d; }
.qr {
  flex: none; width: 8.4cqw; height: 8.4cqw; position: relative; background-color: #fff;
  background-image:
    repeating-conic-gradient(#1b1a1d 0 25%, transparent 0 50%),
    repeating-conic-gradient(transparent 0 25%, #1b1a1d 0 50%),
    repeating-linear-gradient(90deg, #1b1a1d 0 1px, transparent 1px 3px);
  background-size: 1.4cqw 1.4cqw, 2.1cqw 2.1cqw, 100% 100%;
  background-blend-mode: normal, difference, normal;
  outline: .6cqw solid #fff; box-shadow: 0 0 0 calc(.6cqw + 1px) rgba(27, 26, 29, .14);
}
.qr::before, .qr::after { content: ""; position: absolute; width: 2.6cqw; height: 2.6cqw; background: #fff; border: .55cqw solid #1b1a1d; box-shadow: inset 0 0 0 .5cqw #fff, inset 0 0 0 2cqw #1b1a1d; }
.qr::before { left: 0; top: 0; }
.qr::after { right: 0; top: 0; }

/* the trip link, on a phone */
.still__ph {
  position: absolute; left: 33cqw; top: 22cqw; width: 33cqw; aspect-ratio: .4865; z-index: 2;
  border-radius: 5.2cqw; padding: 1.5cqw; background: #0a0a0b;
  box-shadow:
    inset 0 0 0 .4cqw #8d8782, inset 0 0 0 .55cqw #2a2826,
    0 4cqw 8cqw -1cqw rgba(60, 38, 20, .42), 0 1.2cqw 2.4cqw rgba(60, 38, 20, .26);
}
.still__scr { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 3.8cqw; color: #f3ebdf; }
.still__scr > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.still__scr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 20, 34, .45) 0%, rgba(16, 20, 34, 0) 22%, rgba(16, 20, 34, 0) 42%, rgba(14, 17, 29, .7) 70%, rgba(12, 14, 24, .92) 100%); }
.still__url { position: absolute; z-index: 1; left: 50%; top: 2.3cqw; translate: -50% 0; display: inline-flex; align-items: center; gap: .8cqw; max-width: 90%; padding: .7cqw 1.8cqw; border-radius: 99px; background: rgba(20, 22, 30, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 1.32cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still__url svg { flex: none; width: 1.2cqw; height: auto; }
.still__url span { overflow: hidden; text-overflow: ellipsis; }
.still__ag span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.still__ag { position: absolute; z-index: 1; left: 2.6cqw; right: 2.6cqw; top: 7cqw; display: flex; align-items: center; gap: 1.2cqw; font-size: 1.25cqw; font-weight: 640; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.still__ag i { display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: #16181f; box-shadow: 0 0 0 .15cqw rgba(243, 235, 223, .2); font: italic 400 1.6cqw/1 var(--f-agency); letter-spacing: 0; }
.still__body { position: absolute; z-index: 1; left: 2.6cqw; right: 2.6cqw; bottom: 4cqw; display: grid; justify-items: start; }
.still__chip { display: inline-flex; align-items: center; gap: .8cqw; padding: .7cqw 1.4cqw .7cqw 1.1cqw; border-radius: 99px; background: #efe6d8; color: #1b1a1d; font-size: 1.15cqw; font-weight: 560; }
.still__chip i { width: .9cqw; height: .9cqw; border-radius: 50%; background: #e4a03b; }
.still__t { margin-top: 1.8cqw; font: italic 400 4.3cqw/.94 var(--f-agency); letter-spacing: -.02em; }
.still__s { margin-top: 1.1cqw; font-size: 1.2cqw; color: rgba(243, 235, 223, .8); }

/* name changes land softly */
[data-agency], [data-mono], [data-domain] { transition: opacity .25s; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .sc--brand, .motion .sc--brand { display: block; height: auto; padding: clamp(96px, 13svh, 130px) var(--gut) 120px; min-height: 0; }
  .b-hl { display: block; }
  .b-hl__a, .b-hl__b { font-size: clamp(40px, 11.6vw, 84px); }
  .b-name { max-width: none; margin-top: 22px; }
  .still { width: min(100%, 520px); margin: 40px auto 24px; }
  .still__inv { right: -1cqw; }
  .b-hl__b { text-align: right; margin-top: 10px; }
  .b-spec { margin-top: 30px; }
  .b-foot { margin-top: 30px; }
}