/* Sheba's "Frosted Ceramic" neutrals and IBM Plex, from the brand skill's DESIGN.md. Monochrome only: primary actions are black or white, never coloured. */
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-display:swap;src:url(/film-library/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:500;font-display:swap;src:url(/film-library/assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:600;font-display:swap;src:url(/film-library/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:700;font-display:swap;src:url(/film-library/assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-display:swap;src:url(/film-library/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-display:swap;src:url(/film-library/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-display:swap;src:url(/film-library/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:700;font-display:swap;src:url(/film-library/assets/fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2')}

:root{
  --canvas:#F6F5F1;--raised:#FBFBF9;--muted:#ECEAE3;--line:#DFDDD5;--line-strong:#C5C1B7;
  --ink:#111111;--ink-2:#53504B;--ink-3:#6D6962;--night:#060606;--night-line:#3A3A3A;--night-ink:#F5F5F2;--night-2:#B8B8B2;
  --strip-light:#DAD7CD;--strip-dark:#060606;
  --gut:clamp(1.25rem,4vw,3rem);--max:76rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-size:1.0625rem}
body.lang-ar{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;line-height:1.8}
body.lang-en{font-family:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;line-height:1.6}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px;text-decoration-color:var(--line-strong)}
a:hover{text-decoration-color:currentColor}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:700;line-height:1.12}
h2{font-size:1.5rem;font-weight:600;line-height:1.3}
h3{font-size:1.5rem;font-weight:600;line-height:1.3}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:start}
:focus-visible{outline:2px solid #0A0A0A;outline-offset:2px}
.foot :focus-visible{outline-color:var(--night-ink)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;inset-inline-start:var(--gut);top:-4rem;background:var(--ink);color:var(--canvas);padding:.5rem 1rem;border-radius:10px;z-index:5}
.skip:focus{top:.75rem}

/* top bar */
.top{display:flex;justify-content:space-between;align-items:center;padding-block:1.5rem}
.mark{display:flex;align-items:center;gap:.65rem}
.mark img{height:32px;width:auto}
.mark .mark-word{height:23px}
.switch{font-weight:500;font-size:1rem;padding:.35rem .9rem;border:1px solid var(--line-strong);border-radius:10px;text-decoration:none}
.switch:hover{background:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:2.9rem;padding:.5rem 1.2rem;border-radius:10px;font-weight:600;text-decoration:none;border:1px solid transparent}
.btn--brand{background:var(--ink);color:var(--canvas)}
.btn--brand:hover{background:#2A2A2A}
.btn--line{border-color:var(--line-strong);font-weight:500}
.btn--line:hover{background:var(--muted)}
.btn--paper{background:var(--night-ink);color:var(--ink)}
.btn--paper:hover{background:#fff}
.size{font-weight:400}

/* the strip: every film drawn as its own light and dark stretches, to scale */
.strip{position:relative}
.segs{display:flex;gap:2px;height:10px}
.seg{display:block;flex:1 1 0;min-width:1px}
.strip--live{padding-top:14px;cursor:pointer;touch-action:manipulation}
.strip--live .segs{height:16px}
.node{position:absolute;top:0;inset-inline-start:0;width:10px;height:10px;margin-inline-start:-5px;background:var(--ink)}
.strip-note{margin-top:.6rem;font-size:.9375rem;color:var(--ink-3);max-width:68ch}

/* home */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(1.5rem,4vw,3.5rem) clamp(3rem,6vw,5rem)}
.lede{font-size:clamp(1.125rem,1.6vw,1.3125rem);margin-top:1.1rem;max-width:34em;color:var(--ink-2)}
.spoken{margin-top:1rem;color:var(--ink-3);font-size:1rem;max-width:34em}
.hero-film{display:block;text-decoration:none}
.hero-film img{border-radius:24px;border:1.5px solid var(--line)}
.hero-film .strip{margin-top:.75rem}
.hero-cap{display:block;margin-top:.7rem;font-weight:500}
.hero-film:hover .hero-cap{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}

.start{padding-block:0 clamp(3rem,6vw,5rem)}
.start h2{margin-bottom:1rem}
.start-list{border-top:1px solid var(--line)}
.start-list li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1rem,5vw,4.5rem);padding-block:.95rem;border-bottom:1px solid var(--line)}
.ask{color:var(--ink-2)}
.ans a{font-weight:500}
.then{color:var(--ink-3)}

.group{padding-block:0 clamp(3rem,6vw,5rem)}
.group>h2{font-size:clamp(1.625rem,3vw,2.25rem);font-weight:700;margin-bottom:1.75rem}
.films{display:grid;gap:clamp(2.25rem,4vw,3.25rem)}
.film{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.25rem,5vw,4.5rem);align-items:center}
.film-pic img{border-radius:16px;border:1.5px solid var(--line)}
.film-text h3 a{text-decoration:none}
.film-text h3 a:hover{text-decoration:underline;text-decoration-thickness:1px}
.film-short{margin-top:.5rem;max-width:36em;color:var(--ink-2)}
.film-meta{margin-top:.5rem;color:var(--ink-3);font-size:.9375rem}
.film-text .strip{margin-top:.85rem;max-width:32rem}

/* a film's page */
.film-page{padding-bottom:clamp(3rem,6vw,5rem)}
.back{display:inline-block;margin-block:.5rem 1.25rem;color:var(--ink-2)}
.film-page h1{font-size:clamp(2rem,4.6vw,3.5rem)}
.player{margin-top:clamp(1.5rem,3vw,2.25rem)}
.player video{width:100%;border-radius:24px;background:var(--night);aspect-ratio:16/9}
.player .strip{margin-top:.6rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.chapters{margin-top:clamp(2.5rem,5vw,4rem)}
.hint{margin-top:.25rem;color:var(--ink-3);font-size:.9375rem}
.ch-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13.5rem),1fr));gap:1.5rem 1.1rem;margin-top:1.1rem}
.ch{display:grid;grid-template-columns:auto 1fr;gap:.15rem .55rem;width:100%}
.ch img{grid-column:1/-1;border-radius:10px;border:1px solid var(--line);margin-bottom:.45rem;width:100%}
.ch-t{color:var(--ink-3);font-size:.9375rem;font-variant-numeric:tabular-nums}
.ch-n{font-weight:500;line-height:1.45}
.ch[aria-current=true] img{outline:2px solid var(--ink);outline-offset:1px}
.ch[aria-current=true] .ch-t{color:var(--ink)}
.ch:hover .ch-n{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

.guide{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,6vw,5.5rem);margin-top:clamp(2.5rem,5vw,4rem);align-items:start}
.guide-main section+section{margin-top:2.25rem}
.guide-main p{margin-top:.6rem;max-width:68ch}
.learn{margin-top:.6rem;max-width:68ch}
.learn li{position:relative;padding-inline-start:1.15rem;margin-top:.5rem}
.learn li::before{content:'';position:absolute;inset-inline-start:0;top:.72em;width:6px;height:6px;background:var(--ink)}
.facts{border-inline-start:1px solid var(--line);padding-inline-start:clamp(1.25rem,3vw,2.25rem)}
.facts dl{margin-top:.75rem}
.facts dt{color:var(--ink-3);font-size:.9375rem;margin-top:1rem}
.facts dd{margin-top:.1rem}

.script{margin-top:clamp(2.5rem,5vw,4rem)}
.lines{margin-top:.9rem;border-top:1px solid var(--line);max-width:52rem}
.lines li{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:.75rem;padding-block:.65rem;border-bottom:1px solid var(--line)}
.line-t{color:var(--ink-3);font-size:.9375rem;font-variant-numeric:tabular-nums;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.2em;text-decoration-thickness:1px;align-self:start;margin-top:.1em;justify-self:start}
.line-t:hover{color:var(--ink)}

.more{margin-top:clamp(2.5rem,5vw,4rem)}
.more-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:1rem}
.more-list a{text-decoration:none;font-weight:500;display:block}
.more-list img{border-radius:16px;border:1.5px solid var(--line);margin-bottom:.55rem}
.more-list a:hover span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

.lost{padding-block:4rem 6rem}
.lost p{margin-top:1rem}

/* footer: the film's dark ground */
.foot{background:var(--night);color:var(--night-ink);margin-top:clamp(1rem,3vw,2rem)}
.foot-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4rem);padding-block:clamp(2.5rem,6vw,4.5rem);align-items:end}
.foot-ask h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;margin-bottom:1.25rem}
.foot-mark{height:30px;width:auto}
.legal{color:var(--night-2)}
.foot-end p{margin-top:1rem;color:var(--night-2);font-size:.9375rem;max-width:32em}

@media (max-width:52rem){
  .hero,.film,.guide,.foot-in{grid-template-columns:minmax(0,1fr)}
  .hero{gap:1.75rem}
  .start-list li{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .facts{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--line);padding-top:1.5rem}
  .film{gap:.9rem}
  .player video{border-radius:12px}
}
@media (max-width:30rem){
  .ch-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .more-list{grid-template-columns:minmax(0,1fr)}
  .btn{width:100%;justify-content:center}
}