/* =========================================================
   JZ Creates 2026 — shared layout for hand-coded work posts
   Replaces the Elementor bodies, one post at a time. A post opts in with
   post meta `_jzc_work_assets` = "work" (see jzc-work-assets.php), which
   loads this file after single.css and work.js in the footer.

   Type and colour come from the 2026 system: single.css already sets
   h2 section headings, gold h3 sub-headings, cream h4 values, h5 labels
   and muted paragraphs inside `.jzw .wbody`. This file adds layout only.
   Built from The Exit's bespoke layout (the-exit.css), generalised.
   ========================================================= */

.jzw .wbody .wk-page { --wk-gap: clamp(1rem, 2vw, 1.5rem); font-family: var(--font-body); color: var(--muted); }
.jzw .wbody .wk-page *, .jzw .wbody .wk-page *::before, .jzw .wbody .wk-page *::after { box-sizing: border-box; }

/* ---------- section rhythm + measure (matches the nav: 1600px, 5%) ---------- */
.wk-sec { padding: clamp(4.5rem, 9vw, 8rem) var(--pad); }
.wk-sec--alt { background: var(--bg-2); }
.wk-sec--tight { padding-top: clamp(2rem, 4vw, 3rem); }
.jzw .wbody .wk-page .wk-head { max-width: var(--maxw); margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.jzw .wbody .wk-page .wk-head h2 { margin: 0 auto; max-width: none; }
.jzw .wbody .wk-page .wk-head > p:not(.wk-eyebrow) { max-width: 62rem; margin: 1.4rem auto 0; }
.jzw .wbody .wk-page .wk-head > div { max-width: 62rem; margin: 1.4rem auto 0; }
.jzw .wbody .wk-page p { font-weight: 300; font-size: clamp(1.02rem, 1.15vw, 1.125rem); line-height: 1.7; margin: 0 0 1.1em; }
.jzw .wbody .wk-page p:last-child { margin-bottom: 0; }
.jzw .wbody .wk-page .wk-eyebrow { font-family: var(--font-body) !important; font-size: .78rem !important; font-weight: 600 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--muted) !important; margin: 0 0 1rem; }
.jzw .wbody .wk-page h2, .jzw .wbody .wk-page h2 * { text-transform: none !important; }
.jzw .wbody .wk-page .grad.jzc-lastword { padding-left: .12em !important; margin-left: -.12em !important; padding-right: .12em !important; }
.jzw .wbody .wk-page .wk-list { margin: 1.2rem 0 1.4rem !important; }

/* ---------- split: heading left, copy right ---------- */
.wk-split { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.wk-split--center { align-items: center; }
.jzw .wbody .wk-page .wk-split h2 { text-align: left !important; margin: 0 0 1.4rem; }
@media (max-width: 900px) { .wk-split { grid-template-columns: 1fr; } }

/* a split whose one side is a picture */
.jzw .wbody .wk-page .wk-split figure { margin: 0; border-radius: 16px; overflow: hidden; background: #000; }
.jzw .wbody .wk-page .wk-split figure img { display: block; width: 100%; height: auto; border-radius: 0; }
.wk-split--flip > :first-child { order: 2; }
@media (max-width: 900px) { .wk-split--flip > :first-child { order: 0; } }

/* ---------- project meta (Client / Platform / Services) + intro ---------- */
.wk-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; align-content: start; }
.wk-meta div { min-width: 0; }
.jzw .wbody .wk-page .wk-meta h4 { margin: .35rem 0 0; }
.wk-meta .wk-meta-wide { grid-column: 1 / -1; }
@media (max-width: 520px) { .wk-meta { grid-template-columns: 1fr; } }

/* ---------- cards ---------- */
.wk-cards { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.wk-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wk-head + .wk-cards, p + .wk-cards { margin-top: 0; }
@media (max-width: 1100px) { .wk-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .wk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wk-cards > .wk-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 640px) { .wk-cards, .wk-cards--4 { grid-template-columns: 1fr; } }
.wk-card { padding: 2.2rem 2rem 2.6rem; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); }
.jzw .wbody .wk-page .wk-card h3 { margin: 0 0 .7rem; }
.jzw .wbody .wk-page .wk-num { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .16em; color: var(--muted); margin-bottom: 1rem; }

/* ---------- film: a cover image + the shared gradient play button.
   The YouTube player is only built when someone presses play. ---------- */
.wk-film { position: relative; display: block; width: 100%; max-width: var(--maxw); margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; cursor: pointer; border: 0; padding: 0; }
.wk-film--vertical { aspect-ratio: 9 / 16; max-width: 420px; }
.jzw .wbody .wk-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 1.1s var(--ease-out), opacity .4s; }
.wk-film:hover img { transform: scale(1.03); }
.wk-film::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(12, 12, 14, 0) 40%, rgba(12, 12, 14, .45) 100%); pointer-events: none; }
.wk-play { position: absolute; z-index: 2; top: 50%; left: 50%; width: 84px; height: 84px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--grad); box-shadow: 0 10px 40px rgba(255, 36, 56, .35); transition: transform .4s var(--ease-out), box-shadow .4s; }
.wk-play::after { content: ""; position: absolute; top: 50%; left: 53%; transform: translate(-50%, -50%); border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.wk-film:hover .wk-play, .wk-film:focus-visible .wk-play { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 14px 50px rgba(255, 36, 56, .5); }
.wk-film--vertical .wk-play { width: 68px; height: 68px; }
.wk-film--vertical .wk-play::after { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }
.wk-film:focus-visible { outline: 2px solid var(--crimson); outline-offset: 4px; }
@media (max-width: 640px) { .wk-play { width: 64px; height: 64px; } .wk-play::after { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; } }
.jzw .wbody .wk-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }
.wk-film.is-playing { cursor: default; }
.wk-film.is-playing::after { display: none; }
.jzw .wbody .wk-page .wk-caption { text-align: center; margin: clamp(1.5rem, 3vw, 2.2rem) auto 0; font-family: var(--font-display) !important; font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--ink) !important; font-weight: 400; }

/* ---------- feature: a vertical film beside its copy and stills ---------- */
.wk-feature { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.wk-feature--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.wk-feature--flip > .wk-film { order: 2; }
.jzw .wbody .wk-page .wk-feature h2 { text-align: left !important; margin: 0 0 1.4rem; }
.wk-feature .wk-gallery { margin-top: clamp(1.8rem, 3vw, 2.4rem); }
@media (max-width: 900px) {
  .wk-feature, .wk-feature--flip { grid-template-columns: 1fr; }
  .wk-feature--flip > .wk-film { order: 0; }
  .wk-feature .wk-film--vertical { max-width: 360px; margin: 0 auto; width: 100%; }
}

/* ---------- galleries (every image opens in the lightbox) ---------- */
.wk-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wk-gap); max-width: var(--maxw); margin: 0 auto; }
.jzw .wbody .wk-gallery figure { margin: 0; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.jzw .wbody .wk-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 1s var(--ease-out); }
.wk-gallery figure:hover img { transform: scale(1.04); }
.jzw .wbody .wk-gallery figure a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.jzw .wbody .wk-gallery .is-wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.wk-gallery--tall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.jzw .wbody .wk-gallery--tall figure { aspect-ratio: 9 / 16; }
.wk-feature .wk-gallery--tall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wk-gallery--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* squares sit in centred rows, so an odd count never leaves a hole */
.wk-gallery--square { display: flex; flex-wrap: wrap; justify-content: center; }
.jzw .wbody .wk-gallery--square figure { flex: 0 0 calc((100% - 3 * var(--wk-gap)) / 4); }
.jzw .wbody .wk-gallery--square figure { aspect-ratio: 1 / 1; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015) 70%); border: 1px solid var(--line); }
.jzw .wbody .wk-gallery--square img { object-fit: contain; }
@media (max-width: 1100px) { .wk-gallery--tall { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wk-gallery--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .wk-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jzw .wbody .wk-gallery .is-wide { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
  .wk-gallery--tall, .wk-feature .wk-gallery--tall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jzw .wbody .wk-gallery--square figure { flex-basis: calc((100% - var(--wk-gap)) / 2); }
}

/* ---------- a pair of full-width sheets (character / look-dev) ---------- */
.wk-duo { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wk-gap); }
.jzw .wbody .wk-duo a { display: block; position: relative; border-radius: 16px; overflow: hidden; background: #000; cursor: zoom-in; }
.jzw .wbody .wk-duo img { display: block; width: 100%; height: auto; border-radius: 0; transition: transform 1.2s var(--ease-out); }
.wk-duo a:hover img { transform: scale(1.012); }
.wk-duo a::after { content: "Click to enlarge"; position: absolute; right: 1rem; bottom: 1rem; padding: .55em 1.1em; border-radius: 999px; font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: rgba(12, 12, 14, .8); color: var(--ink); opacity: 0; transition: opacity .3s ease; }
.wk-duo a:hover::after, .wk-duo a:focus-visible::after { opacity: 1; }
@media (max-width: 760px) { .wk-duo { grid-template-columns: 1fr; } }

/* ---------- full-screen fixed wallpapers (same technique as The Exit) ---------- */
.wk-wall { position: relative; height: 100vh; height: 100svh; min-height: 520px; clip-path: inset(0); -webkit-clip-path: inset(0); background: var(--bg); }
.jzw .wbody img.wk-wall-img { display: block; position: fixed; inset: 0; width: 100% !important; max-width: none !important; height: 100vh !important; height: 100lvh !important; object-fit: cover; object-position: center; border-radius: 0 !important; margin: 0; pointer-events: none; }
.wk-wall::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(12, 12, 14, .6) 0%, rgba(12, 12, 14, 0) 20%, rgba(12, 12, 14, 0) 72%, rgba(12, 12, 14, .7) 100%); }
.jzw .wbody .wk-wall .wk-wall-caption { position: absolute; z-index: 2; left: var(--pad); bottom: clamp(1.5rem, 4vw, 3rem); margin: 0; font-size: .78rem !important; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink) !important; }

/* ---------- centred closing note ---------- */
.wk-note { max-width: 46rem; margin: 0 auto; text-align: center; }

/* ---------- lightbox (appended to <body>, so not scoped to .wbody) ---------- */
.wk-lb { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(8, 8, 10, .94); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; font-family: var(--font-body, Inter, system-ui, sans-serif); }
.wk-lb.is-open { opacity: 1; visibility: visible; }
.wk-lb__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 94vw; }
.wk-lb__img { display: block; max-width: 94vw; max-height: 84vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); transform: scale(.98); transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; }
.wk-lb.is-open .wk-lb__img { transform: none; }
.wk-lb__img.is-loading { opacity: 0; }
.wk-lb__caption { display: flex; gap: 1.2rem; align-items: baseline; justify-content: center; color: #c0bbb2; font-size: .9rem; text-align: center; max-width: 80ch; padding: 0 4rem; }
.wk-lb__count { font-size: .75rem; font-weight: 600; letter-spacing: .16em; color: #f6f3ef; white-space: nowrap; }
.wk-lb__btn { position: absolute; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 999px; border: 1px solid rgba(246, 243, 239, .14); background: rgba(22, 22, 26, .7); color: #f6f3ef; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: border-color .3s, transform .3s cubic-bezier(.22, 1, .36, 1), background .3s; }
.wk-lb__btn:hover { border-color: rgba(214, 0, 237, .6); background: rgba(22, 22, 26, .95); }
.wk-lb__btn:focus-visible { outline: 2px solid #d600ed; outline-offset: 3px; }
.wk-lb__close { top: 1.2rem; right: 1.2rem; }
.wk-lb__prev { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.wk-lb__next { right: 1.2rem; top: 50%; transform: translateY(-50%); }
.wk-lb--single .wk-lb__prev, .wk-lb--single .wk-lb__next { display: none; }
@media (max-width: 640px) { .wk-lb__prev, .wk-lb__next { top: auto; bottom: 1.2rem; transform: none; } .wk-lb__img { max-height: 72vh; } .wk-lb__caption { padding: 0 1rem; } }
html.wk-lb-lock, html.wk-lb-lock body { overflow: hidden; }

@media (max-width: 1024px) {
  .jzw .wbody .wk-page .wk-head { text-align: left; }
  .jzw .wbody .wk-page .wk-head > p:not(.wk-eyebrow) { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-film img, .wk-gallery img, .wk-duo img { transition: none; }
}

/* ---------- carousel: rotating stills with arrows (16:9 or 9:16) ----------
   Native horizontal scroll with snap, so touch swipe just works; work.js adds
   the arrows' behaviour and a slow auto-rotate that stops on hover, on touch
   and while the carousel is off screen. */
.wk-carousel { position: relative; max-width: var(--maxw); margin: 0 auto; --wk-per: 3; }
.wk-carousel__track { display: flex; gap: var(--wk-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.wk-carousel__track::-webkit-scrollbar { display: none; }
.jzw .wbody .wk-carousel__track figure { flex: 0 0 calc((100% - (var(--wk-per) - 1) * var(--wk-gap)) / var(--wk-per)); margin: 0; scroll-snap-align: start; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.jzw .wbody .wk-carousel--tall .wk-carousel__track figure { aspect-ratio: 9 / 16; }
.jzw .wbody .wk-carousel__track figure a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.jzw .wbody .wk-carousel__track img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 1s var(--ease-out); }
.wk-carousel__track figure:hover img { transform: scale(1.04); }
.wk-carousel__btn { position: absolute; z-index: 2; top: 50%; width: 46px; height: 46px; transform: translateY(-50%); border-radius: 50%; border: 1px solid rgba(246, 243, 239, .18); background: rgba(12, 12, 14, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #f6f3ef; font-size: 1.15rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .3s, border-color .3s, transform .3s; }
.wk-carousel__btn:hover { background: var(--grad); border-color: transparent; }
.wk-carousel__btn:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }
.wk-carousel__prev { left: .9rem; }
.wk-carousel__next { right: .9rem; }
@media (max-width: 900px) { .wk-carousel { --wk-per: 2; } }
@media (max-width: 600px) { .wk-carousel { --wk-per: 1; } .wk-carousel--tall { --wk-per: 2; } .wk-carousel__btn { width: 40px; height: 40px; } }

/* ---------- feature v2: copy + rotating stills beside the vertical film ---------- */
.wk-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.wk-feature--flip { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.wk-feature > .wk-film { order: 2; }
.wk-feature--flip > .wk-film { order: -1; }
.wk-feature .wk-carousel { margin-top: clamp(1.8rem, 3vw, 2.4rem); }
@media (max-width: 900px) {
  .wk-feature, .wk-feature--flip { grid-template-columns: 1fr; }
  .wk-feature > .wk-film, .wk-feature--flip > .wk-film { order: 2; }
}

/* ---------- a full-width still inside a section (not a fixed wallpaper) ---------- */
.jzw .wbody .wk-page .wk-still { max-width: var(--maxw); margin: 0 auto; border-radius: 16px; overflow: hidden; background: #000; }
.jzw .wbody .wk-page .wk-still img { display: block; width: 100%; height: auto; border-radius: 0; }

/* ---------- stacked sheets: one above the other, no frame behind them ---------- */
.wk-stack { max-width: var(--maxw); margin: 0 auto; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.jzw .wbody .wk-stack a { display: block; position: relative; cursor: zoom-in; background: none; border-radius: 0; overflow: visible; }
.jzw .wbody .wk-stack img { display: block; width: 100%; height: auto; border-radius: 0; background: none; }

/* ---------- films side by side ----------
   pair: a 16:9 film and a 9:16 film at the same height (256:81 columns).
   films: two or more 16:9 films in a row.
   vgrid: vertical films and stills, n per row (set --wk-cols). */
.wk-pair { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 256fr) minmax(0, 81fr); gap: var(--wk-gap); align-items: stretch; }
.wk-pair > .wk-film { max-width: none; margin: 0; }
.wk-pair > .wk-film--vertical { aspect-ratio: auto; height: 100%; }
@media (max-width: 760px) { .wk-pair { grid-template-columns: 1fr; } .wk-pair > .wk-film--vertical { aspect-ratio: 9 / 16; height: auto; max-width: 360px; margin: 0 auto; } }
.wk-films { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wk-gap); }
.wk-films > .wk-film { max-width: none; }
@media (max-width: 760px) { .wk-films { grid-template-columns: 1fr; } }
.wk-vgrid { --wk-cols: 3; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(var(--wk-cols), minmax(0, 1fr)); gap: var(--wk-gap); justify-content: center; }
.wk-vgrid--narrow { max-width: 1100px; }
.wk-vgrid > .wk-film { max-width: none; aspect-ratio: 9 / 16; }
.jzw .wbody .wk-vgrid figure { margin: 0; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #000; }
.jzw .wbody .wk-vgrid figure a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.jzw .wbody .wk-vgrid figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.wk-vgrid--square > .wk-film, .jzw .wbody .wk-vgrid--square figure { aspect-ratio: 1 / 1; }
@media (max-width: 1100px) { .wk-vgrid { --wk-cols: 3 !important; } }
@media (max-width: 600px) { .wk-vgrid { --wk-cols: 2 !important; } }
.wk-vgrid + .wk-vgrid, .wk-pair + .wk-pair, .wk-pair + .wk-vgrid, .wk-vgrid + .wk-pair, .wk-films + * { margin-top: var(--wk-gap); }

/* ---------- square stills in the carousel ---------- */
.jzw .wbody .wk-carousel--square .wk-carousel__track figure { aspect-ratio: 1 / 1; }

/* ---------- stats (views, likes, shares, comments) ---------- */
.wk-stats { max-width: var(--maxw); margin: 0 auto clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.wk-stat { padding: 1.6rem 1.4rem; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); text-align: center; }
.jzw .wbody .wk-page .wk-stat strong { display: block; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent !important; color: transparent !important; padding: 0 .1em .12em; }
.jzw .wbody .wk-page .wk-stat span { display: block; margin-top: .6rem; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.wk-social .wk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.2rem 0 0; }
@media (max-width: 760px) { .wk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- a vertical film beside its social proof (comments + stats) ---------- */
.wk-social { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.wk-comments { display: grid; gap: .8rem; }
.jzw .wbody .wk-comments img { display: block; width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 900px) { .wk-social { grid-template-columns: 1fr; } .wk-social > .wk-film { max-width: 360px; margin: 0 auto; width: 100%; } }

/* ---------- Instagram embed ---------- */
.wk-insta { display: flex; justify-content: center; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.wk-insta .instagram-media { margin: 0 auto !important; }

/* ---------- a numbered step: sub-heading + copy, centred column ---------- */
.wk-step { max-width: 62rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto clamp(1.5rem, 3vw, 2.2rem); text-align: center; }
.jzw .wbody .wk-page .wk-step h3 { margin: 0 0 .8rem; }
.jzw .wbody .wk-page .wk-text { max-width: 62rem; margin: 0 auto clamp(1.5rem, 3vw, 2.2rem); text-align: center; }
.jzw .wbody .wk-page .wk-text ul, .jzw .wbody .wk-page .wk-step ul { display: inline-block; text-align: left; }
@media (max-width: 1024px) { .wk-step, .jzw .wbody .wk-page .wk-text { text-align: left; } }
.wk-vgrid--single { max-width: 420px; }
.wk-vgrid--single.wk-vgrid--square { max-width: 640px; }
@media (max-width: 600px) { .wk-vgrid--single { --wk-cols: 1 !important; } }
.wk-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1100px; }
@media (max-width: 640px) { .wk-cards--2 { grid-template-columns: 1fr; } }
.wk-stack--single { max-width: 1100px; }
.wk-stack--tall { max-width: 520px; }
.wk-comments--grid { max-width: 1100px; margin: 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .wk-comments--grid { grid-template-columns: 1fr; } }

/* ---------- films from the media library (mp4) ----------
   A cover frame until play is pressed; .wk-film--loop clips
   (behind-the-scenes) play silently on their own, with no controls. */
.jzw .wbody .wk-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; background: #000; }
.jzw .wbody .wk-film.is-playing video { object-fit: contain; }
.wk-film--loop { cursor: default; }
.wk-film--loop::after { display: none; }

/* ---------- films of different shapes in one row, all the same height ----------
   Each film's width follows its ratio (--ar), so a 1:1 beside a 9:16 lines up. */
.wk-row { max-width: var(--maxw); margin: 0 auto; display: flex; gap: var(--wk-gap); justify-content: center; align-items: flex-start; }
.wk-row > .wk-film { flex: var(--ar) 1 0; min-width: 0; max-width: none; margin: 0; }
@media (max-width: 760px) { .wk-row { flex-direction: column; align-items: center; } .wk-row > .wk-film { flex: none; width: 100%; max-width: calc(var(--ar) * 600px); } }

/* ---------- a vertical film beside its partner: Instagram post, comments, 9:16 stills ---------- */
.wk-mix { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); }
.wk-mix > * { flex: 0 1 360px; min-width: 0; margin: 0; }
.wk-mix > .wk-film { max-width: 360px; }
.wk-mix > .wk-insta { margin: 0; }
.wk-mix .instagram-media { min-width: 0 !important; width: 100% !important; max-width: 360px !important; }
@media (max-width: 900px) { .wk-mix { flex-direction: column; } .wk-mix > * { flex: none; width: 100%; max-width: 360px; } }
.wk-carousel.wk-carousel--one { --wk-per: 1; }

/* ---------- comment screenshots: three at a time, natural height ---------- */
.wk-carousel--strip .wk-carousel__track { align-items: center; }
.jzw .wbody .wk-carousel--strip .wk-carousel__track figure { aspect-ratio: auto; background: none; border-radius: 14px; }
.jzw .wbody .wk-carousel--strip .wk-carousel__track img { height: auto; object-fit: contain; }
.wk-carousel--strip .wk-carousel__btn { width: 38px; height: 38px; }

/* ---------- a short row of 9:16 stills: all on view on a wide screen ---------- */
.wk-carousel--fit { --wk-per: var(--wk-n); }
.wk-carousel--fit .wk-carousel__btn { display: none; }
@media (max-width: 900px) { .wk-carousel--fit { --wk-per: 3; } .wk-carousel--fit .wk-carousel__btn { display: grid; } }
@media (max-width: 600px) { .wk-carousel--fit { --wk-per: 2; } }

/* ---------- numbered steps: full-width cards, one above the other ---------- */
.wk-cards.wk-cards--stack { grid-template-columns: minmax(0, 1fr); max-width: var(--maxw); }
.wk-carousel + .wk-cards--stack, .wk-cards--stack + .wk-carousel, .wk-cards--stack + .wk-vgrid { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- media-library films: silent loop on the page, full film with sound on play ---------- */
.jzw .wbody .wk-film video.is-loading { opacity: 0; }
.wk-film--auto:hover video { transform: none; }
.wk-film.is-buffering::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid rgba(246, 243, 239, .25); border-top-color: #f6f3ef; animation: wk-spin .8s linear infinite; }
@keyframes wk-spin { to { transform: rotate(360deg); } }

/* ---------- stats count up; fixed-width digits so the row doesn't shuffle ---------- */
.jzw .wbody .wk-page .wk-stat strong { font-variant-numeric: tabular-nums; }

/* ---------- two stills per view (Noiré) ---------- */
.wk-carousel.wk-carousel--two { --wk-per: 2; }
@media (max-width: 600px) { .wk-carousel.wk-carousel--two { --wk-per: 1; } }

/* ---------- Reddit-style comment cards beside a film (Entertainment) ---------- */
.wk-reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin: 1.8rem 0 1.6rem; }
.wk-review { margin: 0; display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .025); }
.jzw .wbody .wk-review img { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; }
.jzw .wbody .wk-page .wk-review strong { display: block; margin-bottom: .3rem; font-size: .82rem; font-weight: 600; letter-spacing: .03em; color: var(--ink); }
.jzw .wbody .wk-page .wk-review p { margin: 0; font-size: .95rem; line-height: 1.55; }
.jzw .wbody .wk-page .wk-more { margin: 0; }
@media (max-width: 640px) { .wk-reviews { grid-template-columns: minmax(0, 1fr); } }

/* ---------- copy beside a film ---------- */
.wk-split--film > .wk-film { margin: 0 auto; width: 100%; }

/* ---------- password-protected page (tpl-page-work.php): WordPress's own form, restyled ---------- */
.wk-lock .post-password-form { display: block; max-width: 34rem; margin: 0 auto; padding: clamp(2rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .025); text-align: center; }
.wk-lock .post-password-form p { margin: 0 0 1.4rem; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.wk-lock .post-password-form p:last-child { margin: 0; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; align-items: flex-end; }
.wk-lock .post-password-form label { display: flex; flex-direction: column; gap: .5rem; flex: 1 1 14rem; text-align: left; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.wk-lock .post-password-form input[type="password"] { width: 100%; padding: .95rem 1.1rem; border-radius: 999px; border: 1px solid rgba(246, 243, 239, .18); background: rgba(12, 12, 14, .6); color: var(--ink); font: 400 1rem var(--font-body); letter-spacing: normal; text-transform: none; }
.wk-lock .post-password-form input[type="password"]:focus { outline: 2px solid var(--crimson); outline-offset: 2px; }
.wk-lock .post-password-form input[type="submit"] { padding: .95rem 2rem; border: 0; border-radius: 999px; background: var(--grad); color: #fff; font: 600 .95rem var(--font-body); cursor: pointer; }