/* v5 · C · Proof · round 6 · front E: 11 send, the job tag (js/r6-e.js).
   Replaces the round 4 film strip. A lab job tag pinned to the board beside the envelope (the form): the lab half takes
   your page and your email, written in pencil as you type, and punches each line you get right; the blue stub is the half
   you keep (48h the 3 leaks, 72h the page live, then you decide). On send the lab date-stamps the tag and the stub tears off.
   Blue keeps its one meaning on this page: the 72h line, the page you will see live.
   Mobile first (390 / 375), then 768 and 1000+. The script adds .is-on when it mirrors the form and .is-mo when it animates;
   without them (no JS, ?static, reduced motion) the tag is in its finished resting state. Only transform and opacity animate. */

.e-tag {
  --e-tilt: -1.6deg;                 /* resting angle on the pin */
  --e-px: 19px; --e-py: 19px;        /* the pin: the tag hangs and swings on it */
  --e-ink: color-mix(in oklab, var(--film) 86%, var(--night)); /* soft pencil, a cold black */
  --e-card: #FCFCFA;
  position: relative; z-index: 2; width: 100%; max-width: 560px; margin: 34px 0 0;
}
@media (max-width: 999px) { .e-tag + .r4s__env { margin-top: 30px; } }
.e-tag__swing { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); transform: rotate(var(--e-tilt)); transform-origin: var(--e-px) var(--e-py); }
.e-tag.is-mo .e-tag__swing { will-change: transform; }

/* the two halves: each carries its own shadow, so the stub can leave with its own */
.e-tag__main, .e-tag__stub { position: relative; isolation: isolate; min-width: 0; }
.e-tag__main::before, .e-tag__stub::before { content: ""; position: absolute; z-index: -1; inset: 10px 4px 1px 12px; border-radius: 4px; box-shadow: 0 18px 22px -14px color-mix(in srgb, var(--film) 52%, transparent), 0 3px 6px -3px color-mix(in srgb, var(--film) 28%, transparent); pointer-events: none; }
.e-tag__stub::before { left: 2px; }
.e-tag__stub { transform-origin: 0 0; }
.e-tag.is-mo .e-tag__stub { will-change: transform; }

/* the lab half: card stock, the corner cut for the pin, the pin hole, half the perforation on its right edge */
.e-tag__face {
  position: relative; height: 100%; padding: 12px 12px 13px 15px;
  background: radial-gradient(90% 70% at 20% 0%, #FFFFFF, transparent 70%), linear-gradient(174deg, var(--e-card), color-mix(in srgb, var(--print) 80%, var(--silver)));
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
  -webkit-mask: radial-gradient(circle at var(--e-px) var(--e-py), transparent 4.6px, #000 5.1px), radial-gradient(circle at 100% 50%, transparent 2.3px, #000 2.8px) 0 0 / 100% 9px repeat-y;
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle at var(--e-px) var(--e-py), transparent 4.6px, #000 5.1px), radial-gradient(circle at 100% 50%, transparent 2.3px, #000 2.8px) 0 0 / 100% 9px repeat-y;
  mask-composite: intersect;
}
.e-tag__face::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--fiber); background-size: 220px; opacity: .22; pointer-events: none; }
.e-tag__face > * { position: relative; z-index: 1; }
.e-tag__ring { position: absolute !important; left: calc(var(--e-px) - 10px); top: calc(var(--e-py) - 10px); width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, transparent 0 5.2px, color-mix(in oklab, var(--frost) 52%, var(--print)) 5.6px 9.2px, transparent 9.7px); }
.e-tag__pin {
  position: absolute; z-index: 5; left: calc(var(--e-px) - 7.5px); top: calc(var(--e-py) - 8.5px); width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFFFFF 0 9%, #D3D6DA 24%, #8B9096 60%, #3B3F44 100%);
  box-shadow: 1.5px 4px 4px -1px color-mix(in srgb, var(--film) 50%, transparent), inset 0 -1px 1.5px color-mix(in srgb, var(--film) 40%, transparent);
  pointer-events: none;
}

/* status line, next to the pin */
.e-tag__top { display: flex; align-items: center; gap: 7px; height: 11px; margin: 1px 0 13px 20px; font: 400 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--film); white-space: nowrap; clip-path: inset(-8px 0 -8px 0); }
.e-tag__dot { flex: none; display: block; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px var(--film); transition: background-color .3s, box-shadow .3s; }
.e-tag[data-s="go"] .e-tag__dot { background: var(--film); }
.e-tag[data-s="bad"] .e-tag__dot, .e-tag[data-s="sent"] .e-tag__dot { background: var(--marker); box-shadow: none; }
.e-tag.is-mo[data-s="idle"] .e-tag__dot { animation: e-breath 2.6s ease-in-out infinite; }
@keyframes e-breath { 0%, 100% { transform: scale(.72); } 50% { transform: scale(1.18); } }
.e-tag__st { display: block; min-width: 0; overflow: hidden; text-overflow: clip; }
.e-tag__st > span { display: inline-block; white-space: pre; }
.e-tag__st > span.is-f { animation: e-flip .52s var(--sp-snap, var(--ease-out)) both; animation-delay: var(--fd, 0s); }
@keyframes e-flip { from { opacity: 0; transform: perspective(60px) rotateX(-86deg); } 30% { opacity: 1; } to { opacity: 1; transform: perspective(60px) rotateX(0deg); } }

/* write-in lines */
.e-tag__k { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font: 400 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--graphite); white-space: nowrap; }
.e-tag__w { position: relative; display: block; height: 36px; margin: 4px 0 0; clip-path: inset(-26px 0 -14px -8px); }
.e-tag__w::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px dotted color-mix(in srgb, var(--film) 42%, transparent); }
.e-tag__hand { position: absolute; left: 0; bottom: 3px; white-space: pre; font: 400 30px/1 var(--f-hand); color: var(--e-ink); transform: scale(var(--fit, 1)); transform-origin: 0 85%; transition: transform .6s var(--sp-soft, var(--ease-out)); }
.e-tag__hand > span { display: inline-block; }
.e-tag__hand > span.is-new { animation: e-ink .46s var(--sp-quick, var(--ease-out)) both; animation-delay: var(--cd, 0s); }
@keyframes e-ink { from { opacity: 0; transform: translate3d(0, -.2em, 0) scale(1.55) rotate(var(--cr, -8deg)); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
.e-tag__hint { position: absolute; left: 1px; bottom: 4px; font: 400 25px/1 var(--f-hand); color: color-mix(in srgb, var(--graphite) 74%, transparent); white-space: nowrap; transform-origin: 0 100%; transition: opacity .25s var(--ease-out), transform .55s var(--sp-glide, var(--ease-out)); }
.e-tag__ln.is-typed .e-tag__hint { opacity: 0; transform: translate3d(16px, -6px, 0) rotate(-3deg) scale(.9); }
.e-tag__q { position: absolute; right: 2px; bottom: -1px; font: 400 34px/1 var(--f-hand); color: var(--marker); transform: scale(0) rotate(-24deg); transition: transform .3s var(--ease-out); }
.e-tag__ln.is-bad .e-tag__q { transform: scale(1) rotate(7deg); transition: transform .62s var(--sp-bouncy, var(--ease-out)); }
.e-tag__path { height: 13px; margin: 3px 0 0; font: 400 11px/13px var(--f-mono); letter-spacing: .03em; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-tag__ln--mail { margin-top: 8px; }
.e-tag__ln--mail .e-tag__w { height: 27px; }
.e-tag__ln--mail .e-tag__hand { font-size: 21px; }
.e-tag__ln--mail .e-tag__hint { font-size: 19px; }
.e-tag__ln--mail .e-tag__q { font-size: 26px; }
.e-tag__for { display: flex; align-items: center; gap: 7px; margin: 11px 0 0; font: 400 11px/1 var(--f-mono); letter-spacing: .08em; color: var(--graphite); white-space: nowrap; }
.e-tag__o { display: inline-flex; align-items: center; gap: 5px; color: var(--film); }
.e-tag__o + .e-tag__o { margin-left: 3px; }

/* the punch: a printed slot; a line you get right is punched through it */
.e-tag__slot { position: relative; flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--film) 44%, transparent); }
.e-tag__hole { position: absolute; inset: 2px; border-radius: 50%; background: color-mix(in oklab, var(--silver) 76%, var(--film)); box-shadow: inset 0 1.6px 1.6px color-mix(in srgb, var(--film) 55%, transparent), 0 .6px 0 #FFFFFF; transform: scale(0); transition: transform .22s var(--ease-out); }
.e-tag__slot.is-p .e-tag__hole { transform: scale(1); }
.e-tag__chad { position: absolute; z-index: 6; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--e-card); box-shadow: 0 1px 1.5px color-mix(in srgb, var(--film) 38%, transparent); pointer-events: none; }

/* the lab's date stamp (on send) */
.e-tag__stamp { position: absolute !important; z-index: 3 !important; right: 0; bottom: 2px; width: 128px; height: auto; overflow: visible; color: var(--marker); opacity: 0; transform: rotate(-8deg); mix-blend-mode: multiply; pointer-events: none; }
.e-tag.is-sent .e-tag__stamp { opacity: .94; }
.e-tag__so { fill: none; stroke: currentColor; stroke-width: 4; }
.e-tag__si { fill: none; stroke: currentColor; stroke-width: 1.6; }
.e-tag__sb { fill: currentColor; font: 600 31px var(--f-sans); letter-spacing: .02em; }
.e-tag__sd { fill: currentColor; font: 400 17.5px var(--f-mono); letter-spacing: .06em; }

/* the clerk's pencil (its tip is the point the script moves) */
.e-tag__pencil { position: absolute; z-index: 7; left: 0; top: 0; display: none; width: 8px; height: 50px; margin: -50px 0 0 -4px; transform-origin: 50% 100%; pointer-events: none; }
.e-tag.is-on .e-tag__pencil { display: block; }
.e-tag.is-on.is-sent:not(.is-mo) .e-tag__pencil { display: none; }
.e-tag.is-mo .e-tag__pencil { will-change: transform; }
.e-tag__pencil svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(2px 3px 2px color-mix(in srgb, var(--film) 28%, transparent)); }
.e-tag__pe { fill: var(--frost); }
.e-tag__pf { fill: #B8BCC1; }
.e-tag__pl { fill: none; stroke: #868B91; stroke-width: .5; }
.e-tag__pb { fill: var(--film); }
.e-tag__ph { fill: #FFFFFF; opacity: .16; }
.e-tag__pw { fill: #D8D6CF; }
.e-tag__pg { fill: #2B2E33; }

/* your half: the blue stub (the page you will see live), the other half of the perforation on its left edge */
.e-tag__sface {
  position: relative; height: 100%; padding: 12px 10px 13px 13px; border-radius: 0 6px 6px 0; overflow: hidden;
  background:
    radial-gradient(120% 75% at 100% 112%, color-mix(in srgb, var(--g-glow) 46%, transparent), transparent 64%),
    linear-gradient(color-mix(in srgb, var(--g-glow) 8%, transparent) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, color-mix(in srgb, var(--g-glow) 8%, transparent) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(170deg, color-mix(in oklab, var(--g-lav) 55%, var(--print)), color-mix(in oklab, var(--g-lav) 90%, var(--frost)));
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 2.3px, #000 2.8px) 0 0 / 100% 9px repeat-y;
  mask: radial-gradient(circle at 0 50%, transparent 2.3px, #000 2.8px) 0 0 / 100% 9px repeat-y;
}
.e-tag__sk { margin: 0 0 11px; font: 400 11px/1 var(--f-mono); letter-spacing: .1em; color: color-mix(in oklab, var(--night) 76%, var(--g-glow)); white-space: nowrap; }
.e-tag__run { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.e-tag__run li { display: grid; gap: 3px; }
.e-tag__run li.sr-only { position: absolute; }
.e-tag__run b { font: 400 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in oklab, var(--g-glow) 62%, var(--night)); }
.e-tag__run span { position: relative; justify-self: start; font: 500 15px/1.2 var(--f-sans); letter-spacing: -.012em; color: var(--film); white-space: nowrap; }
.e-tag__live { position: relative; display: inline-block; width: 8px; height: 8px; margin-left: 7px; vertical-align: 1px; border-radius: 50%; background: var(--g-glow); box-shadow: 0 0 0 2px var(--print), 0 0 12px 2px color-mix(in srgb, var(--g-glow) 75%, transparent); }
.e-tag__live::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--g-glow) 80%, transparent); opacity: 0; }
.e-tag.is-mo .e-tag__live::after { animation: e-ping 2.6s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes e-ping { 0% { opacity: .9; transform: scale(.4); } 70%, 100% { opacity: 0; transform: scale(1.7); } }
/* on send, the next stop gets underlined (a wipe: the window and the stroke slide against each other) */
.e-tag__ul { position: absolute; left: -2px; right: -3px; bottom: -6px; height: 8px; overflow: hidden; transform: translate3d(-101%, 0, 0); }
.e-tag__ul > i { display: block; height: 100%; transform: translate3d(101%, 0, 0); }
.e-tag__ul svg { display: block; width: 100%; height: 100%; overflow: visible; }
.e-tag__ul path { fill: none; stroke: var(--marker); stroke-width: 2.4px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.e-tag.is-sent .e-tag__ul, .e-tag.is-sent .e-tag__ul > i { transform: none; }
/* the stub, torn off and yours (resting state; the script springs it there) */
.e-tag.is-sent .e-tag__stub { transform: translate3d(12px, 9px, 0) rotate(3.4deg); }

/* touch: tapping the tag starts the form */
.e-tag.is-on:not(.is-sent) .e-tag__main { cursor: text; -webkit-tap-highlight-color: transparent; }

/* ─── small phones (375): the longest status still fits beside the pin ─── */
@media (max-width: 389px) { .e-tag__top { letter-spacing: .05em; gap: 6px; } }

/* ─── tablet ─── */
@media (min-width: 640px) {
  .e-tag { --e-px: 22px; --e-py: 22px; max-width: 600px; }
  .e-tag__face { padding: 16px 18px 18px 20px; clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px); }
  .e-tag__top { margin: 2px 0 16px 22px; }
  .e-tag__w { height: 46px; }
  .e-tag__hand { font-size: 40px; }
  .e-tag__hint { font-size: 32px; }
  .e-tag__q { font-size: 42px; }
  .e-tag__ln--mail { margin-top: 12px; }
  .e-tag__ln--mail .e-tag__w { height: 32px; }
  .e-tag__ln--mail .e-tag__hand { font-size: 26px; }
  .e-tag__ln--mail .e-tag__hint { font-size: 23px; }
  .e-tag__for { margin-top: 15px; gap: 9px; }
  .e-tag__sface { padding: 16px 14px 18px 18px; }
  .e-tag__sk { margin-bottom: 16px; }
  .e-tag__run { gap: 12px; }
  .e-tag__run li { gap: 4px; }
  .e-tag__run span { font-size: 17px; }
  .e-tag__stamp { width: 148px; right: 12px; bottom: 12px; }
}

/* ─── desktop: the tag hangs under the headline, the envelope on the right ─── */
@media (min-width: 1000px) {
  .e-tag { grid-area: s; --e-px: 24px; --e-py: 24px; --e-tilt: -2deg; max-width: 720px; margin: 64px 0 0 -6px; }
  .e-tag__swing { grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); }
  .e-tag__face { padding: 20px 22px 22px 26px; clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px); }
  .e-tag__top { margin: 2px 0 22px 26px; }
  .e-tag__w { height: 56px; }
  .e-tag__hand { font-size: 50px; }
  .e-tag__hint { font-size: 38px; }
  .e-tag__q { font-size: 52px; }
  .e-tag__path { margin-top: 5px; }
  .e-tag__ln--mail { margin-top: 16px; }
  .e-tag__ln--mail .e-tag__w { height: 37px; }
  .e-tag__ln--mail .e-tag__hand { font-size: 31px; }
  .e-tag__ln--mail .e-tag__hint { font-size: 27px; }
  .e-tag__ln--mail .e-tag__q { font-size: 34px; }
  .e-tag__for { margin-top: 19px; gap: 10px; }
  .e-tag__sface { padding: 20px 18px 22px 22px; }
  .e-tag__sk { margin-bottom: 20px; }
  .e-tag__run { gap: 16px; }
  .e-tag__run li { gap: 5px; }
  .e-tag__run span { font-size: 19px; }
  .e-tag__stamp { width: 172px; right: 16px; bottom: 14px; }
  .e-tag__pencil { width: 11px; height: 70px; margin: -70px 0 0 -5.5px; }
  .e-tag__pin { width: 18px; height: 18px; left: calc(var(--e-px) - 9px); top: calc(var(--e-py) - 10px); }
  .e-tag__ring { left: calc(var(--e-px) - 12px); top: calc(var(--e-py) - 12px); width: 24px; height: 24px; background: radial-gradient(circle, transparent 0 6.2px, color-mix(in oklab, var(--frost) 52%, var(--print)) 6.6px 11px, transparent 11.5px); }
  .e-tag__face {
    -webkit-mask: radial-gradient(circle at var(--e-px) var(--e-py), transparent 5.6px, #000 6.1px), radial-gradient(circle at 100% 50%, transparent 2.6px, #000 3.1px) 0 0 / 100% 10px repeat-y;
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle at var(--e-px) var(--e-py), transparent 5.6px, #000 6.1px), radial-gradient(circle at 100% 50%, transparent 2.6px, #000 3.1px) 0 0 / 100% 10px repeat-y;
    mask-composite: intersect;
  }
  .e-tag__sface { -webkit-mask: radial-gradient(circle at 0 50%, transparent 2.6px, #000 3.1px) 0 0 / 100% 10px repeat-y; mask: radial-gradient(circle at 0 50%, transparent 2.6px, #000 3.1px) 0 0 / 100% 10px repeat-y; }
  .e-tag.is-sent .e-tag__stub { transform: translate3d(18px, 12px, 0) rotate(3deg); }
}

/* ─── reduced motion and ?static: the resting state, nothing moves ─── */
@media (prefers-reduced-motion: reduce) {
  .e-tag *, .e-tag *::after { animation: none !important; transition: none !important; }
}
.is-static .e-tag *, .is-static .e-tag *::after { animation: none !important; transition: none !important; }