.projects-page{min-block-size:100dvh;padding-block:var(--s-8) var(--s-12);padding-inline:var(--site-shell-padding);background:var(--play-ink-dark)}.projects-header{max-inline-size:72ch;margin-block-end:var(--s-7)}.projects-marker{font-family:var(--font-mono);font-size:var(--f-minus-3);letter-spacing:.2em;color:var(--play-accent-gold);border:1px solid var(--play-accent-gold);margin-block-end:var(--s-3);padding-block:.15em;padding-inline:.6em;font-weight:600;display:inline-block}.projects-title{font-family:var(--font-serif);font-size:clamp(var(--f-4), 5vw, var(--f-6));letter-spacing:-.03em;color:var(--play-paper-soft);margin:0 0 var(--s-3) 0;line-height:1.05}.projects-description{font-family:var(--font-sans);font-size:var(--f-0);color:color-mix(in srgb, var(--play-paper-soft) 60%, transparent);line-height:1.6}.projects-grid{gap:var(--s-5);grid-template-columns:repeat(3,1fr);display:grid}.project-reel-card{background:var(--play-ink-surface);border:1px solid color-mix(in srgb, var(--play-paper-soft) 10%, transparent);transition:transform var(--motion-duration-m) var(--motion-ease-flow), border-color var(--motion-duration-m) var(--motion-ease-flow), box-shadow var(--motion-duration-m) var(--motion-ease-flow);border-radius:2px;position:relative;overflow:hidden}.project-reel-card:hover{z-index:2;transform:translateY(-4px)rotate(0)!important}.project-reel-card:focus-within{outline:2px solid var(--play-accent-gold);outline-offset:2px}.project-reel-card--gold{border-color:color-mix(in srgb, var(--play-accent-gold) 32%, var(--play-ink-dark))}.project-reel-card--gold:hover{border-color:var(--play-accent-gold);box-shadow:0 8px 32px color-mix(in srgb, var(--play-accent-gold) 15%, transparent)}.project-reel-card--rose{border-color:color-mix(in srgb, var(--play-accent-rose) 32%, var(--play-ink-dark))}.project-reel-card--rose:hover{border-color:var(--play-accent-rose);box-shadow:0 8px 32px color-mix(in srgb, var(--play-accent-rose) 15%, transparent)}.project-reel-card--teal{border-color:color-mix(in srgb, var(--play-accent-teal) 32%, var(--play-ink-dark))}.project-reel-card--teal:hover{border-color:var(--play-accent-teal);box-shadow:0 8px 32px color-mix(in srgb, var(--play-accent-teal) 15%, transparent)}.project-reel-card:nth-child(3n+1){transform:rotate(-.6deg)}.project-reel-card:nth-child(3n+2){transform:rotate(.4deg)}.project-reel-card:nth-child(3n+3){transform:rotate(-.2deg)}.project-reel-card__link{color:inherit;flex-direction:column;text-decoration:none;display:flex}.project-reel-card__media{aspect-ratio:16/10;background:var(--play-ink-dark);position:relative;overflow:hidden}.project-reel-card__media img{object-fit:cover;width:100%;height:100%;transition:transform var(--motion-duration-m) var(--motion-ease-flow);display:block}.project-reel-card:hover .project-reel-card__media img{transform:scale(1.05)}.project-reel-card__overlay{background:linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--play-ink-dark) 85%, transparent) 100%);pointer-events:none;position:absolute;inset:0}.project-reel-card__meta{padding:var(--s-3) var(--s-3) var(--s-4);gap:var(--s-1);flex-direction:column;display:flex}.project-reel-card__number{font-family:var(--font-mono);font-size:var(--f-minus-3);letter-spacing:.15em;color:color-mix(in srgb, var(--play-paper-soft) 40%, transparent);font-weight:500}.project-reel-card__title{font-family:var(--font-serif);font-size:var(--f-1);letter-spacing:-.02em;color:var(--play-paper-soft);margin:0;font-weight:700;line-height:1.2}.project-reel-card__subtitle{font-family:var(--font-sans);font-size:var(--f-minus-1);color:color-mix(in srgb, var(--play-paper-soft) 55%, transparent);margin:0;line-height:1.4}.project-reel-card__status{font-family:var(--font-mono);font-size:var(--f-minus-3);letter-spacing:.12em;color:color-mix(in srgb, var(--play-paper-soft) 35%, transparent);margin-block-start:var(--s-1);font-weight:500}.project-reel-card--gold .project-reel-card__number{color:var(--play-accent-gold)}.project-reel-card--rose .project-reel-card__number{color:var(--play-accent-rose)}.project-reel-card--teal .project-reel-card__number{color:var(--play-accent-teal)}@media (width<=1024px){.projects-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=640px){.projects-grid{grid-template-columns:1fr}.project-reel-card:nth-child(n){transform:none}}@media (width>=1440px){.projects-grid{gap:var(--s-6)}}@media (prefers-reduced-motion:reduce){.project-reel-card,.project-reel-card__media img{transition:none}.project-reel-card:nth-child(n){transform:none}}
