/* Inline editorial links, and one small after-hours world. */
.vertical-portfolio .intro-copy { max-width: none; }
.vertical-portfolio .intro-conversation { margin-top: 12px; }
.intro-note { position: relative; display: inline; padding: 0 2px 2px; color: var(--ink); font: inherit; font-weight: 500; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--ink) 65%, transparent); background: linear-gradient(color-mix(in srgb, #d7b76b 32%, transparent), color-mix(in srgb, #d7b76b 32%, transparent)) no-repeat 0 100% / 100% 0; transition: background-size 220ms cubic-bezier(.2,.8,.2,1), text-decoration-color 220ms ease; }
.intro-note:hover, .intro-note:focus-visible { background-size: 100% 100%; text-decoration-color: var(--ink); }
.intro-note:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.vertical-portfolio .filter-check { flex-basis: 8px; width: 8px; height: 8px; box-sizing: border-box; }
.vertical-portfolio [aria-pressed="false"] .filter-check { transform: none; opacity: 1; }
.vertical-portfolio .portfolio-filters button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

.maker { --maker-paper: var(--color-canvas); --maker-accent: #c9845f; display: block; width: 100%; height: 100%; overflow: visible; color: var(--ink); }
.filter-easter { position: fixed; z-index: 45; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); color: var(--ink); pointer-events: none; }
.filter-easter[hidden] { display: none; }
.filter-easter svg { width: 64px; height: 74px; flex-shrink: 0; animation: maker-arrive 520ms cubic-bezier(.2,.8,.2,1) both; }
.filter-easter p { margin: 0; max-width: 185px; padding: 5px 0; font-size: 12px; line-height: 1.6; text-wrap: balance; background: transparent; box-shadow: none; animation: caption-arrive 240ms 180ms ease both; }
.maker-head { transform-origin: 47px 54px; }
.maker-eyes { transform-origin: 46px 39px; }
.maker-hand { transform-origin: 60px 63px; }
.filter-easter .maker-head { animation: maker-look 2.4s 380ms ease-in-out both; }
.filter-easter .maker-eyes { animation: maker-blink 3s 600ms linear both; }
.filter-easter[data-category="build"] .maker-hand { animation: maker-present 1.5s 500ms ease-in-out both; }
.filter-easter[data-category="contribute"] .maker-steam { animation: maker-steam 1.5s 500ms ease-in-out 2; }
.filter-easter[data-category="dreamed"] .maker-head { animation: maker-sigh 2s 500ms ease both; }
@keyframes maker-arrive { 0% { opacity: 0; transform: translateY(12px) scale(.9); } 55% { opacity: 1; transform: translateY(-3px) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes caption-arrive { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@keyframes maker-look { 35%,65% { transform: rotate(-7deg); } }
@keyframes maker-blink { 25%,29%,76%,80% { transform: scaleY(1); } 27%,78% { transform: scaleY(.1); } }
@keyframes maker-present { 40%,65% { transform: rotate(-12deg); } }
@keyframes maker-steam { 70% { opacity: 0; transform: translateY(-6px); } }
@keyframes maker-sigh { 45% { transform: translateY(2px) rotate(8deg); } }

.vertical-portfolio .portfolio-filter-bar:has(~ .portfolio-empty:not([hidden])) { margin-bottom: 0; }
.vertical-portfolio .portfolio-empty { gap: 22px; padding-top: 24px; }
.vertical-portfolio .portfolio-empty .show-projects { flex-shrink: 0; color: var(--muted); }
.paper-playground { --play-ink: #292c27; --play-paper: #f6f3e9; --play-muted: #b2b09c; width: min(100%, 800px); align-self: center; border: 1px solid #d8d5c7; border-radius: 12px; background: #ebeadd; box-shadow: 0 12px 40px -30px rgba(45,40,25,.3), inset 0 1px 0 #faf9f2; overflow: hidden; }
.paper-game-topline, .paper-game-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 23px 30px; }
.paper-kicker { display: block; margin-bottom: 6px; font-size: 9px; letter-spacing: .16em; color: #818570; }
.paper-game-topline h3 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.025em; color: var(--play-ink); }
.paper-score { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #d0d2bf; border-radius: 20px; color: #6b725d; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.paper-score::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #8a9775; }
.paper-score.is-hit { animation: score-hit 480ms ease; }
.paper-scene { position: relative; margin: 0 17px; background: linear-gradient(180deg, transparent 91%, rgba(140,147,116,.07)); }
.paper-game { display: block; width: 100%; height: clamp(290px, 42vw, 330px); cursor: grab; touch-action: none; }
.paper-game:active { cursor: grabbing; }
.paper-game:focus-visible { outline: 1px dashed #92977f; outline-offset: -5px; border-radius: 6px; }
.game-maker { position: absolute; width: 80px; height: 96px; pointer-events: none; }
.game-maker .maker { --maker-paper: var(--play-paper); color: var(--play-ink); }
.game-maker.is-throwing .maker-hand { animation: maker-throw 400ms cubic-bezier(.2,.8,.2,1); }
.game-maker.is-celebrating .maker-person { transform-origin: 48px 110px; animation: maker-cheer 620ms ease; }
.paper-basket-label { position: absolute; width: 130px; font-size: 10px; color: #818570; text-align: center; pointer-events: none; transform: rotate(-3deg); }
.paper-game-footer { position: relative; padding-top: 12px; padding-bottom: 4px; }
.paper-game-footer::before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; border-top: 1px solid #d5d6c5; }
.vertical-portfolio .portfolio-empty .paper-feedback { color: var(--play-ink); font-size: 12px; }
.vertical-portfolio .portfolio-empty .paper-reset { min-height: 38px; padding: 0; color: #818570; font-size: 11px; text-decoration: none; }
.vertical-portfolio .portfolio-empty .paper-reset:hover { color: var(--play-ink); text-decoration: underline; }
.vertical-portfolio .portfolio-empty .paper-instructions { padding: 0 30px 20px; font-size: 10px; line-height: 1.7; color: #818570; }
@keyframes maker-throw { 40% { transform: rotate(-28deg); } }
@keyframes maker-cheer { 30% { transform: translateY(-8px) rotate(-3deg); } 60% { transform: translateY(0) scale(1.03,.96); } }
@keyframes score-hit { 50% { background: #d6dec4; transform: scale(1.04); } }
:root[data-theme="dark"] .paper-playground { --play-ink: #e4e5d6; --play-paper: #353b30; --play-muted: #59634d; background: #292f26; border-color: #414a39; box-shadow: inset 0 1px 0 #3c4334; }
:root[data-theme="dark"] .paper-score { color: #afb89d; border-color: #525c45; }
:root[data-theme="dark"] .paper-game-footer::before { border-color: #414a39; }
:root[data-theme="dark"] .paper-kicker, :root[data-theme="dark"] .paper-basket-label, :root[data-theme="dark"] .portfolio-empty .paper-instructions, :root[data-theme="dark"] .portfolio-empty .paper-reset { color: #a0ab8e; }
@media (max-width: 600px) {
 .vertical-portfolio .intro-copy { font-size: 14px; }
 .paper-game-topline { padding: 20px 17px 16px; }
 .paper-game-topline h3 { font-size: 17px; }
 .paper-game-topline, .paper-game-footer { gap: 8px; }
 .paper-game-footer { padding-left: 17px; padding-right: 17px; }
 .paper-game-footer::before { left: 17px; right: 17px; }
 .paper-scene { margin: 0 7px; }
 .vertical-portfolio .portfolio-empty .paper-instructions { padding-left: 17px; padding-right: 17px; }
 .filter-easter svg { width: 55px; height: 64px; }
 .filter-easter p { max-width: 170px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
 .intro-note { transition: none; }
 .filter-easter svg, .filter-easter p, .filter-easter .maker-head, .filter-easter .maker-hand, .filter-easter .maker-eyes, .filter-easter .maker-steam, .game-maker .maker-person, .game-maker .maker-hand, .paper-score.is-hit { animation: none; }
}