/* work (take A): "One editor", holding one film: Off the grid. Every rule is scoped to this part. */
[data-part="work"] { --deep: #0A0E14; --hair: rgba(234, 220, 195, .13); --hair-2: rgba(234, 220, 195, .26); overflow-x: clip; }
[data-part="work"] .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Heading */
[data-part="work"] .w-head { display: grid; gap: 14px; margin-bottom: clamp(36px, 5vw, 72px); }
[data-part="work"] .w-head .lede { color: var(--ink-2); max-width: 30em; }
@media (min-width: 900px) {
  [data-part="work"] .w-head { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: end; column-gap: clamp(16px, 2vw, 32px); }
  [data-part="work"] .w-head .lede { padding-bottom: .55em; }
}

/* ---------- Without JavaScript: the film's poster (it links to the film) and its numbers ---------- */
[data-part="work"] .mon { max-width: 340px; }
[data-part="work"] .clip .scr { position: relative; aspect-ratio: 9 / 16; background: var(--deep); overflow: hidden; border-radius: 4px; }
[data-part="work"] .clip .scr img, [data-part="work"] .clip .scr video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-part="work"] .clip figcaption { margin-top: 12px; display: grid; gap: 2px; font-size: 16px; line-height: 1.45; }
[data-part="work"] .clip figcaption .spec { font-size: 13px; color: var(--ink-2); }
html:not(.js) [data-part="work"] video { display: none; }
[data-part="work"] .nojs { position: absolute; inset: 0; display: block; }
[data-part="work"] .nojs img { width: 100%; height: 100%; object-fit: cover; }
[data-part="work"] .nojs-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(234, 220, 195, .92); }
[data-part="work"] .nojs-play::after { content: ""; position: absolute; left: 22px; top: 18px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--night); }
[data-part="work"] .insp, [data-part="work"] .tl, [data-part="work"] .hint { display: none; }

/* ---------- The editor (part.js adds .on) ---------- */
[data-part="work"] .ed.on .mon { max-width: none; position: relative; aspect-ratio: 9 / 16; background: var(--deep); border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair); }
[data-part="work"] .ed.on .clip, [data-part="work"] .ed.on .clip .scr { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; background: transparent; }
[data-part="work"] .ed.on .clip video { opacity: 0; transition: opacity .12s linear; }
[data-part="work"] .ed.on .clip video.ready { opacity: 1; }
[data-part="work"] .ed.on .clip figcaption { display: none; }

/* the inspector */
[data-part="work"] .i-name { font: 700 17px/1.3 var(--f-ar); }
html[lang="en"] [data-part="work"] .i-name { font: 700 18px/1.1 var(--f-en); letter-spacing: -.02em; }
[data-part="work"] .i-line { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
html[lang="en"] [data-part="work"] .i-line { line-height: 1.45; }
[data-part="work"] .ctr { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 4px; direction: ltr; }
[data-part="work"] .c-n { font-size: 40px; line-height: .95; letter-spacing: -.05em; font-weight: 500; }
[data-part="work"] .c-of { font-size: 12px; color: var(--ink-2); }
[data-part="work"] .c-lab { grid-column: 1 / -1; font-size: 12px; line-height: 1.35; color: var(--ink-2); }
html[lang="ar"] [data-part="work"] .c-lab { direction: rtl; text-align: right; }
[data-part="work"] .ctrs { display: flex; }
[data-part="work"] .i-shot { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: 15px; line-height: 1.3; }
[data-part="work"] .i-shot .k { font: 500 12px/1 var(--f-num); padding: 3px 5px 2px; border-radius: 3px; background: rgba(234, 220, 195, .12); color: var(--sand); flex: none; }
[data-part="work"] .i-note { font-size: 14px; line-height: 1.5; color: var(--ink); }
html[lang="ar"] [data-part="work"] .i-note { line-height: 1.65; }
[data-part="work"] .i-t { display: inline-block; margin-inline-end: 8px; font-size: 11px; color: var(--ink-2); direction: ltr; unicode-bidi: isolate; }
[data-part="work"] .i-snd { position: relative; padding-inline-start: 24px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
html[lang="ar"] [data-part="work"] .i-snd { line-height: 1.65; }
[data-part="work"] .i-snd::before { content: ""; position: absolute; inset-inline-start: 0; top: .35em; width: 14px; height: 12px; background: var(--dune); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M0 4h3l4-3v10L3 8H0z'/%3E%3Cpath d='M9.5 3.6a3.2 3.2 0 0 1 0 4.8M11.6 1.6a6 6 0 0 1 0 8.8' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M0 4h3l4-3v10L3 8H0z'/%3E%3Cpath d='M9.5 3.6a3.2 3.2 0 0 1 0 4.8M11.6 1.6a6 6 0 0 1 0 8.8' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; }
[data-part="work"] .i-spec { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
[data-part="work"] .tp { display: flex; flex-wrap: nowrap; gap: 4px; direction: ltr; }
html[lang="ar"] [data-part="work"] .tp { justify-content: flex-end; }
[data-part="work"] .tp button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 0; min-width: 0; height: 40px; padding: 0; border: 0; border-radius: 8px; background: rgba(234, 220, 195, .08); color: var(--sand); cursor: pointer; transition: background-color .15s; }
[data-part="work"] .tp button:hover { background: rgba(234, 220, 195, .15); }
[data-part="work"] .tp button:active { transform: translateY(1px); }
[data-part="work"] .tp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-part="work"] .tp .b-ic svg path { fill: currentColor; stroke-width: 1.6; }
[data-part="work"] .tp .b-ic svg path[d^="M7 5v14"], [data-part="work"] .tp .b-ic svg path[d^="M17 5v14"], [data-part="work"] .tp .i-pa path { fill: none; stroke-width: 2.4; }
[data-part="work"] .b-play { flex: 1.3 1 0 !important; background: var(--sand) !important; color: var(--night) !important; }
[data-part="work"] .b-play .i-pa, [data-part="work"] .b-play[aria-pressed="true"] .i-pl { display: none; }
[data-part="work"] .b-play[aria-pressed="true"] .i-pa { display: block; }
[data-part="work"] .b-snd .s-off, [data-part="work"] .b-snd .s-on { display: none; font-size: 14px; }
[data-part="work"] .b-snd .w1, [data-part="work"] .b-snd .w2 { opacity: 0; transition: opacity .15s; }
[data-part="work"] .b-snd[aria-pressed="true"] .w1, [data-part="work"] .b-snd[aria-pressed="true"] .w2 { opacity: 1; }
[data-part="work"] .b-snd .sp { fill: currentColor; }

/* the timeline: frame ruler, the shots, the film's frames, its sound */
[data-part="work"] .ed.on .tl { --rh: 32px; --sh: 28px; --v1: 40px; --a1: 34px; display: grid; grid-template-columns: 34px minmax(0, 1fr); -webkit-user-select: none; user-select: none; }
[data-part="work"] .tl-heads { display: grid; grid-template-rows: var(--rh) var(--sh) var(--v1) var(--a1); font-size: 10px; color: var(--ink-2); }
[data-part="work"] .tl-heads > * { display: flex; align-items: center; border-top: 1px solid var(--hair); }
[data-part="work"] .tl-heads .h-r { border-top: 0; }
[data-part="work"] .tl-heads .ar { font-family: var(--f-ar); }
[data-part="work"] .tl-body { position: relative; display: grid; grid-template-rows: var(--rh) var(--sh) var(--v1) var(--a1); touch-action: pan-y; cursor: ew-resize; outline-offset: 6px; }
[data-part="work"] .trk { position: relative; border-top: 1px solid var(--hair); }
[data-part="work"] .t-a1 { border-bottom: 1px solid var(--hair); }
[data-part="work"] .ruler { position: relative; }
[data-part="work"] .ruler canvas, [data-part="work"] .wv { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-part="work"] .sh { position: absolute; top: 3px; bottom: 3px; container-type: inline-size; padding: 0 5px; border: 1px solid rgba(234, 220, 195, .16); border-radius: 4px; background: rgba(234, 220, 195, .05); color: var(--ink-2); cursor: pointer; font-size: 11px; line-height: 1; text-align: start; overflow: hidden; white-space: nowrap; transition: border-color .15s, color .15s, background-color .15s; }
[data-part="work"] .sh:hover { border-color: rgba(234, 220, 195, .4); }
[data-part="work"] .sh.is-on { border-color: var(--sand); color: var(--sand); background: rgba(234, 220, 195, .1); }
[data-part="work"] .sh .sl { font: 500 10px/1 var(--f-num); margin-inline-end: 5px; }
[data-part="work"] .sh .sn .ar { font-family: var(--f-ar); direction: rtl; unicode-bidi: isolate; }
@container (max-width: 76px) { [data-part="work"] .sh .sn { display: none; } }
[data-part="work"] .cl { position: absolute; inset: 3px 1px; overflow: hidden; border: 1px solid var(--sand); border-radius: 5px; background: var(--deep); }
[data-part="work"] .cl .th { position: absolute; inset: 0; display: flex; overflow: hidden; }
[data-part="work"] .cl .th i { flex: none; height: 100%; background-repeat: no-repeat; border-right: 1px solid rgba(10, 14, 20, .55); }
[data-part="work"].near .cl .th i { background-image: url(../../media/intro-strip.jpg); }
[data-part="work"] .ph { position: absolute; left: 0; top: calc(var(--rh) - 1px); bottom: 0; width: 1.5px; margin-left: -.75px; background: var(--sand); pointer-events: none; will-change: transform; z-index: 2; }
[data-part="work"] .ph::after { content: ""; position: absolute; left: -3px; bottom: -4px; width: 7.5px; height: 4px; background: var(--sand); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
[data-part="work"] .pxl { position: absolute; left: 0; width: 100%; height: 80px; top: calc(var(--rh) - 80px); pointer-events: none; z-index: 3; }
[data-part="work"] .ed.on .hint { display: block; color: var(--ink-2); }

/* phones: the inspector's short facts beside the monitor; the timeline, then the notes, under it */
@media (max-width: 899px) {
  [data-part="work"] .ed.on { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); column-gap: 14px; grid-template-areas: "mon name" "mon ctr" "mon shot" "mon note" "mon tp" "tl tl" "snd snd" "line line" "spec spec" "hint hint"; grid-template-rows: auto auto auto 1fr auto; }
  [data-part="work"] .ed.on .mon { grid-area: mon; }
  [data-part="work"] .ed.on .insp { display: contents; }
  [data-part="work"] .i-name { grid-area: name; margin-bottom: 10px; }
  [data-part="work"] .ctrs { grid-area: ctr; margin-bottom: 14px; }
  [data-part="work"] .i-shot { grid-area: shot; align-self: start; font-size: 14px; }
  [data-part="work"] .tp { grid-area: tp; align-self: end; }
  [data-part="work"] .ed.on .tl { grid-area: tl; margin-top: 22px; }
  [data-part="work"] .i-note { grid-area: note; align-self: start; margin: 10px 0 12px; font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
  html[lang="ar"] [data-part="work"] .i-note { line-height: 1.6; -webkit-line-clamp: 6; }
  [data-part="work"] .i-t { display: block; margin-bottom: 2px; }
  [data-part="work"] .i-snd { grid-area: snd; margin-top: 18px; min-height: 3.2em; }
  [data-part="work"] .i-line { grid-area: line; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
  [data-part="work"] .i-spec { grid-area: spec; margin-top: 8px; }
  [data-part="work"] .ed.on .hint { grid-area: hint; margin-top: 14px; }
}
@media (max-width: 380px) {
  [data-part="work"] .c-n { font-size: 34px; }
  [data-part="work"] .tp svg { width: 16px; height: 16px; }
}

/* desktop: a tall monitor, a wide inspector with a giant counter */
@media (min-width: 900px) {
  [data-part="work"] .ed.on { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(32px, 4.4vw, 72px); row-gap: 0; }
  [data-part="work"] .ed.on .mon { height: clamp(440px, calc(100vh - 380px), 620px); border-radius: 8px; }
  [data-part="work"] .ed.on .insp { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  [data-part="work"] .i-name { font-size: clamp(26px, 2.4vw, 36px); }
  html[lang="en"] [data-part="work"] .i-name { font-size: clamp(26px, 2.4vw, 36px); }
  [data-part="work"] .i-line { font-size: 16px; max-width: 34em; }
  [data-part="work"] .ctrs { margin-top: clamp(4px, 1.4vw, 20px); }
  [data-part="work"] .c-n { font-size: clamp(96px, 12.5vw, 210px); line-height: .8; letter-spacing: -.06em; }
  [data-part="work"] .c-of { font-size: 16px; }
  [data-part="work"] .c-lab { font-size: 14px; margin-top: 8px; }
  [data-part="work"] .i-shot { font-size: 19px; margin-top: 6px; }
  [data-part="work"] .i-shot .k { font-size: 13px; }
  [data-part="work"] .i-note { font-size: 16px; max-width: 34em; min-height: 3em; }
  [data-part="work"] .i-snd { font-size: 14px; max-width: 40em; min-height: 3em; }
  [data-part="work"] .i-spec { font-size: 13px; }
  [data-part="work"] .tp { margin-top: auto; gap: 6px; justify-content: flex-start; }
  html[lang="ar"] [data-part="work"] .tp { justify-content: flex-end; }
  [data-part="work"] .tp button { flex: 0 0 auto; min-width: 48px; height: 48px; border-radius: 999px; }
  [data-part="work"] .b-play { flex: 0 0 auto !important; min-width: 64px !important; }
  [data-part="work"] .b-snd { padding: 0 20px 0 16px !important; }
  [data-part="work"] .b-snd[aria-pressed="false"] .s-off, [data-part="work"] .b-snd[aria-pressed="true"] .s-on { display: inline; }
  [data-part="work"] .ed.on .tl { --rh: 38px; --sh: 34px; --v1: 58px; --a1: 46px; grid-column: 1 / -1; grid-template-columns: 46px minmax(0, 1fr); margin-top: 30px; }
  [data-part="work"] .tl-heads { font-size: 11px; }
  [data-part="work"] .sh { font-size: 13px; padding: 0 8px; }
  [data-part="work"] .sh .sl { font-size: 11px; }
  [data-part="work"] .ed.on .hint { grid-column: 1 / -1; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-part="work"] .ed.on .clip video { transition: none; }
}
/* the time stamp is LTR inside an RTL line, so its gap is set physically */
html[lang="ar"] [data-part="work"] .i-t { margin-inline-end: 0; margin-left: 10px; }