/* ============================================================
   CONCEPTO P — THE BUZÓN, ON WHITE PAPER
   P's mailbox from when she was a girl, the silver one, kept exactly as it
   moves (launch.js), now hung on the house's white paper by one window of
   daylight (correo-gl.js lights the metal).
   Thank you in the puffed glossy black vinyl (#cp-vinyl-puff); on the card,
   Join the list and subscribe are die-cut in the same vinyl (launch.js); the
   envelope is held shut by one big bold glossy P, die-cut, no disc. The box is
   the same photograph eased to a satin polish, with a live sheen.
   Scoped to body.launch-paper (launch.js adds it on mount, takes it off on leave).
   ============================================================ */
html:has(body.launch-paper),
body.launch-paper,
body.launch-paper #app,
body.launch-paper .launch,
body.launch-paper .launch-veil{ background:#FFFFFF; }
/* the house's own sheet over the door (app.js) is the same white paper, never a warmer one */
body.launch-paper #veil{ background:#FFFFFF !important; }

body.launch-paper .launch{
  --paper-ink:#141413;
  --paper-quiet:rgba(20,20,19,.52);
  color:var(--paper-ink);
  /* the envelope stays bone stock; its lining turns from umber to charcoal */
  --env-paper-hi:#FBF9F4;
  --env-paper:#F1EDE5;
  --env-paper-lo:#E3DDD2;
  --env-liner-hi:#34353a;
  --env-liner:#1b1c1f;
  --env-liner-lo:#0c0c0e;
}

/* the wall: white paper, evenly lit. No pool and no vignette: nothing to read as a halo round the box */
body.launch-paper .launch-wall{ background:#FFFFFF; }
body.launch-paper .launch-wall::before{ opacity:.08; mix-blend-mode:multiply; }
body.launch-paper .launch-wall::after{ background:none; }

/* the box on paper: its shadow is a lamp's shadow on a pale wall, soft and warm, not a void */
/* the far shadow is a picture already blurred (launch-buzon-shadow.webp, the plate's outline with 8% / 16.7% of
   margin round it), so no browser blur is ever cut to a rectangle. The near shadow is the outline itself, unblurred. */
.launch-plate-shade .is-far.is-baked{
  inset:auto;
  left:-8%; top:-16.667%;
  width:116%; height:133.333%;
  transform:none;
  filter:none;
  opacity:.24;
}
body.launch-paper .launch-plate-shade .is-near{
  filter:brightness(0);
  opacity:.16;
}
/* while the card is read the box steps back into the paper, not into the dark */
body.launch-paper .launch-plate img{
  filter:contrast(1.1) saturate(.82) brightness(1.04) opacity(calc(1 - var(--veil, 0) * .82));
}
/* the polish: the photograph itself, brightened, seen through one moving band of light.
   Its own outline is the shape (no mask image, no blend mode), so it can never render as a square. */
.launch-sheen-img{ display:none; }
body.launch-paper .launch-sheen{
  -webkit-mask-image:none; mask-image:none;
  background:none; mix-blend-mode:normal;
}
body.launch-paper .launch-sheen-img{
  display:block;
  position:absolute; inset:0; width:100%; height:100%;
  filter:brightness(1.55) contrast(1.15) saturate(.6);
  opacity:.55;
  -webkit-mask-image:linear-gradient(104deg, transparent 0%, rgba(0,0,0,.35) 38%, #000 47%, rgba(0,0,0,.35) 56%, transparent 100%);
  mask-image:linear-gradient(104deg, transparent 0%, rgba(0,0,0,.35) 38%, #000 47%, rgba(0,0,0,.35) 56%, transparent 100%);
  -webkit-mask-size:220% 100%; mask-size:220% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:calc(46% - var(--sx, .35) * 22%) 0; mask-position:calc(46% - var(--sx, .35) * 22%) 0;
  transition:-webkit-mask-position 1.4s var(--ease), mask-position 1.4s var(--ease);
}
/* the letter's shadows: a solid soft core well inside the paper, spread by its own box-shadow.
   (A box-shadow is never drawn inside its own box: offset from the envelope, a hollow shadow left a clean
   strip along the edge that read as a second sheet of paper.) No blur filters. */
body.launch-paper .launch-eshadow{ background:transparent; filter:none; box-shadow:none; }
body.launch-paper .launch-eshadow::after{
  content:""; position:absolute; inset:16% 13% 10% 13%;
  border-radius:calc(var(--ew) * .05);
  background:rgba(38,34,28,.16);
  box-shadow:0 0 calc(var(--ew) * .08) calc(var(--ew) * .045) rgba(38,34,28,.16);
}
body.launch-paper .launch-env-front .is-fold{ stroke:rgba(40,38,34,.16); }
body.launch-paper .launch-env-veil{
  background:linear-gradient(160deg, rgba(255,255,255,0) 0%, rgba(60,54,46,.10) 60%, rgba(40,36,30,.22) 100%);
}

/* the card's own marks: the blind word on the line, the caret, the note, all in graphite and black */
body.launch-paper .launch-card-face{ box-shadow:0 .5px 0 rgba(60,58,54,.22); }
body.launch-paper .launch-card-shadow{ background:transparent; filter:none; box-shadow:none; }
/* the card held out of its envelope: a soft shadow below it on what is behind, and a closer one at its foot */
body.launch-paper .launch-card-shadow::after{
  content:""; position:absolute; inset:16% 11% 9% 11%;
  border-radius:calc(var(--cw) * .05);
  background:rgba(38,34,28,.17);
  box-shadow:0 0 calc(var(--cw) * .06) calc(var(--cw) * .04) rgba(38,34,28,.15);
}
body.launch-paper .launch-field-key{ color:rgba(20,20,19,.2); text-shadow:0 1px 0 rgba(255,255,255,.8), 0 -.5px 0 rgba(20,20,19,.1); }
body.launch-paper .launch-field:hover .launch-field-key,
body.launch-paper .launch-field.is-focus .launch-field-key{ color:rgba(20,20,19,.5); }
body.launch-paper .launch-caret{ background:linear-gradient(180deg, #55565a, #0c0c0d); }
body.launch-paper .launch-input::selection{ background:rgba(20,20,19,.14); }
body.launch-paper .launch-status{ color:rgba(20,20,19,.82); }
body.launch-paper .launch-send:focus-visible{ outline-color:rgba(20,20,19,.45); }

/* the seal: no disc. One big bold P, die-cut from the glossy black vinyl, across the flap's point:
   it is what holds the envelope shut */
body.launch-paper .launch-seal{
  top:94%;
  background:none;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
}
body.launch-paper .launch-seal-p{
  font-size:calc(var(--ew) * .19);
  line-height:1;
  color:#121213;
  -webkit-text-fill-color:#121213;
  -webkit-text-stroke:.05em #121213;
  paint-order:stroke fill;
  text-shadow:none;
  filter:url(#cp-vinyl-puff);
  transform:translateY(calc(.06em + var(--press) * .6px)) scale(calc(1 - var(--press) * .015));
}
body.launch-paper .launch-ghost-seal{ background:none; }

/* ---------- the words around it, in ink ---------- */
body.launch-paper .launch-invite{ color:rgba(20,20,19,.66); }
body.launch-paper .launch-kept-line{
  color:#141413;
  -webkit-text-fill-color:#141413;
  text-shadow:none;
  filter:url(#cp-vinyl-puff);
  font-size:clamp(46px, 5.4vw, 84px);
  line-height:1.05;
  padding-bottom:.08em;
}
body.launch-paper .launch-kept-sub{ color:rgba(20,20,19,.62); }
body.launch-paper .launch-again{ color:#141413; }
body.launch-paper .launch-again:hover,
body.launch-paper .launch-again.is-copied{ color:#000; }

/* the members' desk, after a right phrase */
body.launch-paper .launch-desk{ color:rgba(20,20,19,.88); }
body.launch-paper .launch-arm.is-held span:last-child{ color:rgba(20,20,19,.3); }
body.launch-paper .launch-plate:focus-visible{ outline-color:rgba(20,20,19,.4); }

/* MEMBERS (R11, 17 October; P, 28 October: the intro's glossy black text, and no button anywhere). One word in the
   glossy black vinyl of the display face, on the edition's line, nothing beside it.
   Touched, the line opens under it (the one line the house allows: where to write);
   Return asks the desk; the note under it is the quiet voice. A right phrase answers with Enter, a step deeper. */
.launch-mem{ display:none; }
body.launch-paper .launch-gate{
  top:calc(clamp(54px, 8vh, 76px) + env(safe-area-inset-top, 0px));
  right:max(24px, env(safe-area-inset-right, 0px));
  left:auto; bottom:auto;
  width:auto; min-width:0;
  align-items:flex-end;
  gap:0;
}
body.launch-paper .launch.is-in .launch-gate{ opacity:1; }
body.launch-paper .launch-mem{
  position:relative;
  display:inline-flex; align-items:center; justify-content:flex-end; order:-1;
  min-height:0; margin:0; padding:0 0 0 12px; border:0; background:none; cursor:pointer;
  color:#141413;
  -webkit-tap-highlight-color:transparent;
}
.launch-mem-w{
  font-family:var(--display); font-style:normal; font-weight:400;
  font-size:18px; line-height:1; letter-spacing:.01em;
  color:#141413; -webkit-text-fill-color:#141413;
  filter:url(#cp-vinyl-xs);
  padding-bottom:2px;
}
body.launch-paper .launch-mem:focus:not(:focus-visible),
body.launch-paper .launch-mem:focus-visible{ outline:none; }
@media (max-width:759px){
  .launch-mem-w{ font-size:17px; }
}
/* the word sits on the edition's own line (placeGate gives it ES's height); a thumb's area is drawn as nothing around it */
body.launch-paper .launch-mem::before{ content:""; position:absolute; top:50%; right:-6px; left:-6px; height:44px; margin-top:-22px; }
/* the field: no box and no placeholder, a baseline drawn out from the word's own edge */
body.launch-paper .launch-gate .launch-key{
  width:min(13.5rem, 62vw); height:36px; box-sizing:border-box;
  margin:0; padding:0 0 6px; border:0; border-radius:0; outline:none; box-shadow:none;
  background-color:transparent;
  background-image:linear-gradient(90deg, transparent, rgba(20,20,19,.9) 50%, transparent), linear-gradient(rgba(20,20,19,.34), rgba(20,20,19,.34));
  background-repeat:no-repeat, no-repeat;
  background-position:-40% 100%, 100% 100%;
  background-size:0 1px, 100% 1px;
  font-family:var(--num, var(--serif)); font-style:normal; font-size:16px; line-height:1; letter-spacing:.24em; text-align:right;
  color:#141413; caret-color:#141413;
}
body.launch-paper .launch-gate .launch-key:focus{
  background-image:linear-gradient(90deg, transparent, rgba(20,20,19,.9) 50%, transparent), linear-gradient(rgba(20,20,19,.62), rgba(20,20,19,.62));
}
body.launch-paper .launch-gate .launch-key:focus-visible{ outline:none; }
/* a try that did not open: the line settles back, a little shorter and lighter, and waits (no shake, no red) */
body.launch-paper .launch-gate.is-settled:not(.is-folded) .launch-key{
  animation:none;
  background-image:linear-gradient(90deg, transparent, rgba(20,20,19,.9) 50%, transparent), linear-gradient(rgba(20,20,19,.2), rgba(20,20,19,.2));
  background-size:0 1px, 72% 1px;
  transition:background-size var(--slowest, 1.2s) var(--settle, ease);
}
body.launch-paper .launch-gate .launch-key::placeholder{ color:transparent; }
body.launch-paper .launch-gate.is-folded .launch-key,
body.launch-paper .launch-gate.is-folded .launch-note{ display:none; }
/* the line opens from the word's edge: the word stays put, the line is drawn under it */
body.launch-paper .launch-gate:not(.is-folded) .launch-key{ animation:launch-mem-open var(--slower, .8s) var(--settle, ease) both; }
@keyframes launch-mem-open{ from{ background-size:0 1px, 0 1px; } to{ background-size:0 1px, 100% 1px; } }
/* the desk is reading: a slip of ink reads across the line until it answers */
body.launch-paper .launch-gate.is-reading .launch-key{ animation:launch-mem-read 1.1s var(--breath, ease-in-out) infinite; background-size:38% 1px, 100% 1px; }
@keyframes launch-mem-read{ 0%{ background-position:-40% 100%, 100% 100%; } 100%{ background-position:140% 100%, 100% 100%; } }
body.launch-paper .launch-note{
  min-height:1.4em; margin:6px 0 0;
  font-family:var(--num, var(--serif)); font-style:normal; font-weight:400;
  font-variant-caps:all-small-caps; font-variant-numeric:oldstyle-nums proportional-nums;
  font-size:13.5px; line-height:1.4; letter-spacing:.1em; text-transform:none; text-align:right;
  color:rgba(20,20,19,.5);
}
body.launch-paper .launch-keeper,
body.launch-paper .launch-enter,
body.launch-paper .launch-shut{
  min-height:44px; padding:0; margin:0; border:0; background:none;
  font-family:var(--num, var(--serif)); font-style:normal; font-weight:400;
  font-variant-caps:all-small-caps; font-size:clamp(14px, 13px + .14vw, 15.5px); line-height:1; letter-spacing:.12em; text-transform:none;
  color:rgba(20,20,19,.82);
}
body.launch-paper .launch-keeper:hover,
body.launch-paper .launch-enter:hover,
body.launch-paper .launch-shut:hover{ color:#000; }
body.launch-paper .launch-desk-acts{ justify-content:flex-end; }

/* the house's dark (push.js) never falls on the paper */
body.launch-paper #push-dark{ opacity:0 !important; }

/* the house's bar, in ink on the paper */
body.launch-paper #nav{ color:#141413; }
body.launch-paper #nav::before{ display:none !important; }
body.launch-paper #nav .nav-lang{ color:#141413; opacity:.72; }

@media (max-width:759px){
  body.launch-paper .launch-kept-line{ font-size:clamp(40px, 11.5vw, 56px); }
}
@media (prefers-reduced-motion: reduce){
  body.launch-paper .launch-gate:not(.is-folded) .launch-key,
  body.launch-paper .launch-gate.is-reading .launch-key{ animation:none; background-size:0 1px, 100% 1px; }
}

/* the open flap's lining stays inside the envelope's own width: under the fold's perspective its two
   base corners stood a hair proud of the sides and read as two dark points */
body.launch-paper .launch-env-flap.is-over .launch-env-flap-face{
  -webkit-clip-path:polygon(2.5% 0, 97.5% 0, 52.5% 96%, 50% 100%, 47.5% 96%);
  clip-path:polygon(2.5% 0, 97.5% 0, 52.5% 96%, 50% 100%, 47.5% 96%);
}
/* the lining is only ever seen through the V: keep its sides off the envelope's corners */
body.launch-paper .launch-env-back{
  -webkit-clip-path:inset(0 3% 0 3%);
  clip-path:inset(0 3% 0 3%);
}