/* Portfolio inherits the existing site's theme tokens. Artwork is typographic, not a video thumbnail. */
.portfolio-section { margin: 38px 0 48px; }
.portfolio-head { margin-bottom: 24px; }
.portfolio-eyebrow { color: var(--green); font-size: 11px; letter-spacing: .2em; font-weight: 800; }
.portfolio-title { font-family: var(--font-display); font-size: clamp(30px, 6vw, 48px); line-height: 1.2; margin: 12px 0; }
.portfolio-intro, .portfolio-credits { color: rgb(var(--text-rgb) / .65); line-height: 1.65; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.portfolio-card { min-width: 0; border: 1px solid rgb(var(--text-rgb) / .15); background: rgb(var(--card-base-rgb, 3 16 10) / .85); border-radius: 20px; overflow: hidden; }
.portfolio-visual { aspect-ratio: 16/10; position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 30% 35%,rgb(var(--green-rgb) / .35),transparent 64%),#07100d; color: var(--green); }
.portfolio-visual-1 { background: repeating-linear-gradient(130deg,transparent 0 35px,rgb(var(--green-rgb) / .12) 36px 37px),#07100d; }
.portfolio-visual-2 { background: radial-gradient(ellipse at 70% 80%,rgb(var(--yellow-rgb) / .27),transparent 70%),#07100d; color: var(--yellow); }
.portfolio-visual-3 { background: repeating-radial-gradient(circle at 70% 60%,transparent 0 19px,rgb(var(--green-rgb) / .1) 20px 21px),#07100d; }
.portfolio-number { position: absolute; top: 16px; inset-inline-start: 18px; font: 12px/1.2 monospace; letter-spacing: .1em; }
.portfolio-glyph { font: 100px/1 Georgia,serif; opacity: .85; }
.portfolio-info { padding: 22px; }
.portfolio-artist { min-height: 1.4em; font-size: 12px; margin: 0 0 8px; color: rgb(var(--text-rgb) / .65); overflow-wrap: anywhere; }
.portfolio-work-title { margin: 0 0 18px; font-family: var(--font-display); font-size: 26px; line-height: 1.3; overflow-wrap: anywhere; white-space: pre-line; }
.portfolio-watch { font-family: var(--font-display); display: inline-block; padding: 10px 14px; border: 1px solid rgb(var(--green-rgb) / .6); border-radius: 8px; color: var(--green); font-weight: 700; }
.portfolio-watch:hover { background: rgb(var(--green-rgb) / .1); }
.portfolio-watch:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.portfolio-credits { margin-bottom: 0; font-size: 12px; white-space: pre-line; overflow-wrap: anywhere; }

@media (max-width: 540px) { .portfolio-grid { grid-template-columns: 1fr; } .portfolio-info { padding: 18px; } }
.portfolio-credits-summary { cursor: pointer; font-weight: 700; padding: 12px 0; color: rgb(var(--text-rgb) / .85); }
.portfolio-credits-text { margin: 0 0 8px; white-space: pre-line; }
.portfolio-credit-source { display: inline-block; color: var(--green); padding: 10px 0; }
.portfolio-credit-source:focus-visible, .portfolio-credits-summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.portfolio-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; color: #fff; background: transparent; }
.portfolio-poster { width: 100%; height: 100%; display: block; object-fit: cover; }
.portfolio-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: rgb(0 0 0 / .75); font-size: 24px; }
.portfolio-play:focus-visible { outline: 4px solid var(--green); outline-offset: -5px; }
.portfolio-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.portfolio-player-close { position: absolute; bottom: 8px; inset-inline-end: 8px; z-index: 2; border: 1px solid #fff; border-radius: 6px; padding: 7px 10px; color: #fff; background: #111; cursor: pointer; }