/* panduka-work — matches the site theme.
   Tokens from the live design system:
   bg #111112 · text #C2C2C2 / #FFF · coral #F45858 · burnt #CB360F · gold #D6A431
   Fonts (loaded by the theme): Satoshi (UI), Playfair Display (editorial), Instrument Serif (display). */

/* The theme injects its own "Reels" page-title band (an Elementor template that varies
   per breakpoint) above our templates — a duplicate H1. Scoped to body.pk-work-route:
   this stylesheet also loads on pages using [pk_reel_strip], where the theme's own
   pxl headings must stay visible. */
body.pk-work-route .elementor-5836 { display: none; }
body.pk-work-route .pxl-wapper .elementor:has(.pxl-item--title) { display: none; }

/* [pk_reel_strip] — auto-playing reel row for Elementor pages (dark sections). */
.pk-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1100px) { .pk-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .pk-strip { grid-template-columns: repeat(2, 1fr); } }
.pk-strip__item { display: block; text-decoration: none; }
.pk-strip .pk-tile__media { display: block; aspect-ratio: 9 / 16; background: #1B1B1D; overflow: hidden; border-radius: 6px; }
.pk-strip .pk-tile__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pk-strip__caption { display: flex; gap: 10px; align-items: baseline; padding-top: 12px; }
.pk-strip__num { font-family: 'Instrument Serif', serif; font-style: italic; color: #CB360F; font-size: 16px; }
.pk-strip__title { font-family: 'Satoshi', 'Inter', sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #FFFFFF; }
.pk-strip__item:hover .pk-strip__title { color: #F45858; }
.pk-strip__cta { margin: 28px 0 0; }
.pk-strip__cta a { font-family: 'Satoshi', 'Inter', sans-serif; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #FFFFFF; text-decoration: none; border-bottom: 1px solid #F45858; padding-bottom: 4px; }
.pk-strip__cta a:hover { color: #F45858; }

.pk-work {
    background: #111112; color: #C2C2C2;
    font-family: 'Satoshi', 'Inter', sans-serif;
    font-size: 16px; line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
.pk-work a { color: inherit; text-decoration: none; }
.pk-micro { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #7A7A7A; }
.pk-micro a { border-bottom: 1px solid #333; }
.pk-micro a:hover { color: #F45858; }
.pk-eyebrow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #F45858; margin: 0 0 1rem; font-family: 'Satoshi', 'Inter', sans-serif; }

.pk-intro { padding: clamp(48px, 9vh, 110px) clamp(20px, 5vw, 72px) 36px; max-width: 980px; }
.pk-intro__title {
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: clamp(52px, 8vw, 110px); line-height: .98; letter-spacing: .01em;
    margin: 0 0 1.25rem; color: #FFFFFF;
}
.pk-intro__lede { max-width: 52ch; color: #C2C2C2; margin: 0; font-family: 'Playfair Display', serif; font-size: 19px; line-height: 1.7; }
.pk-intro__lede a { color: #F45858; }
.pk-filter { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 22px; }
.pk-filter a { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #7A7A7A; padding-bottom: 4px; border-bottom: 1px solid transparent; }
.pk-filter a.is-current, .pk-filter a:hover { color: #FFFFFF; border-bottom-color: #F45858; }

/* Masonry wall: CSS columns keep intrinsic aspect ratios. */
.pk-wall { padding: 24px clamp(20px, 5vw, 72px) 96px; column-count: 3; column-gap: 26px; }
@media (max-width: 1100px) { .pk-wall { column-count: 2; } }
@media (max-width: 640px)  { .pk-wall { column-count: 1; } }
.pk-tile { display: block; break-inside: avoid; margin: 0 0 42px; }
.pk-tile__media { display: block; background: #1B1B1D; overflow: hidden; border-radius: 6px; }
.pk-tile__media video { display: block; width: 100%; height: auto; object-fit: cover; }
.pk-tile--portrait .pk-tile__media { aspect-ratio: 9 / 16; }
.pk-tile--landscape .pk-tile__media { aspect-ratio: 16 / 9; }
.pk-tile--portrait video, .pk-tile--landscape video { height: 100%; }
.pk-tile__caption { display: flex; gap: 14px; align-items: baseline; padding-top: 14px; }
.pk-tile__num { font-family: 'Instrument Serif', serif; font-style: italic; color: #CB360F; font-size: 17px; }
.pk-tile__title { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: #FFFFFF; font-weight: 500; }
.pk-tile__meta { font-size: 12px; color: #7A7A7A; margin-left: auto; text-align: right; }
.pk-tile:hover .pk-tile__title { color: #F45858; }

/* Single reel */
.pk-reel { display: grid; gap: clamp(28px, 4.5vw, 72px); padding: clamp(36px, 7vh, 80px) clamp(20px, 5vw, 72px) 96px; align-items: start; }
.pk-reel--portrait { grid-template-columns: minmax(280px, 430px) 1fr; }
.pk-reel--landscape { grid-template-columns: 1fr; max-width: 1240px; }
@media (max-width: 820px) { .pk-reel--portrait { grid-template-columns: 1fr; } }
.pk-reel__stage video { width: 100%; height: auto; display: block; background: #000; border-radius: 8px; }
.pk-reel__title {
    font-family: 'Instrument Serif', serif; font-weight: 400;
    font-size: clamp(44px, 6vw, 84px); line-height: 1; margin: 0 0 .75rem; color: #FFFFFF;
}
.pk-reel__meta { color: #D6A431; margin: 0 0 1.5rem; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.pk-reel__body { max-width: 56ch; color: #C2C2C2; font-family: 'Playfair Display', serif; font-size: 18px; line-height: 1.75; }
.pk-reel__body a { color: #F45858; }
.pk-reel__credits { margin-top: 1.75rem; }
.pk-reel__nav { display: flex; gap: 30px; margin-top: 3rem; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #7A7A7A; }
.pk-reel__nav a:hover { color: #F45858; }