/* Benny Graves — CONTACT: THE SEALED LETTER on the studio desk (the Contact since 2026-11-09; see sealed.js). Every rule
   is under html.contact-sealed and the build's own sl- classes, so with ?contact=postcard none of it applies.
   Sizes that follow the letter come from sealed.js: --sl-sd (the seal), --sl-lf (the address label), --sl-cu (a card's
   type, 1 = the 300-pixel card of the mockup), --sl-fp (the flap's perspective). */

.contact-sealed .view-contact {
  --sl-cream: #efe3cc; --sl-cream-2: rgba(239, 227, 204, .78); --sl-cream-3: rgba(239, 227, 204, .55); --sl-gold: #e2c27a; --sl-spot: #ff5a2a;
  --sl-display: 'Anybody', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; --sl-serif: 'Bodoni Moda', Didot, Georgia, serif;
  --sl-type: 'Courier Prime', 'Courier New', Courier, monospace; --sl-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sl-sans: 'Hanken Grotesk', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  display: flow-root; /* (the stage's top margin stays inside the page) */
  background: #0b0806; color: var(--sl-cream); color-scheme: dark;
}
.contact-sealed .view-contact :focus-visible { outline: 2px solid var(--sl-gold); outline-offset: 3px; }
/* the page behind it is the dark room too (Safari tints its toolbars from it); and the page does not stretch when a
   finger pulls past its end (iPhone's bounce would move the letter and not the desk under it) */
html.contact-sealed[data-view="contact"], html.contact-sealed[data-view="contact"] body { background: #0b0806; overscroll-behavior-y: none; }

/* the room: the studio desk with the laptop, cropped to the screen (sealed.js places it); its soft-focus copy, the dimming
   and a slight lean of the camera come in while the letter is in your hand. It is part of the page, not pinned to the
   screen, so whatever moves the page moves the desk and the letter on it together */
.contact-sealed .view-contact .sl-ground { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #0b0806; }
.contact-sealed .view-contact .sl-cam { position: absolute; inset: 0; will-change: transform; }
.contact-sealed .view-contact :is(.sl-room, .sl-soft) { position: absolute; display: block; max-width: none; -webkit-user-drag: none; user-select: none; }
.contact-sealed .view-contact .sl-soft { opacity: 0; will-change: opacity; }
.contact-sealed .view-contact .sl-dim { position: absolute; inset: 0; background: #050302; opacity: 0; will-change: opacity; }
.contact-sealed .view-contact .sl-vig { position: absolute; inset: 0; background: radial-gradient(130% 95% at 50% 45%, rgba(4, 3, 2, 0) 55%, rgba(4, 3, 2, .55) 100%); }

.contact-sealed .view-contact .sl-stage { position: relative; margin-top: var(--bg-nav-h); height: calc(var(--bg-vh) - var(--bg-nav-h) - var(--bg-dock-h)); overflow: hidden; perspective: 1500px; touch-action: manipulation; --sl-pad: 64px; }
.contact-sealed .view-contact .sl-stage.sl-tall { perspective: 1100px; }
/* in your hand and open, at rest, nothing is under a perspective: iPhone Safari sends no click to a link under one, even
   one that is flat to the screen (it looks the same either way: those poses have no depth) */
.contact-sealed .view-contact .sl-stage:is([data-state="held"], [data-state="open"]):not(.sl-moving) { perspective: none; }

/* the heading, on the wall */
.contact-sealed .view-contact .sl-head { position: absolute; left: var(--sl-pad); right: var(--sl-pad); top: 30px; z-index: 2; pointer-events: none; text-shadow: 0 1px 14px rgba(0, 0, 0, .7); }
.contact-sealed .view-contact .sl-tall .sl-head { top: 22px; }
.contact-sealed .view-contact .sl-head.sl-away { opacity: 0; }
.contact-sealed .view-contact .sl-h { margin: 0; font: 800 12px/1 var(--sl-display); font-variation-settings: 'wdth' 92; letter-spacing: .32em; text-transform: uppercase; color: var(--sl-gold); }
.contact-sealed .view-contact .sl-sub { margin: 11px 0 0; font: italic 400 20px/1.25 var(--sl-serif); color: var(--sl-cream-2); }
.contact-sealed .view-contact .sl-tall .sl-sub { margin-top: 9px; font-size: 17px; }

/* the shadow the letter casts on the desk while it lies there */
.contact-sealed .view-contact .sl-shadow { position: absolute; left: 0; top: 0; border-radius: 6px; background: rgba(0, 0, 0, .6); filter: blur(9px); transform-origin: 50% 50%; pointer-events: none; will-change: transform, opacity; }

/* ================= the envelope: black linen, seen from its back (the flap, the folds, his seal) ================= */
.contact-sealed .view-contact .sl-env { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; perspective: var(--sl-fp, 1440px); -webkit-tap-highlight-color: transparent; }
.contact-sealed .view-contact .sl-env.sl-flat { perspective: none; }
.contact-sealed .view-contact .sl-stage:is([data-state="desk"], [data-state="held"]) .sl-env { cursor: pointer; }
.contact-sealed .view-contact .sl-env > i, .contact-sealed .view-contact .sl-env > p, .contact-sealed .view-contact .sl-env > span { pointer-events: none; }
/* its shadow in your hand */
.contact-sealed .view-contact .sl-drop { position: absolute; inset: 0; border-radius: 4px; box-shadow: 0 30px 60px rgba(0, 0, 0, .62), 0 6px 14px rgba(0, 0, 0, .5); opacity: 0; will-change: opacity; }
.contact-sealed .view-contact .sl-stage:not([data-state="desk"]) .sl-drop { opacity: 1; }
/* the inside of the envelope, seen through its open top */
.contact-sealed .view-contact .sl-back { position: absolute; inset: 0; border-radius: 4px; background: radial-gradient(90% 70% at 50% 18%, #2c231a, #0f0c0a); }
/* the front of the pocket: the side folds and the bottom fold, up to the V the flap closes over */
.contact-sealed .view-contact .sl-pocket {
  position: absolute; inset: 0; z-index: 3; border-radius: 4px;
  background: linear-gradient(rgba(8, 7, 6, .5), rgba(8, 7, 6, .62)), url(assets/linen.webp) 0 0 / 220px, linear-gradient(180deg, #1b1816, #121010);
  background-blend-mode: normal, soft-light, normal;
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 210, .06);
}
.contact-sealed .view-contact .sl-pocket::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, transparent 49.6%, rgba(255, 240, 210, .09) 50%, transparent 50.6%), linear-gradient(-160deg, transparent 49.6%, rgba(0, 0, 0, .5) 50%, transparent 50.8%); }
/* the flap: its outside in the same linen, its lining in gold. sealed.js turns it open in real 3D, toward you and over
   the top; at rest it is flat (closed: as it is; open: mirrored above the envelope, lining out) */
.contact-sealed .view-contact .sl-flap { position: absolute; left: 0; right: 0; top: 0; height: 56%; z-index: 6; transform-origin: 50% 0; transform-style: preserve-3d; }
.contact-sealed .view-contact .sl-env.sl-fu .sl-flap { z-index: 0; }
.contact-sealed .view-contact :is(.sl-fo, .sl-fi) { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.contact-sealed .view-contact .sl-fo {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(rgba(8, 7, 6, .4), rgba(8, 7, 6, .48)), url(assets/linen.webp) 0 0 / 220px, linear-gradient(180deg, #26221f, #171412);
  background-blend-mode: normal, soft-light, normal;
}
.contact-sealed .view-contact .sl-fo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 240, 210, .07), transparent 30%); }
.contact-sealed .view-contact .sl-fi { transform: rotateX(180deg); clip-path: polygon(0 100%, 100% 100%, 50% 0); background: linear-gradient(160deg, #c9a256, #f3dc9d 40%, #b88a3c 70%, #8d6324); }
.contact-sealed .view-contact .sl-env.sl-open .sl-flap { transform: rotateX(180deg); }
.contact-sealed .view-contact .sl-env.sl-flat .sl-flap { transform-style: flat; }
.contact-sealed .view-contact .sl-env.sl-flat:not(.sl-open) .sl-fi { display: none; }
.contact-sealed .view-contact .sl-env.sl-flat.sl-open .sl-flap { transform: scaleY(-1); }
.contact-sealed .view-contact .sl-env.sl-flat.sl-open :is(.sl-fo, .sl-top) { display: none; }
.contact-sealed .view-contact .sl-env.sl-flat.sl-open .sl-fi { transform: scaleY(-1); backface-visibility: visible; -webkit-backface-visibility: visible; }
/* the flap's shadow on the pocket (a blurred copy of its shape) */
.contact-sealed .view-contact .sl-fshadow { position: absolute; left: -1%; right: -1%; top: 0; height: 58.5%; z-index: 5; filter: blur(4px); }
.contact-sealed .view-contact .sl-fshadow i { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); background: rgba(0, 0, 0, .5); transform: translateY(3px); }
.contact-sealed .view-contact .sl-env.sl-open .sl-fshadow { opacity: 0; }
/* who it is to (the address is also always beside the Copy button) */
.contact-sealed .view-contact .sl-label { position: absolute; right: 4.5%; bottom: 6%; z-index: 4; margin: 0; text-align: right; font: 400 var(--sl-lf, 13px)/1.4 var(--sl-type); letter-spacing: .02em; color: var(--sl-cream-2); }

/* ================= his seal: gold, his signature pressed into it (the original's shape, scaled and tinted) =================
   two halves along one crack; the top half rides on the flap, the bottom half stays on the envelope */
.contact-sealed .view-contact .sl-half { position: absolute; left: 50%; width: calc(var(--sl-sd, 104px) * 1.3); aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; }
.contact-sealed .view-contact .sl-top { top: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; clip-path: polygon(0 0, 100% 0, 100% 51%, 86% 47.5%, 74% 53.5%, 61% 46.5%, 49% 52.5%, 38% 47%, 26% 53%, 13% 47.5%, 0 51.5%); }
.contact-sealed .view-contact .sl-bot { top: 56%; z-index: 5; clip-path: polygon(0 51.5%, 13% 47.5%, 26% 53%, 38% 47%, 49% 52.5%, 61% 46.5%, 74% 53.5%, 86% 47.5%, 100% 51%, 100% 100%, 0 100%); }
.contact-sealed .view-contact .sl-half > i {
  width: 76.9%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 32%, #fff2c4 0%, #e4bf6c 22%, #b5862f 52%, #7c5418 78%, #5e3d0e 100%);
  box-shadow: 0 0 0 3px rgba(132, 92, 26, .55), 0 0 0 6px rgba(201, 158, 74, .35), 0 6px 12px rgba(0, 0, 0, .55), inset 0 -4px 8px rgba(60, 35, 5, .6), inset 0 3px 6px rgba(255, 245, 210, .55);
}
.contact-sealed .view-contact .sl-sig { display: block; width: 78%; aspect-ratio: 1100 / 403; background: linear-gradient(160deg, #6b4a16, #3d2808);
  -webkit-mask: url(assets/signature-mask.webp) 0 0 / 100% 100% no-repeat; mask: url(assets/signature-mask.webp) 0 0 / 100% 100% no-repeat; }
/* the light that runs across the seal */
.contact-sealed .view-contact .sl-shine { position: absolute; left: 50%; top: 56%; z-index: 7; width: var(--sl-sd, 104px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; overflow: hidden; }
.contact-sealed .view-contact .sl-shine i { position: absolute; top: -20%; bottom: -20%; left: 0; width: 42%; background: linear-gradient(90deg, rgba(255, 250, 225, 0), rgba(255, 250, 225, .7) 50%, rgba(255, 250, 225, 0)); transform: translateX(-130%) skewX(-12deg); }
.contact-sealed .view-contact .sl-env.sl-open .sl-shine { opacity: 0; }
/* the seal is also a button (a keyboard, or a tap right on it) while the letter is in your hand */
.contact-sealed .view-contact .sl-sealbtn { position: absolute; left: 50%; top: 56%; z-index: 8; width: calc(var(--sl-sd, 104px) * 1.25); aspect-ratio: 1; translate: -50% -50%; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.contact-sealed .view-contact .sl-stage:not([data-state="held"]) .sl-sealbtn { display: none; }

/* ================= the three cards inside: each is the email itself ================= */
.contact-sealed .view-contact .sl-cards { position: absolute; inset: 0; z-index: 1; }
.contact-sealed .view-contact .sl-card {
  position: absolute; left: 0; top: 0; display: block; box-sizing: border-box; border-radius: 6px; color: #241b12; text-decoration: none; -webkit-tap-highlight-color: transparent;
  padding: calc(24px * var(--sl-cu, 1)) calc(26px * var(--sl-cu, 1));
  background: url(assets/grain-a.webp) 0 0 / 240px, linear-gradient(180deg, #f6eedc, #ebdfc4); background-blend-mode: multiply, normal;
  box-shadow: inset 0 0 0 1px rgba(150, 110, 40, .5), inset 0 0 0 5px #f6eedc, inset 0 0 0 6px rgba(184, 138, 60, .7), 0 18px 34px rgba(0, 0, 0, .5);
  transform-origin: 50% 120%; transition: translate .22s cubic-bezier(.2, .7, .2, 1);
}
.contact-sealed .view-contact .sl-cn { display: block; font: 900 calc(40px * var(--sl-cu, 1))/.88 var(--sl-display); font-variation-settings: 'wdth' 62; text-transform: uppercase; color: #d9481f; white-space: nowrap; }
.contact-sealed .view-contact .sl-cl { display: block; margin-top: calc(8px * var(--sl-cu, 1)); font: italic 400 max(14px, calc(18px * var(--sl-cu, 1)))/1.2 var(--sl-serif); color: #3b2f22; }
.contact-sealed .view-contact .sl-ct { display: block; margin-top: calc(12px * var(--sl-cu, 1)); font: 400 max(12px, calc(13px * var(--sl-cu, 1)))/1.3 var(--sl-type); color: #5d4f3c; }
.contact-sealed .view-contact .sl-cw { position: absolute; right: calc(22px * var(--sl-cu, 1)); bottom: calc(18px * var(--sl-cu, 1)); padding-bottom: 3px; border-bottom: 1.5px solid #d9481f; font: 700 max(12.5px, calc(14px * var(--sl-cu, 1)))/1 var(--sl-type); color: #241b12; }
.contact-sealed .view-contact .sl-card:is(:hover, :focus-visible) .sl-cw { color: #c23d17; }
@media (hover: hover) and (pointer: fine) {
  .contact-sealed .view-contact .sl-env.sl-flat.sl-open .sl-card:hover { translate: 0 -8px; }
}
.contact-sealed .view-contact .sl-tall .sl-card { padding: 14px 18px; }
.contact-sealed .view-contact .sl-tall .sl-cn { font-size: 29px; }
.contact-sealed .view-contact .sl-tall .sl-cl { margin-top: 6px; font-size: 15px; }
.contact-sealed .view-contact .sl-tall .sl-ct { margin-top: 8px; font-size: 12px; }
.contact-sealed .view-contact .sl-tall .sl-cw { right: 16px; bottom: 14px; font-size: 12.5px; }

/* ================= under it all: what to do now, and the address with Copy ================= */
.contact-sealed .view-contact .sl-under { position: absolute; left: var(--sl-pad); right: var(--sl-pad); bottom: 30px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.contact-sealed .view-contact .sl-tall .sl-under { bottom: 14px; gap: 10px 14px; }
.contact-sealed .view-contact .sl-act {
  display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border: 0; border-radius: 23px; margin: 0;
  font: 700 15px/1 var(--sl-type); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: var(--sl-spot); color: #120c08; box-shadow: 0 10px 26px rgba(255, 90, 42, .28);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.contact-sealed .view-contact .sl-act.sl-ghost { background: rgba(11, 8, 6, .35); color: var(--sl-cream); box-shadow: inset 0 0 0 1.5px var(--sl-cream-2); }
.contact-sealed .view-contact .sl-addr { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; text-shadow: 0 1px 12px rgba(0, 0, 0, .75); }
.contact-sealed .view-contact .sl-k { font: 600 11px/1 var(--sl-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sl-cream-3); }
.contact-sealed .view-contact .sl-v { font: 400 18px/1.2 var(--sl-type); color: var(--sl-cream); user-select: all; -webkit-user-select: all; }
.contact-sealed .view-contact .sl-copy { height: 36px; padding: 0 14px; margin: 0; border: 0; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--sl-cream-3); background: rgba(11, 8, 6, .3); font: 700 12px/1 var(--sl-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--sl-cream-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.contact-sealed .view-contact .sl-status { position: absolute; left: 0; bottom: 100%; margin: 0 0 10px; font: 400 13px/1.3 var(--sl-type); color: var(--sl-cream-2); text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.contact-sealed .view-contact .sl-status:empty { display: none; }
/* a phone: the address on its own line under the button ("Write to" is only read out) */
.contact-sealed .view-contact .sl-tall .sl-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact-sealed .view-contact .sl-tall .sl-v { font-size: 15.5px; }
.contact-sealed .view-contact .sl-tall .sl-addr { width: 100%; justify-content: space-between; }