/* Printed business cards; these rules do not alter the shared popups. */
@font-face {
  font-family: 'Card Inter'; src: url('fonts/vendor/inter/InterVariable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
.recent { max-width: 900px; margin-top: 100px; padding: 0 24px 72px; }
.recent > .recent-heading { font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; font-size: clamp(24px,4.8vw,56px); letter-spacing: .02em; text-transform: none; color: #eee9ff; margin-bottom: 38px; transform: rotate(-3deg); }
.recent > .recent-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 34px 38px; align-items: start; }
.recent .recent-item {
  --card: #e8e5d9; --ink: #232e36; --tilt: -2deg;
  --card-font: 'Card Inter', Arial, sans-serif;
  container-type: inline-size; aspect-ratio: 1.7;
  display: block; min-width: 0; padding: 0; border: 0;
  background: var(--card); color: var(--ink); transform: rotate(var(--tilt));
  box-shadow: 0 1px 0 #fff7 inset, 1px 1px 0 #dfd9cc, 2px 3px 0 #625e59, 2px 7px 10px #0008, 0 15px 25px #0005;
  border-radius: 1px; overflow: hidden; isolation: isolate;
}
.recent .recent-item::before, .recent .recent-item::after { display: none; }
.recent .recent-item:not(:has(> .card-face)) { aspect-ratio: auto; min-height: 220px; padding: 45px 24px 85px; }
.recent .recent-item:hover { transform: rotate(var(--tilt)) translateY(-3px); box-shadow: 0 1px 0 #fff7 inset, 1px 1px 0 #dfd9cc, 2px 3px 0 #625e59, 2px 10px 16px #0009, 0 20px 30px #0005; }
.recent .card-face {
  position: absolute; inset: 0; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(30px,10cqw,40px) clamp(17px,6cqw,25px) 68px;
  background: var(--card); isolation: isolate;
}
.recent .card-face::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('icons/paper-texture.webp') center / 340px;
  mix-blend-mode: multiply; opacity: .48;
}
.recent .card-face[hidden] { display: none; }
.recent .recent-num { position: absolute; top: clamp(13px,4.5cqw,18px); right: clamp(17px,6cqw,25px); min-width: 0; font-family: var(--card-font); font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .1em; color: inherit; }
.recent .recent-body { gap: clamp(6px,2.3cqw,10px); }
.recent .recent-where { order: -1; color: inherit; font-family: Arial,sans-serif; font-size: clamp(23px,7.6cqw,31px); font-weight: 700; line-height: 1.06; letter-spacing: -.035em; }
.recent .recent-where small { display: block; font-size: clamp(12px,3.8cqw,15px); line-height: 1.2; letter-spacing: .01em; font-weight: 400; margin-top: 4px; }
.recent .recent-role { color: inherit; font-family: var(--card-font); font-size: clamp(11px,3cqw,12px); font-weight: 400; letter-spacing: 0; line-height: 1.35; text-transform: none; }
.recent .recent-note { color: inherit; font-family: var(--card-font); font-size: 12px; line-height: 1.55; letter-spacing: 0; }
.recent .card-front .recent-note { font-size: clamp(11px,3cqw,12px); line-height: 1.35; margin-top: 0; }
.recent .card-footer {
  position: absolute; z-index: 1; left: clamp(17px,6cqw,25px); right: clamp(17px,6cqw,25px); bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px;
  border-top: 1px solid color-mix(in srgb,var(--ink) 32%,transparent);
  font-family: var(--card-font); line-height: 1.3; letter-spacing: 0;
}
.recent .card-date { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.recent .card-flip { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 4px 0 4px 8px; color: inherit; background: transparent; border: 0; font: 500 12px var(--card-font); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.recent .card-fold { position: relative; display: block; width: 26px; height: 22px; perspective: 120px; }
.recent .card-fold::before, .recent .card-fold::after { content: ''; position: absolute; transition: transform .18s ease; }
.recent .card-fold::before { inset: 1px 1px 2px; background: #f4eee7 url('icons/paper-texture.webp') center / 100px; border: 1px solid #25232a; clip-path: polygon(0 0,65% 0,100% 40%,100% 100%,0 100%); transform: rotate(-9deg); }
.recent .card-fold::after { width: 8px; height: 8px; top: 0; right: 3px; background: #bdb8b0; border: solid #25232a; border-width: 0 0 1px 1px; clip-path: polygon(0 0,100% 100%,0 100%); transform: rotate(-9deg); transform-origin: bottom left; }
.recent .card-flip:is(:hover, :focus-visible) .card-fold::before { transform: rotate(-16deg) rotateY(-28deg); }
.recent .card-flip:is(:hover, :focus-visible) .card-fold::after { transform: rotate(-16deg) rotateY(-48deg); }
.recent .card-flip[aria-expanded="true"] .card-fold { scale: -1 1; }
.recent .card-flip:focus-visible, .recent .recent-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.recent .card-back { bottom: 52px; justify-content: flex-start; gap: 12px; padding: 20px 22px 14px; overflow-y: auto; scrollbar-width: thin; }
.recent .card-back-title { font: 600 17px/1.2 var(--card-font); padding-bottom: 10px; border-bottom: 1px solid currentColor; flex: none; }
.recent .card-back .recent-note { flex: none; }
.recent .recent-link { color: inherit; border-bottom: 1px solid currentColor; }
.recent .recent-link:hover { opacity: .7; }
.recent .card-xlab { --card: #fbf9f8; --ink: #211e1c; --xlab-red: #8c0600; }
.recent .card-xlab .card-face::before { opacity: .12; }
.recent .card-xlab .recent-where { font-family: var(--card-font); font-weight: 650; letter-spacing: -.04em; }
.recent .card-xlab .recent-where small { font-family: var(--card-font); color: #645e5a; font-weight: 450; letter-spacing: 0; }
.recent .card-xlab .recent-role { color: var(--xlab-red); }
.recent .card-xlab .card-footer {
  left: 0; right: 0; bottom: 0; border: 0;
  padding: 0 clamp(17px,6cqw,25px); background: var(--xlab-red); color: #fffafa;
}
.recent .card-xlab .card-back { gap: 8px; padding-top: 16px; }
.recent .card-xlab .card-back-title { font-size: clamp(14px,4.2cqw,17px); }
.recent .card-tedx { --card: #171619; --ink: #f4eee7; --tilt: 2.3deg; margin-top: 30px; }
.recent .card-tedx .card-face { border-left: 5px solid #e93832; }
.recent .card-tedx .recent-where { color: #f24b43; font-size: clamp(27px,9cqw,37px); font-weight: 800; letter-spacing: -.06em; }
.recent .card-tedx .recent-where small { color: #f4eee7; font-family: Arial,sans-serif; letter-spacing: .005em; }
.recent .card-cambria { --card: #c2d4ef; --ink: #243770; --tilt: 1.5deg; margin: -6px 8px 0; }
.recent .card-cambria .recent-where { font-family: Georgia,serif; font-weight: 400; letter-spacing: .065em; }
.recent .card-stanford { --card: #f1ede3; --ink: #702c37; --tilt: -1.5deg; margin: 22px 0 0 4px; }
.recent .card-stanford .card-face { border-top: 4px solid #702c37; }
.recent .card-stanford .recent-where { font-family: Georgia,serif; font-weight: 400; font-size: clamp(25px,8cqw,33px); letter-spacing: -.025em; }
.recent .recent-plans { margin: 0 0 34px 12px; }
.recent .recent-plans-summary { width: fit-content; }
.recent .recent-plans-label { font-family: 'Handwriting',cursive; font-size: 30px; letter-spacing: .02em; text-transform: none; color: #b5e5eb; }
.recent .recent-plans .recent-list { max-width: 404px; padding: 18px 8px; }
.recent .recent-item.is-next { opacity: 1; --card: #e2d6e7; --ink: #4f315b; --tilt: -1deg; }
@media (max-width:700px) {
  .recent { padding: 0 8px 60px; margin-top: 80px; }
  .recent > .recent-list { grid-template-columns: minmax(0,404px); justify-content: center; gap: 28px; }
  .recent > .recent-list > .recent-item { width: 100%; margin: 0; }
  .recent .recent-plans .recent-list { max-width: 404px; padding-inline: 0; }
}
@media (prefers-reduced-motion:reduce) { .recent, .recent .recent-item, .recent .card-fold::before, .recent .card-fold::after { animation:none; transition:none; } }