/* Clear plastic holder: crisp transmission, no frosted blur or noise. */
.badge-page{--badge-glare-max:.28}
.badge-page .badge{border:1px solid rgba(77,79,75,.36);border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.12));color:#20211f;box-shadow:var(--badge-shadow,inset 1px 1px 0 rgba(255,255,255,.98),inset -1px -1px 0 rgba(65,67,63,.12),0 2px 0 rgba(93,95,90,.18),0 30px 46px -28px rgba(28,29,27,.34));backdrop-filter:none;-webkit-backdrop-filter:none;cursor:grab;user-select:none;touch-action:pan-y;--shine-x:50%;--shine-y:35%}
.badge-page .badge::before{content:'';position:absolute;inset:4px;z-index:0;border:1px solid rgba(255,255,255,.82);border-radius:12px;background:linear-gradient(115deg,rgba(255,255,255,.1),transparent 42% 82%,rgba(35,36,34,.03));box-shadow:inset 0 0 4px rgba(255,255,255,.68);transform:translateZ(-2px);pointer-events:none}
.badge-page .badge::after{content:'';position:absolute;inset:0;z-index:11;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at var(--shine-x) var(--shine-y),rgba(255,255,255,.26),transparent 48%),linear-gradient(105deg,rgba(255,255,255,.2),transparent 18% 82%,rgba(55,56,53,.045));transform:translateZ(1px)}
.badge-page .badge-insert{position:absolute;inset:25px 17px 15px;z-index:1;border:1px solid rgba(64,65,62,.13);border-radius:7px;background:rgba(255,255,255,.965);box-shadow:0 1px 1px rgba(255,255,255,.9),0 7px 16px rgba(25,26,24,.055);pointer-events:none;transform:translateZ(-.8px)}
.badge-page .badge-top,.badge-page .identity,.badge-page .experience,.badge-page .resume-story,.badge-page .badge-bottom{position:relative;z-index:2}.badge-page .badge-top{transform-style:preserve-3d}.badge-page .slot{z-index:3}
.badge-page .badge.is-dragging{cursor:grabbing}
.badge-page .badge.rotation-enabled{touch-action:none}
.badge-page .slot{height:5px;background:#e4e4e0;border:1px solid #747570;box-shadow:inset 0 1px 1px #22222226}
.badge-page .portrait-layer{z-index:4;border:1px solid #5d5e5a;border-radius:3px;box-shadow:0 5px 12px rgba(24,25,23,.12);transform:translateZ(7px);will-change:transform}
.badge-page .id-meta{padding:0;gap:10px;justify-content:flex-start}
.badge-page .status{display:block;border:1px solid #5d5e5a;padding:5px 6px;color:#20211f;font:7px/1.4 ui-monospace,monospace;letter-spacing:.5px;align-self:flex-start}
.badge-page .manifesto{font:25px/.98 Newsreader,Georgia,serif;letter-spacing:-.7px;margin:3px 0 0}
.badge-page .loop{font-size:8px;line-height:1.6;letter-spacing:.4px;margin:0;color:#6e6f6b}
.badge-page .id-meta>.micro{font-size:6px;margin-top:auto;line-height:1.5}
.badge-page .experience{border-top:1px solid #666762}
.badge-page .experience>p,.badge-page .badge .micro{color:#6e6f6b}
.badge-page .experience-row{grid-template-columns:75px 1fr 12px;min-height:52px;border-bottom:1px solid #d0d1cc;gap:8px;padding:9px 0}
.badge-page .ink-tags{display:flex;flex-wrap:wrap;gap:4px}
.badge-page .ink-tags>span{font:8px/1.5 ui-monospace,monospace;white-space:nowrap;border:1px solid #747570;border-radius:2px;padding:2px 5px;box-shadow:.5px .5px 0 #33333330}
.badge-page .experience-row:hover .ink-tags>span,.badge-page .experience-row[aria-expanded=true] .ink-tags>span{background:#e7e7e3;color:#20211f}
.badge-page .badge-bottom{margin-top:16px}
.badge-page .card-controls{display:flex;justify-content:center;gap:8px;margin-top:22px}
.badge-page .card-controls button{font:10px ui-monospace,monospace;min-height:44px;padding:8px 13px;border:1px solid #c4c8bb;background:transparent;border-radius:3px}
.badge-page .card-controls button[aria-pressed=true]{background:#2d3228;color:white;border-color:#2d3228}
.badge-page .interaction-hint{margin-top:9px;font-size:6px;line-height:1.8}
@media(max-width:800px){.badge-page .manifesto{font-size:24px}.badge-page .experience-row{grid-template-columns:73px 1fr 12px}.badge-page .ink-tags>span{font-size:7px}.badge-page .hero{gap:30px}}
/* Quiet hero: the identity card is the focal point, not a second column of copy. */
.badge-page .hero{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;gap:27px;padding:48px 22px 65px;min-height:calc(100svh - 94px)}
.badge-page .badge-stage{width:100%;max-width:375px}.badge-page .intro{width:100%;max-width:375px;padding:0;margin:0}
.badge-page .actions{flex-direction:row;gap:12px;max-width:none}.badge-page .actions .action{justify-content:center;padding:13px 14px;gap:12px;font-size:11px}
.badge-page .project-preview{position:relative;top:auto;margin-top:20px}
@media(max-width:800px){.badge-page .hero{min-height:calc(100svh - 75px);padding:30px 22px 85px;gap:24px}.badge-page .badge-stage,.badge-page .intro{max-width:345px}}
/* Keep the original split portrait/manifesto card; only integrate the résumé entry. */
.badge-page .identity-name{display:flex;align-items:center;justify-content:space-between;gap:10px}.badge-page .identity h1{white-space:nowrap}
.badge-page .resume-story{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;margin:6px 0 0;padding:7px 0;border:0;background:none;color:#20211f;text-align:left;font:16px/1.25 Newsreader,Georgia,serif;letter-spacing:-.15px}.badge-page .resume-story em{font-weight:400}.badge-page .resume-story-arrow{font:14px Inter,sans-serif;transition:transform .2s ease}.badge-page .resume-story:hover{color:#050505}.badge-page .resume-story:hover .resume-story-arrow,.badge-page .resume-story:focus-visible .resume-story-arrow{transform:translate(2px,-2px)}
@media(prefers-reduced-motion:reduce){.badge-page .resume-story-arrow{transition:none;transform:none!important}}
.badge-page .experience-row{grid-template-columns:88px minmax(0,1fr) 12px;gap:7px}.badge-page .company{display:flex;align-items:center;gap:5px;font-size:11px}.badge-page .company-logo{width:18px;height:18px;object-fit:contain;flex-shrink:0}
.badge-page .experience-row:hover{color:inherit}.badge-page .experience-row:hover .ink-tags>span{background:none;color:inherit}
@media(max-width:800px){.badge-page .ink-tags>span{padding:2px 3px;font-size:6.5px}}
/* Animate the outer wrapper so the interactive card transform remains independent. */
.badge-page .badge-perspective{animation:badge-settle 1.25s cubic-bezier(.22,.72,.24,1) both;transform-origin:50% 0}
@keyframes badge-settle{0%{opacity:0;transform:translateY(-78px) rotate(-2deg)}58%{opacity:1;transform:translateY(7px) rotate(.7deg)}80%{opacity:1;transform:translateY(-3px) rotate(-.2deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}
@media(max-width:380px){.badge-page .identity h1{font-size:35px}.badge-page .badge-top{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px}.badge-page .manifesto{font-size:22px}.badge-page .experience-row{grid-template-columns:84px minmax(0,1fr) 10px}}
@media(prefers-reduced-motion:reduce){.badge-page .badge{transform:var(--manual-transform,none)!important}.badge-page .badge-perspective{animation:none}}