/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5
 * Motion X team credentials: original HTML/CSS implementation inspired by the user-selected Lanyard Pass. */
#team { scroll-margin-top:80px; }
.mx-pass-hint { margin:22px auto 0; text-align:center; color:var(--color-ink-2); font-size:14px; }
.mx-pass-keyboard { display:block; margin-top:6px; color:var(--color-muted); font-size:12px; }
.mx-team-passes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 24px; margin-top:32px; }
.mx-team-pass { min-width:0; }
.mx-pass-stage { position:relative; height:460px; perspective:1000px; overflow:clip; border-top:1px solid var(--color-rule); }
.mx-pass-cord { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; fill:none; stroke-linecap:butt; }
.mx-cord-edge { stroke:var(--color-button-edge); stroke-width:21; }
.mx-cord-fabric { stroke:var(--color-accent); stroke-width:17; }
.mx-cord-stitch { stroke:var(--color-accent-text); stroke-width:1; stroke-dasharray:2 3; }
.mx-pass-anchor { position:absolute; top:-4px; left:calc(50% - 7px); width:14px; height:8px; border-radius:3px; background:var(--color-pass-metal); }
.mx-pass-card { position:absolute; width:min(254px,calc(100% - 50px)); height:328px; top:108px; left:50%; margin:0; padding:0; border:0; border-radius:14px; background:transparent; color:var(--color-ink); text-align:left; font:inherit; transform:translateX(-50%); transform-origin:50% 0; transform-style:preserve-3d; cursor:grab; touch-action:pan-y; -webkit-tap-highlight-color:transparent; user-select:none; }
.mx-pass-card[data-dragging="true"] { cursor:grabbing; }
.mx-pass-card:focus-visible { outline:3px solid var(--color-focus); outline-offset:7px; }
.mx-pass-clip { position:absolute; top:-19px; left:calc(50% - 21px); width:42px; height:25px; border:3px solid var(--color-pass-metal); border-radius:5px; background:var(--color-surface-raised); box-shadow:inset 0 2px var(--color-ink-2); transform:translateZ(2px); }
.mx-pass-body { position:absolute; inset:0; display:block; transform-style:preserve-3d; transform:rotateY(var(--pass-flip,0deg)); }
.mx-pass-face { position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; border:5px solid var(--color-pass-rim); border-radius:12px; background:var(--color-surface); backface-visibility:hidden; box-shadow:0 14px 26px var(--color-overlay),inset 0 0 0 1px var(--color-pass-metal); }
.mx-pass-face::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:7px; background:linear-gradient(115deg,transparent 18%,var(--color-pass-gloss) 34%,transparent 48%,transparent 83%,var(--color-pass-gloss)); }
.mx-pass-brand { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; padding:12px 13px 10px; font-size:12px; font-weight:700; letter-spacing:.11em; color:var(--color-ink); border-bottom:1px solid var(--color-rule); }
.mx-pass-brand > span { font-size:8px; letter-spacing:.17em; color:var(--color-ink-2); }
.mx-pass-photo { display:block; height:167px; margin:9px 9px 0; overflow:hidden; border-radius:3px; background:var(--color-surface-raised); }
.mx-pass-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 46%; pointer-events:none; }
.mx-pass-identity { display:block; padding:12px 12px 8px; flex:1; }
.mx-pass-name { display:block; font-size:22px; font-weight:600; letter-spacing:-.035em; line-height:1.15; }
.mx-pass-role { display:block; font-size:11px; line-height:1.45; margin-top:4px; color:var(--color-ink-2); }
.mx-pass-strip { display:flex; justify-content:space-between; align-items:center; min-height:25px; padding:5px 10px; gap:4px; background:var(--color-accent); color:var(--color-accent-ink); font-size:6px; letter-spacing:.07em; }
.mx-pass-strip > span:last-child { white-space:nowrap; font:9px var(--font-mono); }
.mx-pass-back { transform:rotateY(180deg); padding:0 12px 16px; }
.mx-pass-back .mx-pass-brand { padding-inline:0; }
.mx-pass-back-title { position:relative; margin:14px 0; font-size:31px; line-height:1; font-weight:600; letter-spacing:-.04em; }
.mx-pass-back-title > span { position:absolute; top:0; right:0; color:var(--color-accent-text); font-size:44px; font-family:var(--font-mono); }
.mx-pass-back .mx-pass-name { font-size:18px; }
.mx-pass-skills { display:flex; flex-wrap:wrap; gap:5px; margin-top:13px; }
.mx-pass-skills > span { padding:4px 7px; border:1px solid var(--color-rule); border-radius:4px; font-size:10px; color:var(--color-ink-2); }
.mx-pass-back-note { display:block; margin-top:auto; padding-top:12px; font-size:10px; line-height:1.5; color:var(--color-muted); }
.mx-pass-caption { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:15px 5px; border-bottom:1px solid var(--color-rule); }
.mx-pass-caption h3 { font-size:14px; color:var(--color-ink); font-weight:600; }
.mx-pass-caption a,.mx-pass-caption > span { font-size:12px; color:var(--color-accent-text); white-space:nowrap; }
.mx-pass-caption > span { color:var(--color-muted); }
.mx-pass-caption a { min-height:44px; display:inline-flex; align-items:center; gap:7px; }
.mx-pass-caption a:hover { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:1000px) { .mx-team-passes { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .mx-team-passes { grid-template-columns:minmax(0,1fr); gap:24px; max-width:390px; margin-inline:auto; } .mx-pass-stage { height:450px; } .mx-pass-keyboard { display:none; } }
@media(prefers-reduced-motion:reduce) { .mx-pass-card { cursor:pointer; } .mx-pass-keyboard { display:none; } }