/* Contact is a physical sleeve: front, paper, back and perpendicular edge planes.
   The lifecycle controller owns the rig's transform. Do not animate this assembly
   in CSS, or apply grouping properties that flatten its preserve-3d children. */
.contact-layout.contact-pass-layout {
  position: relative;
  --pass-ink: #284c91;
  --pass-paper: #f9f9f6;
  --pass-width: 344px;
  --pass-hang: max(108px, calc(88px + env(safe-area-inset-top, 0px)));
  min-height: 100svh;
  padding: var(--pass-hang) 28px max(34px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  color: #22221f;
  background: #f5f5f3;
  isolation: auto;
}

.contact-pass-layout .contact-pass-scene {
  position: relative;
  z-index: 1;
  left: 10vw;
  flex: 0 0 auto;
  width: min(var(--pass-width), calc(100vw - 56px));
  max-width: 100%;
  perspective: 1250px;
  perspective-origin: 50% 34%;
}

/* The invitation is a background plane. The complete perspective scene,
   including the wall shadow and fabric, always paints above it. */
.contact-pass-layout .contact-invitation {
  position: absolute;
  z-index: 0;
  left: clamp(28px, calc(40vw - 236px), 20vw);
  top: var(--contact-invitation-top, 50%);
  transform: translateY(-50%);
  pointer-events: none;
  color: #000;
}
.contact-pass-layout .contact-invitation p {
  position: relative;
  margin: 0;
  color: var(--pass-ink);
  font: 600 17px/1.2 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  letter-spacing: -.015em;
  white-space: nowrap;
  transform: rotate(-3deg);
  transform-origin: 45% 50%;
  text-shadow: .2px .1px 0 currentColor;
  user-select: text;
  -webkit-user-select: text;
  pointer-events: auto;
}
.contact-pass-layout .contact-invitation-line { display: inline-block; }
.contact-pass-layout .contact-invitation-line:nth-of-type(2) { transform: translateX(3px) rotate(.6deg); }
.contact-pass-layout .contact-invitation-away { display: inline-block; }
.contact-pass-layout .invitation-letter {
  display: inline-block;
  transform: translateY(calc(var(--ink-y) * .5)) rotate(calc(var(--ink-turn) * .4));
  font-variation-settings: 'wght' clamp(610, var(--ink-weight), 650);
  opacity: clamp(.96, var(--ink-opacity), 1);
  margin-right: var(--ink-space);
}
.contact-pass-layout .contact-invitation-smile {
  position: absolute;
  left: calc(100% - 14px);
  top: calc(100% + 50px);
  color: var(--pass-ink);
  font: 600 19px/1 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  transform: translate(-50%, -50%) rotate(90deg);
  text-shadow: .2px .1px 0 currentColor;
  opacity: .91;
  filter: url('#hand-ink-grain');
}
.contact-pass-layout .contact-invitation-arrow {
  position: absolute;
  width: clamp(70px, calc(40vw - 348px), 440px);
  height: 64px;
  left: calc(100% - 22px);
  top: calc(var(--contact-paper-height, 41px) + 16px);
  overflow: visible;
  pointer-events: none;
}
.contact-pass-layout .contact-invitation-arrow path {
  stroke: var(--pass-ink);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
  transition: none;
}

.contact-pass-layout .contact-pass-rig {
  position: relative;
  width: 100%;
  padding-top: 64px;
  transform-style: preserve-3d;
  transform-origin: 50% calc(0px - var(--pass-hang) - 120px);
  transform: rotateZ(-.5deg) rotateY(0deg);
}

/* Both fabric ends share a rigid suspension around the hidden neck pivot.
   Upper ends move together above the screen; actual strap lengths never change. */
.contact-pass-layout .contact-pass-lanyard {
  --pass-strap-run: 66px;
  --pass-strap-drop: calc(var(--pass-hang) + 90px);
  position: absolute;
  top: calc(0px - var(--pass-hang) - 80px);
  left: calc(50% - 79px);
  width: 18px;
  height: calc(var(--pass-hang) + 98px);
  border: 1px solid #242320;
  border-bottom: 0;
  border-radius: 0 0 2px 2px;
  background: #22221f url('media/contact-woven-strap.svg') center top / 100% 128px repeat-y;
  box-shadow: inset 1px 0 0 rgba(205,202,188,.18), inset -1px 0 0 rgba(0,0,0,.42), 2px 1px 3px rgba(29,28,25,.09);
  transform-origin: 50% 0;
  /* A connected static preview before the settled route enables JS geometry.
     The controller replaces this transform; CSS never animates the strap. */
  transform: rotate(-18.5deg);
  pointer-events: none;
}

.contact-pass-layout .contact-pass-lanyard-right {
  left: calc(50% + 61px);
  background-position: center 47px;
  transform: rotate(18.5deg);
}

.contact-pass-layout .contact-pass-lanyard::before {
  content: '';
  position: absolute;
  inset: 0 1px 0;
  border-left: 1px dashed rgba(222,214,185,.28);
  border-right: 1px dashed rgba(0,0,0,.48);
}

.contact-pass-layout .contact-pass-lanyard i {
  position: absolute;
  inset: auto 0 0;
  height: 14px;
  border-bottom: 2px solid #151612;
  background: linear-gradient(0deg,rgba(8,10,8,.65),transparent);
}

.contact-pass-layout .contact-pass-attachment-left,
.contact-pass-layout .contact-pass-attachment-right {
  --pass-attachment-depth: 5px;
  position: absolute;
  top: 10px;
  left: calc(50% - 4px);
  width: 0;
  height: 0;
  pointer-events: none;
}

.contact-pass-layout .contact-pass-attachment-right {
  left: calc(50% + 4px);
}

.contact-pass-layout .contact-pass-shadow {
  position: absolute;
  inset: 64px 0 0;
  /* A shell-sized plane cast on the wall, with softness extending evenly around
     its perimeter. The motion controller projects this box, never a floor oval. */
  transform-origin: 0 0;
  transform: translate(8px,2px);
  pointer-events: none;
}

.contact-pass-layout .contact-pass-shadow::before {
  content: '';
  position: absolute;
  inset: -16px -22px;
  background: radial-gradient(ellipse at 50% 50%,rgba(43,40,33,.15) 0 47%,rgba(43,40,33,.08) 60%,transparent 75%);
  pointer-events: none;
}

.contact-pass-layout .contact-pass-shell {
  position: relative;
  width: 100%;
  padding: 58px 17px 18px;
  transform-style: preserve-3d;
}

.contact-pass-layout .contact-pass-back,
.contact-pass-layout .contact-pass-front {
  position: absolute;
  inset: 0;
  border-radius: 19px 19px 16px 16px;
  pointer-events: none;
}

.contact-pass-layout .contact-pass-back {
  transform: translateZ(-1.2px);
  border: 1px solid rgba(130, 133, 134, .43);
  background: linear-gradient(112deg, rgba(255, 255, 255, .10), rgba(216, 219, 220, .18) 46%, rgba(242, 243, 243, .12));
  box-shadow: 0 2px 1px rgba(255,255,255,.65), inset 1px 1px 1px rgba(255,255,255,.85), inset -1px -1px 1px rgba(142,145,146,.17);
}

.contact-pass-layout .contact-pass-back::after {
  content: '';
  position: absolute;
  inset: 8px 7px 7px;
  border: 1px solid rgba(135, 138, 140, .27);
  border-radius: 13px 13px 11px 11px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.52), inset 0 0 0 1px rgba(243,245,245,.44);
}

.contact-pass-layout .contact-pass-rim {
  position: absolute;
  background: linear-gradient(90deg, rgba(132,137,140,.24), rgba(255,255,255,.78) 35%, rgba(175,180,183,.39) 68%, rgba(236,240,242,.64));
  pointer-events: none;
  backface-visibility: visible;
}

.contact-pass-layout .contact-pass-rim-left {
  top: 18px;
  bottom: 16px;
  left: 0;
  width: 2.4px;
  transform-origin: left center;
  transform: translateZ(1.2px) rotateY(90deg);
}

.contact-pass-layout .contact-pass-rim-right {
  top: 18px;
  bottom: 16px;
  right: 0;
  width: 2.4px;
  transform-origin: right center;
  transform: translateZ(1.2px) rotateY(-90deg);
}

.contact-pass-layout .contact-pass-rim-top,
.contact-pass-layout .contact-pass-rim-bottom {
  left: 18px;
  right: 18px;
  height: 2.4px;
}

.contact-pass-layout .contact-pass-rim-top {
  top: 0;
  transform-origin: center top;
  transform: translateZ(1.2px) rotateX(-90deg);
}

.contact-pass-layout .contact-pass-rim-bottom {
  bottom: 0;
  transform-origin: center bottom;
  transform: translateZ(1.2px) rotateX(90deg);
}

.contact-pass-layout .contact-pass-insert {
  position: relative;
  padding: 18px 19px 17px;
  color: #20211e;
  background: var(--pass-paper);
  background-image: linear-gradient(101deg, rgba(255,255,255,.5), transparent 11% 92%, rgba(105,101,92,.055)), radial-gradient(ellipse at 1% 80%, rgba(120,114,101,.05), transparent 28%);
  border: 1px solid rgba(135, 132, 124, .23);
  border-radius: 1px;
  box-shadow: -1px 1px 0 #dfe0da, -1.5px 2px 0 rgba(218,220,213,.8), -2px 3px 4px rgba(63,61,55,.14), 1px 1px 0 rgba(255,255,255,.8);
  transform: translateZ(.1px) rotateZ(-.35deg);
  container-type: inline-size;
  user-select: text;
  -webkit-user-select: text;
}

.contact-pass-layout .contact-pass-paper-wear {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.contact-pass-layout .paper-crease-shade { stroke: rgba(91,87,77,.12); stroke-width: 1.4; }
.contact-pass-layout .paper-crease-light { stroke: rgba(255,255,255,.93); stroke-width: 1; }
.contact-pass-layout .paper-edge-wear { stroke: rgba(120,114,100,.24); stroke-width: .8; }

/* A turned, slightly torn corner and two edge nicks. Wear is local to the
   paper, with no full-screen noise, colour aberration or animated filters. */
.contact-pass-layout .contact-pass-insert::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 17px;
  height: 15px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 12% 85%, 40% 66%, 46% 44%);
  background: linear-gradient(138deg,#b6b5ae 25%,#fff 49%,#e2e2dc 56%,#f1f1ed 73%);
  pointer-events: none;
}

.contact-pass-layout .contact-pass-heading {
  position: relative;
  padding-bottom: 2px;
}

.contact-pass-layout .contact-pass-kicker {
  font: 400 10px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .015em;
  margin: 0 0 12px;
}

.contact-pass-layout h1 {
  margin: 0;
  color: #1b1d1a;
  font-family: 'Clash Display', Arial, sans-serif;
  font-size: 70px;
  font-size: clamp(54px, 27cqi, 74px);
  font-weight: 600;
  line-height: .82;
  letter-spacing: -.052em;
  /* The tiny missing flecks belong to printed black ink, not the paper/scene. */
  -webkit-mask: url('media/contact-print-wear.svg') center / 100% 100% no-repeat;
  mask: url('media/contact-print-wear.svg') center / 100% 100% no-repeat;
}

.contact-pass-layout h1 span { display: block; }

.contact-pass-layout .contact-pass-ink {
  color: var(--pass-ink);
  font-family: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -.015em;
  text-transform: none;
  text-shadow: .22px .12px 0 rgba(33, 64, 124, .22), -.12px .15px 0 rgba(33, 64, 124, .1);
  filter: url('#hand-ink-grain');
}

.contact-pass-layout .contact-pass-identity {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
  gap: 13px 16px;
  margin: 9px 0 14px;
}

.contact-pass-layout .contact-pass-identity > div { min-width: 0; }
.contact-pass-layout .contact-pass-name-field { position: relative; grid-column: 1 / -1; padding-right: 76px; min-height: 87px; }

.contact-pass-layout .contact-pass-identity .contact-pass-portrait {
  position: absolute;
  top: 1px;
  right: 0;
  width: 64px;
  height: 80px;
  padding: 2px 2px 4px;
  background: #fafafa;
  border: 1px solid #d0d0cc;
  box-shadow: 1px 2px 2px rgba(48,46,42,.16);
  transform: rotate(1.6deg);
}

.contact-pass-layout .contact-pass-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Preserve the uploaded pixels; the printed badge crops out the top control
     and uses a local black-and-white treatment, without changing the face. */
  object-position: 50% 35%;
  filter: grayscale(1);
}

.contact-pass-layout .contact-pass-portrait::after {
  content: '';
  position: absolute;
  inset: 2px 2px 4px;
  border: 1px solid rgba(255,255,255,.26);
  background: linear-gradient(116deg,transparent 0 86%,rgba(255,255,255,.21) 86.4%,transparent 88%);
  pointer-events: none;
}

.contact-pass-layout .contact-pass-identity dt,
.contact-pass-layout .contact-pass-label {
  color: #69685e;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.contact-pass-layout .contact-pass-identity dt { margin: 0 0 2px; }

.contact-pass-layout .contact-pass-identity dd {
  margin: 0;
  padding: 0 0 5px;
  border-bottom: 1px dashed rgba(124, 119, 103, .48);
  font-size: 28px;
  font-size: clamp(23px, 10.5cqi, 29px);
  line-height: 1.08;
}

.contact-pass-layout .contact-pass-identity .contact-pass-full-name {
  font-size: 29px;
  font-size: clamp(24px, 10.8cqi, 30px);
  line-height: .94;
  letter-spacing: .003em;
  transform: rotate(-1.2deg);
  transform-origin: left center;
}

.contact-pass-layout .contact-pass-full-name span { display: block; }
.contact-pass-layout .contact-pass-full-name span + span { margin-left: 22%; }
.contact-pass-layout .contact-pass-role-field dd { transform: rotate(-1.2deg); }
.contact-pass-layout .contact-pass-location-field dd { transform: rotate(1.5deg); }

.contact-pass-layout .contact-pass-links {
  display: grid;
  gap: 0;
  margin: 0;
}

.contact-pass-layout .contact-pass-link,
.contact-pass-layout .contact-email {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 5px;
  width: 100%;
  max-width: none;
  min-height: 55px;
  margin: 0;
  padding: 6px 0 5px;
  color: var(--pass-ink);
  text-decoration: none;
  border: 0;
  border-bottom: 1px dashed rgba(124, 119, 103, .48);
  font-size: inherit;
  line-height: 1;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: text;
  user-select: text;
}

.contact-pass-layout .contact-pass-link:last-child { border-bottom: 0; }
.contact-pass-layout .contact-pass-label { grid-column: 1; }

.contact-pass-layout .contact-pass-value {
  position: relative;
  display: inline-block;
  justify-self: start;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  /* An ink gutter contains the oval inside this value’s local filter region.
     Balanced margins keep the text, wrapping width and tap row in place. */
  max-width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 0 8px;
  font-size: 27px;
  font-size: clamp(23px, 10.4cqi, 28px);
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: anywhere;
  transform-origin: 8px center;
}

.contact-pass-layout .contact-pass-link:nth-child(1) .contact-pass-value { transform: rotate(-.8deg); }
.contact-pass-layout .contact-pass-link:nth-child(2) .contact-pass-value { transform: rotate(.5deg); }
.contact-pass-layout .contact-pass-link:nth-child(3) .contact-pass-value { transform: rotate(-1.1deg); }
.contact-pass-layout .email-text {
  /* Native, selectable text remains readable at text/page zoom. */
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  padding-right: 10px;
}
.contact-pass-layout .email-text span { display: inline; width: auto; }

.contact-pass-layout .contact-pass-link-arrow,
.contact-pass-layout .email-arrow {
  grid-column: 2;
  grid-row: 1 / 3;
  display: block;
  font: 400 17px/1 'IBM Plex Mono', monospace;
  color: var(--pass-ink);
  transition: transform .2s ease;
}

.contact-pass-layout .contact-pass-link:hover .contact-pass-link-arrow { transform: translate(2px, -2px); }
.contact-pass-layout .contact-pass-link:focus-visible { outline: 2px solid var(--pass-ink); outline-offset: 3px; border-radius: 2px; }
.contact-pass-layout .contact-pass-circle {
  position: absolute;
  /* Each loop follows its own handwritten value without changing the row. */
  left: 0;
  top: -2px;
  width: 100%;
  height: calc(100% + 4px);
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-pass-layout .contact-pass-circle path {
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s cubic-bezier(.22,.7,.28,1);
}

.contact-pass-layout .contact-pass-link:hover .contact-pass-circle path,
.contact-pass-layout .contact-pass-link:focus-visible .contact-pass-circle path {
  stroke-dashoffset: 0;
}

.contact-pass-layout .contact-pass-front {
  transform: translateZ(1.2px);
  border: 1px solid rgba(172, 178, 181, .49);
  background: linear-gradient(104deg, rgba(255,255,255,.07), transparent 11% 82%, rgba(255,255,255,.1) 89%, rgba(160,170,175,.025));
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.88), inset -1px -1px 1px rgba(130,140,145,.15), 1px 0 0 rgba(255,255,255,.67);
}

.contact-pass-layout .contact-pass-front::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(141, 148, 151, .27);
  border-radius: 14px 14px 11px 11px;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.76), 1px 1px 0 rgba(255,255,255,.54);
}

.contact-pass-layout .contact-pass-front::after {
  content: '';
  position: absolute;
  inset: 10px 9px 9px;
  border-left: 1px solid rgba(255, 255, 255, .66);
  border-right: 1px solid rgba(255, 255, 255, .5);
  border-bottom: 1px solid rgba(255, 255, 255, .62);
  border-radius: 12px 12px 10px 10px;
}

.contact-pass-layout .contact-pass-slot {
  position: absolute;
  top: 15px;
  left: calc(50% - 31px);
  width: 62px;
  height: 15px;
  border: 1px solid rgba(129, 136, 141, .42);
  border-radius: 10px;
  background: #e7e8e7;
  box-shadow: inset 1px 2px 2px rgba(56,64,70,.17), 0 1px 0 #fff, 0 0 0 2px rgba(255,255,255,.3);
}

.contact-pass-layout .contact-pass-slot::before,
.contact-pass-layout .contact-pass-slot::after {
  content: '';
  position: absolute;
  top: -1px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(143, 150, 154, .31);
  border-radius: 50%;
  background: rgba(224,228,230,.28);
  box-shadow: inset 1px 1px 1px rgba(86,100,108,.10), 1px 1px 0 rgba(255,255,255,.88);
}

.contact-pass-layout .contact-pass-slot::before { left: -62px; }
.contact-pass-layout .contact-pass-slot::after { right: -62px; }

.contact-pass-layout .contact-pass-weld {
  position: absolute;
  top: 41px;
  left: 10px;
  right: 10px;
  height: 10px;
  border-top: 1px solid rgba(255, 255, 255, .91);
  border-bottom: 1px solid rgba(131, 139, 144, .27);
  border-radius: 5px;
  background: linear-gradient(0deg,rgba(255,255,255,.08),rgba(187,195,200,.09) 21%,rgba(255,255,255,.7) 35%,rgba(178,187,192,.22) 57%,rgba(255,255,255,.72) 77%,rgba(171,180,185,.07));
  box-shadow: 0 2px 2px rgba(255,255,255,.53);
}

.contact-pass-layout .contact-pass-shine {
  position: absolute;
  inset: 53px 9px 9px;
  border-radius: 1px 1px 10px 10px;
  background: linear-gradient(101deg,transparent 0 84%,rgba(255,255,255,.12) 86%,transparent 88%), linear-gradient(89deg,rgba(255,255,255,.21),transparent 4% 97%,rgba(250,253,255,.23));
}

.contact-pass-layout .contact-pass-scratches {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.contact-pass-layout .contact-pass-scratch-light { stroke: rgba(255,255,255,.77); stroke-width: .9; }
.contact-pass-layout .contact-pass-scratch-dark { stroke: rgba(108,115,120,.24); stroke-width: .55; }
.contact-pass-layout .contact-pass-fold { stroke-width: 2.2; }

.contact-pass-layout .contact-pass-scuff {
  position: absolute;
  display: block;
  width: 56px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, .76);
  border-top-color: transparent;
  border-right-color: transparent;
  border-radius: 0 0 0 16px;
  box-shadow: -1px 1px 0 rgba(131,139,145,.23), -2px 2px 0 rgba(255,255,255,.63), inset 2px -2px 0 rgba(255,255,255,.33);
}

.contact-pass-layout .contact-pass-scuff-top { top: 2px; right: 2px; transform: rotate(180deg); }
.contact-pass-layout .contact-pass-scuff-bottom { bottom: 3px; left: 3px; }

.contact-pass-layout .contact-pass-grip {
  position: absolute;
  top: -8px;
  left: calc(50% - 42px);
  width: 84px;
  height: 100px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: #222;
  transform: translateZ(5px);
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}

.contact-pass-layout .contact-pass-grip:active { cursor: grabbing; }
.contact-pass-layout .contact-pass-grip:focus-visible { outline: 2px solid var(--pass-ink); outline-offset: 4px; }
.contact-pass-layout .contact-pass-hanger { position: absolute; inset: 8px 0 0; pointer-events: none; }

/* Open, narrow metal hardware. Actual holes, a spring gate and swivel replace
   the broad flat clamp; small wear marks follow individual material surfaces. */
.contact-pass-layout .contact-pass-metal-wear {
  position: absolute;
  top: 0;
  left: calc(50% - 21px);
  width: 42px;
  height: 94px;
  background: url('media/contact-lanyard-hardware.svg') center / contain no-repeat;
  overflow: visible;
  pointer-events: none;
}

/* A compact assembly on an ordinary laptop viewport. The clear band
   still clears its welded seam, and each contact action retains a 44px target.
   This uses real type and spacing changes, never a scale that shrinks links. */
@media (min-width: 701px) and (max-height: 900px) {
  .contact-layout.contact-pass-layout {
    --pass-hang: max(100px, calc(88px + env(safe-area-inset-top, 0px)));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    gap: 12px;
  }

  .contact-pass-layout .contact-pass-rig { padding-top: 58px; }
  .contact-pass-layout .contact-pass-shell { padding-top: 52px; padding-bottom: 12px; }
  .contact-pass-layout .contact-pass-shadow { top: 58px; }
  .contact-pass-layout .contact-pass-insert { padding-top: 10px; padding-bottom: 10px; }
  .contact-pass-layout .contact-pass-kicker { margin-bottom: 6px; }
  .contact-pass-layout h1 { font-size: 58px; }
  .contact-pass-layout .contact-pass-identity { gap: 7px 16px; margin: 6px 0 6px; }
  .contact-pass-layout .contact-pass-identity dd { font-size: 25px; padding-bottom: 3px; }
  .contact-pass-layout .contact-pass-identity .contact-pass-full-name {
    font-size: 26px;
    line-height: .98;
    white-space: nowrap;
  }

  .contact-pass-layout .contact-pass-full-name span + span { margin-left: 8%; }
  .contact-pass-layout .contact-pass-link,
  .contact-pass-layout .contact-email {
    min-height: 44px;
    padding: 3px 0;
    gap: 0 5px;
  }

  .contact-pass-layout .contact-pass-value { font-size: 24px; line-height: 1; }
}

/* A short arrow stays below the paper even in the narrow desktop gap. */
@media (min-width: 701px) and (max-width: 1000px) {
  .contact-pass-layout .contact-invitation-arrow {
    width: 78px;
    height: 52px;
    left: calc(100% - 40px);
    top: calc(var(--contact-paper-height, 41px) + 16px);
  }
}

/* Phone fit is based on the SMALL viewport, so opening Safari's toolbar cannot
   cover the card. Width and spare whitespace grow with the usable height; text
   and touch targets never inherit a scale. Short screens and text zoom keep the
   route's native scroll instead of clipping or shrinking below readable sizes. */
@media (max-width: 700px) {
  .contact-layout.contact-pass-layout {
    --pass-room: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    --pass-air: clamp(0px, calc((var(--pass-room) - 600px) * .15), 12px);
    --pass-width: min(304px, calc(var(--pass-room) * .48));
    /* The controller measures the sleeve once per layout change and spends
       only spare vertical room on the drop. The hanger is not the card centre. */
    --pass-hang: calc(clamp(60px, calc(60px + (var(--pass-room) - 560px) * .1), 64px) + var(--pass-air) * .7 + env(safe-area-inset-top, 0px) + var(--pass-lower, 0px));
    padding: var(--pass-hang) 24px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: clamp(24px, calc(24px + (var(--pass-room) - 650px) * .1), 30px);
    justify-content: flex-start;
  }

  .contact-pass-layout .contact-pass-scene { width: min(max(270px, var(--pass-width)), calc(100vw - 48px)); left: 0; }
  .contact-pass-layout .contact-invitation {
    position: relative;
    order: 2;
    left: var(--contact-note-x, 68.355px);
    top: var(--contact-note-y, 34.418px);
    margin-bottom: var(--contact-note-y, 34.418px);
    transform: none;
    text-align: center;
    flex: 0 0 auto;
    padding-bottom: var(--contact-invitation-tail, 60px);
  }
  /* One generously bounded ink surface keeps small glyph strokes together.
     The source glyphs remain intact; only the outer edges gain uneven bleed. */
  .contact-pass-layout .contact-invitation p {
    font-size: 12px;
    line-height: 16px;
    transform: rotate(-9.4deg);
    overflow: visible;
    filter: url('#contact-note-bleed');
  }
  .contact-pass-layout .contact-invitation-line:nth-of-type(2) { transform: translateX(4px) rotate(1.2deg); }
  .contact-pass-layout .invitation-letter {
    /* Baseline wobble without separately transformed tiny glyph surfaces. */
    position: relative;
    top: calc(var(--ink-y) * 1.6);
    transform: none;
    padding: 4px;
    margin: -4px calc(var(--ink-space) - 4px) -4px -4px;
    opacity: 1;
    overflow: visible;
    font-variation-settings: 'wght' clamp(590, var(--ink-weight), 660);
  }
  .contact-pass-layout .contact-invitation-arrow {
    width: 56px;
    height: 34px;
    left: 8px;
    top: calc(var(--contact-paper-height, 32px) + 26px);
    transform: rotate(-145deg);
  }
  /* Synchronous measurement only: reconstruct v229 before measuring the new
     note. No clone, second selectable copy, or painted intermediate frame. */
  .contact-pass-layout .contact-invitation.contact-note-reference {
    left: 0;
    top: 0;
    margin-bottom: 0;
  }
  .contact-pass-layout .contact-note-reference p {
    font-size: 18px;
    line-height: 20px;
    filter: none;
  }
  .contact-pass-layout .contact-note-reference .invitation-letter {
    position: static;
    opacity: clamp(.96, var(--ink-opacity), 1);
    padding: 0;
    margin: 0 var(--ink-space) 0 0;
    transform: translateY(calc(var(--ink-y) * 1.6)) rotate(calc(var(--ink-turn) * .9));
  }
  .contact-pass-layout .contact-pass-rig { padding-top: 46px; }
  .contact-pass-layout .contact-pass-shell { padding: 42px 12px 9px; }
  .contact-pass-layout .contact-pass-shadow { top: 46px; }
  .contact-pass-layout .contact-pass-insert { padding: 8px 13px; }
  .contact-pass-layout .contact-pass-kicker { font-size: 8px; margin-bottom: 4px; }
  .contact-pass-layout h1 { font-size: calc(clamp(33px, calc(33px + (var(--pass-room) - 560px) * .125), 38px) + var(--pass-air) * .65); overflow-wrap: anywhere; }
  .contact-pass-layout .contact-pass-identity { gap: 5px 10px; margin: 3px 0 4px; }
  .contact-pass-layout .contact-pass-name-field { padding-right: 68px; min-height: 74px; }
  .contact-pass-layout .contact-pass-identity .contact-pass-portrait { width: 56px; height: 68px; top: 0; }
  .contact-pass-layout .contact-pass-identity dt,
  .contact-pass-layout .contact-pass-label { font-size: 8px; }
  .contact-pass-layout .contact-pass-identity dd { font-size: 22px; line-height: 1.04; padding-bottom: 3px; overflow-wrap: anywhere; }
  .contact-pass-layout .contact-pass-identity .contact-pass-full-name { font-size: 22px; line-height: .94; white-space: normal; }
  .contact-pass-layout .contact-pass-full-name span + span { margin-left: 8%; }
  .contact-pass-layout .contact-pass-link,
  .contact-pass-layout .contact-email { min-height: 44px; padding: 3px 0; gap: 0 5px; }
  .contact-pass-layout .contact-pass-value { font-size: 24px; line-height: 1; }
  .contact-pass-layout .contact-pass-grip { height: 78px; }
  .contact-pass-layout .contact-pass-hanger { transform: scale(.76); transform-origin: 50% 0; }
  .contact-pass-layout .contact-pass-slot { top: 9px; width: 52px; left: calc(50% - 26px); height: 13px; }
  .contact-pass-layout .contact-pass-slot::before { left: -47px; }
  .contact-pass-layout .contact-pass-slot::after { right: -47px; }
  .contact-pass-layout .contact-pass-weld { top: 28px; height: 8px; }
  .contact-pass-layout .contact-pass-shine { top: 39px; }
  .contact-pass-layout .contact-pass-lanyard {
    --pass-strap-run: 42px;
    --pass-strap-drop: calc(var(--pass-hang) + 87.6px);
    width: 15px;
    left: calc(50% - 52.5px);
    height: calc(var(--pass-hang) + 92px);
    transform: rotate(-15.2deg);
  }
  .contact-pass-layout .contact-pass-lanyard-right { left: calc(50% + 37.5px); transform: rotate(15.2deg); }
  .contact-pass-layout .contact-pass-attachment-left { top: 7.6px; left: calc(50% - 3px); }
  .contact-pass-layout .contact-pass-attachment-right { top: 7.6px; left: calc(50% + 3px); }
}

/* Guard variable-based trig so older engines keep the plain static fallback. */
@supports (height: hypot(1px, 1px)) and (transform: rotate(atan2(1px, 1px))) {
  .contact-pass-layout .contact-pass-lanyard {
    height: hypot(var(--pass-strap-run), var(--pass-strap-drop));
    transform: rotate(atan2(calc(0px - var(--pass-strap-run)), var(--pass-strap-drop)));
  }
  .contact-pass-layout .contact-pass-lanyard-right {
    transform: rotate(atan2(var(--pass-strap-run), var(--pass-strap-drop)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-pass-layout .contact-invitation-arrow path { stroke-dashoffset: 0; stroke-dasharray: none; animation: none; transition: none; }
  .contact-pass-layout .contact-pass-link-arrow,
  .contact-pass-layout .email-arrow,
  .contact-pass-layout .contact-pass-circle path { transition: none; }
}

/* One torn sheet backs the words, the complete static arrow and the smile.
   Its painted bounds do not participate in badge fit or pointer hit testing. */
.contact-pass-layout .contact-invitation::before,.contact-pass-layout .contact-invitation::after {
  content: ''; position: absolute; pointer-events: none; left: -24px; top: -14px;
  width: calc(100% + clamp(70px, calc(40vw - 348px), 440px) + 34px);
  height: calc(var(--contact-paper-height, 41px) + 120px);
  clip-path: polygon(1% 4%,8% 1%,16% 3%,26% 0,34% 3%,47% 1%,55% 4%,68% 0,77% 3%,89% 1%,99% 3%,98% 17%,100% 28%,97% 42%,100% 57%,98% 72%,100% 86%,98% 98%,88% 96%,78% 100%,65% 97%,52% 99%,39% 96%,28% 100%,15% 97%,2% 99%,3% 84%,0 71%,3% 56%,1% 42%,3% 28%,0 16%);
  transform: rotate(-3deg); transform-origin: 24px 14px;
}
.contact-pass-layout .contact-invitation::before {
  z-index: -1; background: linear-gradient(173deg,transparent 47%,#c5bba719 47.5%,#fff 48%,transparent 49%),linear-gradient(91deg,#e8e2d128,transparent 9%,transparent 93%,#d7ceba32),#fffdf5;
  box-shadow: inset 0 0 1px #a89c8245;
}
.contact-pass-layout .contact-invitation::after {z-index: -2;background:#2b2c231a;translate:1px 2px;}
@media (min-width: 701px) and (max-width: 1000px) {
  .contact-pass-layout .contact-invitation::before,.contact-pass-layout .contact-invitation::after {
    width: calc(100% + 96px);
  }
}
@media(max-width:700px){
  .contact-pass-layout .contact-invitation { margin-bottom: calc(var(--contact-note-y, 34.418px) + 6px); }
  .contact-pass-layout .contact-invitation::before,.contact-pass-layout .contact-invitation::after {
    left: -20px; top: -12px; width: calc(100% + 42px);
    height: calc(var(--contact-paper-height, 32px) + 90px);
    /* The lower right edge tapers inward: the tilted sheet retains its
       comfortable ink margin without leaving a corner off the phone screen. */
    clip-path: polygon(1% 4%,8% 1%,16% 3%,26% 0,34% 3%,47% 1%,55% 4%,68% 0,77% 3%,89% 1%,99% 3%,97% 17%,96% 28%,93% 42%,92% 57%,90% 72%,89% 86%,87% 98%,78% 100%,65% 97%,52% 99%,39% 96%,28% 100%,15% 97%,2% 99%,3% 84%,0 71%,3% 56%,1% 42%,3% 28%,0 16%);
    transform: rotate(-9.4deg);
    transform-origin: calc(45% + 1.1px) calc(var(--contact-paper-height, 32px) / 2 + 12px);
  }
}

/* Desktop paper follows only the remaining words and smile. Leave a modest
   white border, and move the whole note toward the lanyard by up to 250px.
   The cap leaves room for the resting sleeve and the tilted paper corners.
   Rotate the existing -3deg paper, lettering and smile together by another
   -12deg: the complete paper/text angle is -15deg, with unchanged ink padding. */
@media (min-width: 701px) {
  .contact-pass-layout .contact-invitation {
    --contact-note-base-left: clamp(28px, calc(40vw - 236px), 20vw);
    left: max(28px, min(calc(var(--contact-note-base-left) + 250px), calc(60vw - 395px)));
    transform: translateY(-50%) rotate(-12deg);
    transform-origin: 50% 50%;
  }
  /* Measure in the original local frame, then restore the complete tilt
     synchronously before either the live route or its desk clone can paint. */
  .contact-pass-layout .contact-invitation.contact-note-measure {
    transform: translateY(-50%);
  }
  .contact-pass-layout .contact-invitation::before,.contact-pass-layout .contact-invitation::after {
    left: -22px; top: -18px; width: calc(100% + 48px);
    height: calc(var(--contact-paper-height, 41px) + var(--contact-invitation-tail, 60px) + 44px);
    transform-origin: 22px 18px;
  }
}