/* About-only object. Edit the paper, ink and accent tokens to recolor it. */
.about-page .about-grid:has(.id-badge-stage){display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.8fr);column-gap:70px;align-items:start}
.about-page .about-grid:has(.id-badge-stage)>h1{grid-column:1;margin-top:40px}
.about-page .about-grid:has(.id-badge-stage)>.about-bio{grid-column:1}
.id-badge-stage{--badge-paper:#f0efec;--badge-ink:#17191b;--badge-coral:#e88977;--badge-purple:#8572b9;grid-column:2;grid-row:1 / span 2;position:relative;display:flex;flex-direction:column;align-items:center;perspective:1200px;font-size:16px;padding:0 20px 20px;isolation:isolate}
.id-badge-stage::before{content:"";position:absolute;inset:80px -10% 20px;z-index:-1;background:radial-gradient(ellipse,#b1b2bf0c,transparent 65%);pointer-events:none}
.id-badge-hang{position:relative;padding-top:106px;transform-origin:50% 0;transform-style:preserve-3d;will-change:transform}
.id-badge-strap{position:absolute;top:0;left:50%;width:56px;height:125px;transform:translateX(-50%) translateZ(8px);background:repeating-linear-gradient(92deg,#ffffff18 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,#00000012 0 2px,#ffffff16 2px 3px,transparent 3px 5px),#A5E000;border-inline:2px solid #74b600;box-shadow:inset 3px 0 3px #47700099, inset -3px 0 2px #47700099,4px 4px 12px #0008;z-index:4}
.id-badge-strap::after{content:'PEOPLE / PRODUCTS / BRANDS';position:absolute;left:17px;top:10px;writing-mode:vertical-rl;font:500 7px/1.2 Inter,sans-serif;letter-spacing:2px;color:#b8b8b5;white-space:nowrap}
.id-badge-clip{position:absolute;top:101px;left:50%;transform:translateX(-50%) translateZ(16px);width:70px;height:57px;border:2px solid #a1a3a3;border-radius:9px 9px 12px 12px;background:linear-gradient(90deg,#313335,#e5e5de 4%,#454749 9%,#101113 18%,#27292a 70%,#77797a 92%,#d4d5d1 96%,#353637);box-shadow:0 3px 4px #000a,inset 0 1px 1px white;z-index:5;pointer-events:none}
.id-badge-clip::before{content:"";position:absolute;inset:3px 6px 10px;border-radius:3px 3px 6px 6px;background:linear-gradient(#1c1e20,#070809 60%,#424446 63%,#151719 72%);box-shadow:inset 0 -1px 0 #a4a6a7}
.id-badge-clip::after{content:"";position:absolute;bottom:3px;left:7px;right:7px;height:3px;border-radius:5px;background:linear-gradient(90deg,#888,#eee,#747779)}
.id-badge-button{position:relative;display:block;width:20em;height:28.6em;appearance:none;border:0;padding:0;background:none;color:var(--badge-ink);cursor:default;touch-action:pan-y;text-align:left;font:inherit;perspective:1200px;-webkit-tap-highlight-color:transparent;outline-offset:12px;border-radius:17px}
.id-badge-flipper{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.id-badge-face{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:17px;border:1px solid #ddd9;box-shadow:0 1px 0 #fff9,inset 0 0 0 2px #1118,inset 0 0 0 3px #d9dfdd66,inset 0 0 0 5px #ffffff10,0 25px 40px -14px #000c;background:linear-gradient(125deg,#ffffff29,#ffffff03 38%,#ffffff10 82%,#fff5);padding:22px 22px 9px;transform:translateZ(2px)}
.id-badge-back{transform:rotateY(180deg) translateZ(2px)}
.id-badge-paper{position:relative;height:100%;display:flex;flex-direction:column;padding:25px 24px 20px;overflow:hidden;border-radius:10px;background:linear-gradient(120deg,#fff8,transparent 55%),var(--badge-paper);box-shadow:0 1px 4px #0005;color:var(--badge-ink)}
.id-badge-face::after{content:"";position:absolute;inset:3px;border-radius:14px;pointer-events:none;background:linear-gradient(115deg,transparent 15%,#fff2 24%,transparent 37%,transparent 78%,#fff1 86%,transparent),radial-gradient(ellipse at var(--shine-x,25%) var(--shine-y,15%),#ffffff26,transparent 55%);box-shadow:inset 1px 0 1px #fff8,inset -1px 0 1px #fffa;mix-blend-mode:screen}
.id-badge-kicker{display:flex;justify-content:space-between;gap:20px;font-size:.62em;letter-spacing:.13em;line-height:1.6;font-weight:400;color:#646665}
.id-badge-kicker span:last-child{padding-top:8px;border-top:1px solid #686968}
.id-badge-monogram{font-size:6.8em;line-height:1;font-weight:600;letter-spacing:-.075em;margin:28px 0 21px;color:#d0d1cd;user-select:none}
.id-badge-name{display:block;font-size:2.05em;line-height:1.03;letter-spacing:-.05em;font-weight:650}
.id-badge-title{display:block;margin-top:9px;font-size:.88em;line-height:1.4;letter-spacing:-.015em;color:#646665}
.id-badge-bottom{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-top:auto;padding-top:24px;font-size:.51em;line-height:1.65;letter-spacing:.19em}
.id-badge-bottom svg{width:29px;height:29px;flex-shrink:0}
.id-badge-back .id-badge-paper{background:#1b1c20;color:#f5f4ef}
.id-badge-orbit{position:absolute;width:330px;height:330px;right:-173px;top:65px;border-radius:50%;background:radial-gradient(circle at 22% 13%,var(--badge-coral),#843f58 40%,#41334f 65%,var(--badge-purple));box-shadow:inset 1px 1px 2px #ffc6b9aa,0 0 65px #bd706520;opacity:.8}
.id-badge-back .id-badge-kicker{position:relative;color:#ddd;letter-spacing:.23em}
.id-badge-message{position:relative;font-size:2.1em;font-weight:500;line-height:1.12;letter-spacing:-.05em;margin-top:60px;max-width:210px}
.id-badge-back .id-badge-bottom{position:relative;display:block;border-top:1px solid #ffffff45;padding-top:14px;margin-top:auto}
.id-badge-back .id-badge-bottom strong{display:block;font-size:1.45em;font-weight:500;letter-spacing:0;margin-bottom:8px}
.id-badge-hint{font:400 11px/1.5 Inter,sans-serif!important;color:var(--muted);letter-spacing:.04em;margin:26px 0 0!important;display:flex;align-items:center;gap:8px}
.id-badge-hint svg{width:14px;height:14px}
@media(max-width:1100px){.about-page .about-grid:has(.id-badge-stage){column-gap:32px;grid-template-columns:minmax(0,1fr) 330px}.id-badge-stage{font-size:14px;padding-inline:0}}
@media(max-width:800px){.about-page .about-grid:has(.id-badge-stage){display:block}.about-page .about-grid:has(.id-badge-stage)>h1{margin-top:0}.id-badge-stage{margin-top:38px;font-size:clamp(12px,4vw,16px)}.id-badge-hang{padding-top:90px}.id-badge-strap{height:109px}.id-badge-clip{top:85px}}
@media(prefers-reduced-motion:reduce){.id-badge-hang,.id-badge-flipper{will-change:auto}}
/* Keep the introduction together while the object spans both text rows. */
.about-page .about-grid:has(.id-badge-stage){grid-template-rows:min-content 1fr;row-gap:0}
.about-page .about-grid:has(.id-badge-stage)>.about-bio{margin-top:10px}
.id-badge-strap{overflow:hidden}
@media(max-width:800px){.id-badge-stage::before{left:0;right:0}}

/* The unprinted fabric continues to the page's top edge. */
.id-badge-strap{top:calc(-1 * var(--badge-page-offset,0px));height:calc(125px + var(--badge-page-offset,0px))}
.id-badge-strap::after{content:none}
@media(max-width:800px){.id-badge-strap{height:calc(109px + var(--badge-page-offset,0px))}}

/* Polished clear acrylic: layered bevels, narrow highlights and moving gloss. */
.id-badge-face{
 border-color:#e5eeeed9;
 background:linear-gradient(130deg,#c5d4df24 0%,#d9eeff08 18%,#ffffff02 46%,#c5d4df12 86%,#d9e3ea30 100%);
 box-shadow:inset 0 0 0 1px #ffffffb0,inset 0 0 0 3px #171d218c,inset 0 0 0 4px #f0faff80,inset 0 0 0 7px #a3bdc41a,0 1px 1px #fff9,1px 3px 2px #0009,0 28px 42px -14px #000d;
}
.id-badge-face::before{content:"";position:absolute;inset:6px;border:1px solid #e7f8ff66;border-radius:12px;pointer-events:none;z-index:2;box-shadow:inset 1px 1px 2px #fff8,inset -1px -1px 2px #0006}
.id-badge-face::after{
 z-index:3;
 background:radial-gradient(ellipse at var(--shine-x,25%) var(--shine-y,15%),#b9cedc20,transparent 62%);
 box-shadow:inset 2px 1px 1px #ffffffe0,inset -2px -1px 1px #ffffffa0;
 opacity:.72;
}
/* Fine directional brushing over a curved, machined steel surface. */
.id-badge-clip{
 border-color:#aeb4b7;
 background:repeating-linear-gradient(0deg,#ffffff0c 0px,#ffffff0c .5px,#00000012 .5px,#00000012 1px,transparent 1px,transparent 2px),linear-gradient(90deg,#4b5358 0%,#eff3f5 3%,#9ba4aa 6%,#384146 12%,#b8c1c5 22%,#eceff1 37%,#8d979e 58%,#4a545c 78%,#d6dfe2 91%,#fff 96%,#69747c 100%);
 box-shadow:0 1px 0 #fff,0 3px 3px #000b,0 7px 10px #0007,inset 0 1px 1px #fff,inset 0 -2px 2px #1b242a;
}
.id-badge-clip::before{
 inset:4px 6px 10px;
 border:1px solid #2a343b;
 background:repeating-linear-gradient(0deg,#ffffff14 0px,#ffffff14 .5px,#0000000a .5px,#0000000a 1px,transparent 1px,transparent 2px),linear-gradient(175deg,#c4cbcf 0%,#718087 5%,#414e55 14%,#26333b 42%,#697780 72%,#d6dfe2 78%,#f7f8f8 82%,#66747d 87%,#27343c 100%);
 box-shadow:inset 0 1px 1px #f4fbff, inset 1px 0 2px #1a232a99,inset -1px 0 1px #ffffff70,0 1px 1px #fff8;
}
.id-badge-clip::after{height:4px;bottom:3px;background:linear-gradient(#f5f7f8,#818e96 40%,#34424b 55%,#ced7db);box-shadow:0 1px 1px #17232d}

/* A smaller badge suspended from the two sides of a neck lanyard. */
.id-badge-hang{zoom:.81}
.id-badge-strap{transform-origin:50% 100%;transform:translateX(-50%) translateZ(8px) rotate(9deg)}
.id-badge-strap-return{position:absolute;top:calc(-1 * var(--badge-page-offset,0px) - 20px);left:50%;width:56px;height:calc(145px + var(--badge-page-offset,0px));transform-origin:50% 100%;transform:translateX(-50%) translateZ(-1px) rotate(-10deg);background:repeating-linear-gradient(92deg,#ffffff18 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,#00000012 0 2px,#ffffff16 2px 3px,transparent 3px 5px),#A5E000;border-inline:2px solid #74b600;box-shadow:inset 3px 0 3px #47700099,inset -3px 0 2px #47700099,4px 4px 12px #0008;z-index:3;pointer-events:none;filter:brightness(.78)}
@media(max-width:800px){.id-badge-strap-return{height:calc(129px + var(--badge-page-offset,0px))}}

/* Figma 2937:20608 exported as one proportional card face. */
.id-badge-button{width:calc(20em + 26px);height:calc(20em * 583 / 320);aspect-ratio:auto}
.id-badge-front .id-badge-figma-paper{padding:0;background:#111214;transform:rotate(1deg) scale(.96);transform-origin:center}
.id-badge-artwork{display:block;width:100%;height:100%;object-fit:contain;flex:none}

/* Extra fabric above the page keeps both straps continuous as they settle. */
.id-badge-strap,.id-badge-strap-return{top:calc(-1 * var(--badge-page-offset,0px) - 120px);height:calc(245px + var(--badge-page-offset,0px));will-change:transform}
@media(max-width:800px){.id-badge-strap,.id-badge-strap-return{height:calc(229px + var(--badge-page-offset,0px))}}

/* Stack the badge before the introduction on tablet and mobile. */
@media(max-width:1100px){
 .about-page .about-grid:has(.id-badge-stage){display:flex;flex-direction:column;align-items:stretch;gap:0}
 .id-badge-stage{order:-1;margin:0 0 28px;padding-bottom:20px}
 .id-badge-hang{zoom:.54675}
 .about-page .about-grid:has(.id-badge-stage)>h1{margin:0;position:relative;z-index:1}
 .about-page .about-grid:has(.id-badge-stage)>.about-bio{margin-top:10px}
}