/*! pedromujica core 1.2.0 · pm-cards.css */
/* PMCards look. Each site maps its tokens onto these custom properties:
   --pmc-card-bg / --pmc-card-ink   card colours
   --pmc-card-font                  card label font (shorthand)
   --pmc-bg, --pmc-ink, --pmc-grey, --pmc-grey-2, --pmc-rule, --pmc-accent
   --pmc-display, --pmc-text, --pmc-mono   font families
   --pmc-left, --pmc-top            where the pin box sits */
.pmc-layer { position: fixed; inset: 0; pointer-events: none; z-index: 45; overflow: hidden; }
.pmc-card {
  position: absolute; left: 0; top: 0; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: grab; will-change: transform; white-space: nowrap;
  font: var(--pmc-card-font, 700 11px/1 var(--pmc-display, "Helvetica Neue", Arial, sans-serif)); letter-spacing: .32em; text-transform: uppercase;
  background: var(--pmc-card-bg, #111); color: var(--pmc-card-ink, #fff); padding: 8px 28px 8px 31px;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45);
  transition: opacity .35s cubic-bezier(.2, .7, .1, 1);
}
.pmc-card.is-grab { cursor: grabbing; box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .55); }
.pmc-card.is-out { opacity: 0; }
@media (max-width: 600px) { .pmc-card { font-size: 10px; padding: 7px 22px 7px 25px; } }
.pmc-card.is-pinned { cursor: default; box-shadow: none; }

/* Pin box (top-left) + sheet of the last pinned project. */
.pmc-dock { position: fixed; left: var(--pmc-left, 24px); top: var(--pmc-top, 22px); z-index: 44; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; pointer-events: none; opacity: 0; transform: translateY(-6px); transition: opacity .45s cubic-bezier(.2, .7, .1, 1), transform .45s cubic-bezier(.2, .7, .1, 1); }
.pmc-dock.is-on { opacity: 1; transform: none; }
.pmc-box { position: relative; width: 220px; height: 43px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--pmc-grey-2, #a6a6a0); background: var(--pmc-bg, #f7f7f5); transition: width .45s cubic-bezier(.2, .7, .1, 1), height .45s cubic-bezier(.2, .7, .1, 1), border-color .25s; }
.pmc-box.is-hot { border-style: solid; border-color: var(--pmc-accent, #d3201b); }
.pmc-dock.is-full .pmc-box { border-style: solid; border-color: var(--pmc-rule, #dededa); }
.pmc-hint { font: 400 10px/1 var(--pmc-mono, ui-monospace, Menlo, Consolas, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--pmc-grey, #777); white-space: nowrap; transition: opacity .2s; }
.pmc-dock.is-full .pmc-hint { opacity: 0; }
.pmc-x { position: absolute; top: -14px; right: -14px; width: 24px; height: 24px; border: 0; border-radius: 50%; padding: 0; background: var(--pmc-ink, #111); color: var(--pmc-bg, #f7f7f5); font: 400 16px/1 var(--pmc-display, Arial, sans-serif); cursor: pointer; pointer-events: auto; display: flex; align-items: center; justify-content: center; transition: transform .25s cubic-bezier(.2, .7, .1, 1); }
.pmc-x[hidden] { display: none; }
.pmc-x:hover { transform: scale(1.12); }
.pmc-info { pointer-events: auto; width: min(340px, calc(100vw - 2 * var(--pmc-left, 24px))); background: var(--pmc-bg, #f7f7f5); }
.pmc-info:empty { display: none; }
.pmc-info.is-in { animation: pmc-in .55s cubic-bezier(.2, .7, .1, 1) both; }
@keyframes pmc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pmc-info::before { content: ""; display: block; width: 46px; height: 4px; background: var(--pmc-accent, #d3201b); margin-bottom: 16px; }
.pmc-meta { font: 400 11px/1.45 var(--pmc-mono, ui-monospace, Menlo, Consolas, monospace); color: var(--pmc-grey, #777); margin: 0 0 10px; }
.pmc-title { font: var(--pmc-title-font, 700 24px/1.06 var(--pmc-display, Arial, sans-serif)); letter-spacing: -.02em; margin: 0 0 12px; color: var(--pmc-ink, #111); }
.pmc-desc { font: 400 14px/1.5 var(--pmc-text, Arial, sans-serif); margin: 0 0 8px; color: var(--pmc-ink, #111); }
.pmc-areas { font: 400 11px/1.5 var(--pmc-mono, ui-monospace, Menlo, Consolas, monospace); color: var(--pmc-grey, #777); margin: 0 0 16px; }
.pmc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pmc-btn, .pmc-link { font: var(--pmc-btn-font, 700 10px/1 var(--pmc-display, Arial, sans-serif)); letter-spacing: .18em; text-transform: uppercase; padding: 11px 14px; border: 1px solid var(--pmc-ink, #111); background: transparent; color: var(--pmc-ink, #111); cursor: pointer; text-decoration: none; transition: background .2s, color .2s; }
.pmc-btn { background: var(--pmc-ink, #111); color: var(--pmc-bg, #f7f7f5); }
.pmc-btn:hover { background: var(--pmc-accent, #d3201b); border-color: var(--pmc-accent, #d3201b); color: #fff; }
.pmc-link:hover { background: var(--pmc-ink, #111); color: var(--pmc-bg, #f7f7f5); }
@media (max-width: 600px) { .pmc-title { font-size: 20px; } .pmc-desc { font-size: 13px; } }

/* Video popup (never a new tab). */
.pmc-vm { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 56px 24px 24px; background: rgba(8, 8, 8, .88); }
.pmc-vm.is-open { display: flex; }
.pmc-vm-in { width: min(1040px, 100%); }
.pmc-vm video { display: block; width: 100%; max-height: 76vh; background: #000; }
.pmc-vm-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 12px; color: #f2f1ec; font: 400 12px/1.4 var(--pmc-mono, ui-monospace, Menlo, Consolas, monospace); }
.pmc-vm-chips { display: flex; gap: 6px; }
.pmc-vm-chips button { width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, .45); background: transparent; color: #f2f1ec; font: 400 11px/1 var(--pmc-mono, ui-monospace, Menlo, Consolas, monospace); cursor: pointer; }
.pmc-vm-chips button.is-on, .pmc-vm-chips button:hover { background: #f2f1ec; color: #111; }
.pmc-vm-x { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: transparent; color: #f2f1ec; font: 400 20px/1 var(--pmc-display, Arial, sans-serif); cursor: pointer; }
.pmc-vm-x:hover { background: #f2f1ec; color: #111; }