/* the opened message (A + A+B) */
html.locked { overflow: hidden; }
.letter { position: fixed; inset: 0; z-index: 40; }
.letter[hidden] { display: none; }
.l-scrim { position: absolute; inset: 0; background: rgba(18,17,16,.5); opacity: 0; transition: opacity .35s; cursor: pointer; }
.letter.open .l-scrim { opacity: 1; }
.l-sheet { position: absolute; top: 10px; bottom: 10px; right: 10px; width: min(1320px, calc(100vw - 20px)); overflow: auto; overscroll-behavior: contain;
  background: var(--sheet); border: 2px solid var(--ink); box-shadow: -8px 8px 0 var(--ink); outline: none;
  transform: translateX(calc(100% + 40px)) rotate(.6deg); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.letter.open .l-sheet { transform: none; }
.l-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: .8rem; padding: 14px max(18px, 2vw); background: var(--sheet);
  border-bottom: 2px solid var(--ink); }
.l-pos { margin-left: auto; }
.l-nav { display: flex; }
.l-nav .tab-btn + .tab-btn { margin-left: -1.5px; }
.tab-btn:disabled { opacity: .32; pointer-events: none; }
.l-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: max(28px, 3.2vw); padding: max(34px, 4vh) max(18px, 2.4vw) max(40px, 6vh); align-items: start; }
.l-text { display: flex; flex-direction: column; gap: max(22px, 2.6vh); padding-top: 1.4em; }
.l-text .stk .ln { font-size: max(40px, min(4.4vw, 8.4vh)); }
.l-fields { margin: 0; border-top: 2px solid var(--ink); }
.l-fields > div { display: grid; grid-template-columns: 7.4em minmax(0, 1fr); align-items: baseline; gap: 1em; padding: .62em 0 .55em; border-bottom: 1px solid rgba(18,17,16,.28); }
.l-fields dt { margin: 0; opacity: .7; }
.l-fields dd { margin: 0; font: 500 max(15px, 1vw)/1.35 "Archivo", sans-serif; }
.l-fields .l-sub { font-weight: 680; font-stretch: 88%; font-size: max(17px, 1.2vw); }
.l-fields a { text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.l-tag { display: inline-block; margin-left: .6em; padding: .25em .5em .2em; border: 1.5px solid var(--ink); vertical-align: .15em; font-size: max(9.5px, .6vw); }
.l-body { font: 450 max(17px, 1.22vw)/1.5 "Archivo", sans-serif; max-width: 36em; }
.l-body p { margin: 0 0 .8em; }
.l-body .ps { font: 600 max(25px, 1.85vw)/1.15 "Caveat", cursive; transform: rotate(-1.2deg); transform-origin: 0 50%; margin-top: 1.1em; max-width: 24em; }
.l-body .ps span { font-weight: 700; margin-right: .2em; }
.l-cta { display: flex; flex-wrap: wrap; gap: 1.1em 1.6em; align-items: center; }
.l-att { margin: 0; position: sticky; top: 92px; }
.l-screen { position: relative; aspect-ratio: 16 / 9; background: #000; border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.l-screen img, .l-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.l-screen video { opacity: 0; transition: opacity .3s; }
.l-screen video.v { opacity: 1; }
.l-tape { left: 1.2em; top: -.75em; --r: -2.5deg; z-index: 2; }
.l-strip { margin-top: max(22px, 2.6vh); }
.l-strip .fr { cursor: pointer; border: 0; padding: 0; }
.l-strip .fr.on::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--paper); }
.l-strip .fr:not(.on):hover img { filter: brightness(1.12); }
.l-hint { margin: .9em 0 0; opacity: .66; }
.l-cap { display: flex; gap: 1em; align-items: center; flex-wrap: wrap; margin-top: max(18px, 2vh); }

@media (max-width: 1080px) and (min-width: 761px) {
  .l-grid { grid-template-columns: minmax(0, 1fr); }
  .l-att { position: relative; top: auto; order: -1; }
}
@media (max-width: 760px) {
  .l-sheet { inset: 0; width: auto; border: 0; box-shadow: none; transform: translateY(100%); }
  .l-top { padding: max(10px, env(safe-area-inset-top)) var(--gut) 10px; gap: .5rem; }
  .l-pos { display: none; }
  .l-nav { margin-left: auto; }
  .l-grid { grid-template-columns: minmax(0, 1fr); padding: 26px var(--gut) 90px; gap: 30px; }
  .l-att { position: relative; top: auto; order: -1; }
  .l-screen { box-shadow: 5px 5px 0 var(--ink); }
  .l-text { padding-top: .8em; }
  .l-text .stk .ln { font-size: 12vw; }
  .l-fields > div { grid-template-columns: 6.2em minmax(0, 1fr); }
}

/* ---------- the addressee's logo in the letter (?logos=on|letter): cut out of their own site with scissors, their own
   colours on their own ground, taped on. The tape carries "Concept · not commissioned" (or "My own"). */
.l-cut { --S: max(150px, min(12.5vw, 25vh)); position: relative; align-self: flex-start; width: min(calc(var(--S) * var(--k) * var(--sq)), 100%);
  margin: 1.2em 0 .5em .3em; transform: rotate(var(--rc)); filter: drop-shadow(3px 4px 0 rgba(18,17,16,.24)); opacity: 0; }
.l-cut-p { position: relative; line-height: 0; }
.l-cut-p img { display: block; width: 100%; height: auto; }
.l-cut > .cut-t1 { left: 10%; top: -.9em; --r: -3deg; }
.l-cut > .cut-t2 { left: calc(100% - 2.4em); top: calc(100% - .55em); width: 4.6em; height: 1.35em; padding: 0; --r: -40deg; }
.l-cut.on { animation: cutin .7s cubic-bezier(.25,.8,.3,1) both; }
.l-cut.on > .tape { animation: tape .5s cubic-bezier(.3,.7,.3,1) both; animation-delay: .6s; }
.l-cut.on > .cut-t2 { animation-delay: .76s; }
@keyframes cutin {
  0% { opacity: 0; transform: perspective(900px) translate(-.3em, -.5em) rotate3d(1, -1, 0, 55deg) rotate(var(--rc)) scale(1.05); }
  14% { opacity: 1; }
  64% { transform: perspective(900px) rotate3d(1, -1, 0, -3deg) rotate(var(--rc)); }
  100% { opacity: 1; transform: rotate(var(--rc)); }
}
@media (max-width: 760px) { .l-cut { --S: 46vw; } }
@media (prefers-reduced-motion: reduce) { .l-cut.on, .l-cut.on > .tape { animation-duration: .01s !important; animation-delay: 0s !important; } }