/* The public film pages: /shortfilms and /title/<film> (owner, 9 Nov 2026: "build the public catalogue like
   Netflix has"; then "we have 2 different designs. We need to have 1", Netflix's). Netflix's public film
   page in our visuals: the film's clip in a big rounded screen with a curved foot, the same clip blurred
   behind the whole page, see-through glass for everything under it, the small menu that stays at the top,
   and gold for the next step. Plain CSS, served from the shop's storage with the pages
   (shop/tools/catalogue.mjs). */
@font-face{font-family:Poppins;src:url('/shop-files/fonts/poppins-Poppins-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url('/shop-files/fonts/poppins-Poppins-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url('/shop-files/fonts/poppins-Poppins-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url('/shop-files/fonts/poppins-Poppins-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root{color-scheme:dark;background:#000;--gold:#d7b46a;--cream:#f1d590;--header:76px;
  --edge:clamp(12px,9vw,180px);--side:clamp(16px,13vw,320px);--curve:clamp(14px,1.8vw,32px)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:radial-gradient(120% 760px at 50% -90px,#2a2214 0%,#0d0b08 46%,#000 72%) no-repeat,#000}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:Poppins,Arial,sans-serif;color:#fff;-webkit-font-smoothing:antialiased;background:none}
h1,h2,h3,p,dl,dd,figure{margin:0}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
[hidden]{display:none!important}
button,input{font:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.row-anchor{display:block;height:0;scroll-margin-top:80px}.cat-section[id]{scroll-margin-top:72px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:20px;z-index:40;background:#fff;color:#141414;padding:12px;border-radius:8px}.skip-link:focus{top:10px}

/* On an iPhone, Netflix's "Open in the app" bar, as on the welcome page (6 Nov 2026); catalogue.js shows it. */
.app-bar{position:relative;display:flex;align-items:center;height:49px;padding:0 20px;background:#000;color:#fff}
.app-bar[hidden]{display:none}
.app-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#191919;transform:scaleY(.3334);transform-origin:bottom}
.app-bar-icon{position:relative;flex:none;width:29px;height:29px;border-radius:6.5px;overflow:hidden;background:#0b0b0b}
.app-bar-icon img{width:100%;height:100%;object-fit:cover}
.app-bar-text{display:flex;flex-direction:column;flex:1;min-width:0;align-self:flex-start;margin:8.1px 12px 0 8px}
.app-bar-text strong,.app-bar-text span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.app-bar-text strong{font-size:13px;line-height:17.33px;font-weight:600}
.app-bar-text span{font-size:12px;line-height:16.8px;color:#8d8d92}
.app-bar-open{flex:none;align-self:flex-start;display:grid;place-items:center;min-width:68px;height:28px;margin-top:10.33px;padding:0 12px 1px;border-radius:14px;background:var(--app-bar-blue,#0090ff);color:#fff;font-size:15.25px;font-weight:600;line-height:1}
@supports (color:color(display-p3 0 0 0)){.app-bar-open{--app-bar-blue:color(display-p3 .247 .557 .969)}}

/* Behind the whole page: the film's picture, blurred, and once the clip plays, the clip itself (catalogue.js). */
.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#000;pointer-events:none}
.backdrop img,.backdrop canvas{position:absolute;top:-10%;left:-10%;width:120%;height:120%;object-fit:cover;filter:blur(60px) saturate(1.3) brightness(.9)}
.backdrop canvas{opacity:0;transition:opacity 1.2s ease}
.backdrop.is-live canvas{opacity:1}
.backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000001a 0,#00000059 45%,#0000008c 100%)}

/* The top bar, the wordmark and Sign In; on a film page, Netflix's small menu, which stays at the top. */
.cat-page{position:relative;flex:1 0 auto;display:flex;flex-direction:column}
.cat-header{position:relative;z-index:5;height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--edge)}
.cat-brand img{width:clamp(120px,11vw,176px);height:auto}
.cat-header-actions{display:flex;align-items:center;gap:12px}
/* Netflix's small menu, as the streaming service's tabs (netflix-polish.css, .filter-tabs; owner, 9 Nov 2026: "a
   more modern button. Like we have on our streaming service"): a glass capsule with a gold hairline, and the
   part of the page in view on a gold pill (catalogue.js). */
.title-menu-bar{position:sticky;top:0;z-index:20;display:flex;justify-content:center;margin:-10px 0 0;padding:12px 12px 0;pointer-events:none}
/* Once the menu stays at the top, the page fades to dark behind it, so what scrolls under it does not show through
   (owner, 9 Nov 2026: the menu sat over the More Details cards). */
.title-menu-bar::before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;background:linear-gradient(180deg,#000000eb 0,#000000b8 52%,#0000 100%);opacity:0;transition:opacity .25s ease}
.title-menu-bar.is-stuck::before{opacity:1}
.title-menu{position:relative;display:flex;gap:4px;max-width:100%;padding:4px;border-radius:999px;pointer-events:auto;
  overflow-x:auto;scrollbar-width:none;background:linear-gradient(135deg,#ffffff1f,#ffffff08 60%,#f1d59014),#14141473;
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 0 0 1px #f1d5904d,inset 0 1px 0 #ffffff26,0 8px 24px #0000006b}
.title-menu::-webkit-scrollbar{display:none}
.title-menu a{padding:9px 20px;border-radius:999px;font-size:14px;font-weight:500;color:#d9d3c7;white-space:nowrap;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.title-menu a:hover{color:#fff;background:#ffffff14}
.title-menu a[aria-current]{color:#1a150c;font-weight:600;background:linear-gradient(135deg,#f6e3a8,#d9ad5a);box-shadow:0 0 14px #f1d59059,inset 0 1px 0 #fff6}

/* Pills: gold for the next step, glass with a gold hairline for the rest (netflix-polish.css). */
.gold-button,.glass-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 24px;border:0;border-radius:999px;
  font-size:15px;font-weight:600;line-height:1.3;white-space:nowrap;cursor:pointer;transition:box-shadow .2s ease,transform .2s ease}
.gold-button{color:#1a150c;background:linear-gradient(135deg,#f6e3a8,#d9ad5a);box-shadow:0 0 18px #f1d59040,inset 0 1px 0 #fff6}
.gold-button:hover{transform:translateY(-1px);box-shadow:0 0 26px #f1d59066,inset 0 1px 0 #fff8}
.glass-button{color:#f6f1e7;background:linear-gradient(135deg,#ffffff1f,#ffffff08 60%,#f1d59014);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px #f1d59059,0 6px 18px #0005}
.glass-button:hover{box-shadow:inset 0 0 0 1px #f1d590a6,0 0 16px #f1d59026,0 6px 18px #0005}
.cat-header .gold-button{min-height:36px;padding:0 18px;font-size:14px}
.gold-button svg,.glass-button svg{width:18px;height:18px;flex:none}

.eyebrow{display:inline-flex;align-items:center;gap:9px;width:fit-content;padding:7px 14px 7px 11px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cream);background:linear-gradient(135deg,#ffffff1a,#ffffff06 60%,#f1d59012);box-shadow:inset 0 0 0 1px #f1d59059}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cream);box-shadow:0 0 10px var(--cream)}

/* "Made with AI", the glass pill with the gold star the film pages carry (netflix-polish.css). */
.ai-label{position:relative;display:inline-flex;align-items:center;gap:7px;width:fit-content;padding:6px 12px 6px 10px;border-radius:999px;font-size:12px;font-weight:600;
  letter-spacing:.05em;line-height:1;color:#f6ecd2;white-space:nowrap;background:linear-gradient(135deg,#ffffff26,#ffffff08 60%,#f1d59014);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 1px 0 #ffffff2e,inset 0 0 0 1px #f1d5904d,0 6px 18px #0005}
.ai-label::before{content:"";flex:none;width:12px;height:12px;background:linear-gradient(135deg,#fff6d8,#f1d590 45%,#b8862f);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 6.4 5.6 11.3 12 12-6.4.7-11.3 5.6-12 12-.7-6.4-5.6-11.3-12-12C6.4 11.3 11.3 6.4 12 0z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 6.4 5.6 11.3 12 12-6.4.7-11.3 5.6-12 12-.7-6.4-5.6-11.3-12-12C6.4 11.3 11.3 6.4 12 0z'/%3E%3C/svg%3E") center/contain no-repeat}

/* See-through glass, as Netflix's cards over its blurred page. */
.glass{border-radius:16px;background:linear-gradient(135deg,#ffffff1f,#ffffff0d 55%,#f1d59010);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%);
  box-shadow:inset 0 0 0 1px #ffffff24,inset 0 1px 0 #ffffff1f,0 18px 40px #0004}

/* The info line: year, age, length, kind and genres, with the HD tag boxed. */
.meta{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;margin-left:-20px;clip-path:inset(0 0 0 20px);font-size:clamp(14px,1.15vw,17px);font-weight:500;color:#e9e3d6}
.meta>span:not(.boxed)::before{content:"·";display:inline-block;width:20px;text-align:center;color:#ffffff73}
.meta .boxed{display:inline-block;margin-left:20px;padding:1px 6px;border:1px solid #ffffff73;border-radius:4px;font-size:.85em;line-height:1.4}

/* ---- The big screen: a film page's clip, or /shortfilms' wall of pictures ------------------------------ */
.title-hero,.films-hero{position:relative;isolation:isolate;width:min(100% - 2*var(--edge),1640px);margin:16px auto 0;border-radius:18px;overflow:hidden;background:#0b0b0b;
  -webkit-mask:radial-gradient(60% calc(var(--curve) * 2.1) at 50% calc(100% + var(--curve) * 1.1),#0000 99%,#000 100%);
  mask:radial-gradient(60% calc(var(--curve) * 2.1) at 50% calc(100% + var(--curve) * 1.1),#0000 99%,#000 100%)}
.title-hero{height:max(440px,min(74vh,52vw))}
.title-hero-media{position:absolute;inset:0;z-index:-1}
.title-hero-art,.title-hero-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.title-hero-clip{opacity:0;transition:opacity .8s ease}
.clip-on .title-hero-clip{opacity:1}
/* A widescreen film (2.35:1) has black bars at the top and bottom of its 16:9 clip (owner, 9 Nov 2026): the clip is
   sized so that its picture alone covers the screen, as the website's own banner does (src/hero-preview.js,
   coverFrame). --fw/--fh: the clip's size; --ax/--ay/--aw/--ah: its picture (catalogue.mjs, clipFrame). */
.title-hero-media{overflow:hidden}
@supports (width:1cqw){
  .title-hero-media{container-type:size}
  .title-hero-clip.is-widescreen{--s:max(100cqw / var(--aw),100cqh / var(--ah));inset:auto;left:calc(50cqw - var(--s) * (var(--ax) + var(--aw) / 2));
    top:calc(40cqh - var(--s) * (var(--ay) + var(--ah) * .4));width:calc(var(--s) * var(--fw));height:calc(var(--s) * var(--fh))}
}
/* Full screen shows the whole clip. */
.title-hero-clip:fullscreen{object-fit:contain}
.title-hero-clip:-webkit-full-screen{object-fit:contain}
.title-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000000e0 0,#0000009e 24%,#00000026 46%,#0000 60%),linear-gradient(0deg,#0000008c 0,#0000 32%)}
.title-hero-copy{position:absolute;left:clamp(24px,5vw,96px);bottom:calc(var(--curve) + clamp(36px,9%,96px));width:min(400px,38%);display:flex;flex-direction:column;align-items:center;gap:clamp(14px,1.6vw,22px);text-align:center}
.title-brand{width:clamp(96px,8vw,136px);height:auto;filter:drop-shadow(0 2px 10px #000a)}
.title-name{font-size:clamp(32px,3.4vw,56px);font-weight:700;line-height:1.05;letter-spacing:-.02em;text-wrap:balance;text-shadow:0 4px 24px #000c}
.title-name img{width:auto;max-width:100%;max-height:clamp(76px,8.5vw,150px);margin:0 auto;object-fit:contain;filter:drop-shadow(0 6px 24px #000c)}

/* Email and Get Started under the name, as Netflix's: the glass field, the gold pill under it, the price. */
.email-start{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;margin-top:4px}
.floating-field{position:relative;display:block;width:100%;border-radius:999px;box-shadow:0 10px 30px #0006}
.floating-field input{width:100%;height:52px;padding:20px 18px 6px 24px;border:0;border-radius:999px;color:#fff;font-size:16px;line-height:1.5;
  background:linear-gradient(135deg,#ffffff26,#ffffff08 60%,#f1d59014);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 #ffffff33,inset 0 0 0 1px #f1d5904d;transition:box-shadow .15s ease}
.floating-field input:focus{outline:none;box-shadow:inset 0 1px 0 #ffffff40,inset 0 0 0 1px #f1d590,0 0 0 4px #f1d59029,0 0 22px #f1d59033}
.floating-field span{position:absolute;left:25px;top:50%;transform:translateY(-50%);color:#ffffffb3;font-size:16px;pointer-events:none;transition:top .1s,font-size .1s}
.floating-field input:focus+span,.floating-field input:not(:placeholder-shown)+span{top:15px;font-size:12px}
.floating-field input:focus+span{color:var(--cream)}
.email-start .gold-button{min-width:min(240px,100%);min-height:48px;font-size:17px}
.price-line{font-size:14px;line-height:1.5;color:#ffffffcc;text-shadow:0 1px 8px #000a;text-wrap:balance}
.email-start.is-inline{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;justify-items:start;gap:12px 10px;max-width:560px}
.email-start.is-inline .floating-field{width:100%}
.email-start.is-inline .gold-button{min-width:0;min-height:52px;padding:0 28px;font-size:18px;font-weight:600}
.email-start.is-inline .price-line{grid-column:1/-1;padding-left:12px}

/* The clip's round buttons, at the screen's lower right, as Netflix's. */
.clip-controls{position:absolute;right:clamp(20px,4vw,80px);bottom:calc(var(--curve) + clamp(36px,9%,96px));z-index:2;display:flex;gap:10px;pointer-events:auto}
.clip-button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;color:#fff;cursor:pointer;
  background:#0000004d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1.5px #ffffffcc;transition:box-shadow .15s ease,color .15s ease}
.clip-button:hover{color:var(--cream);box-shadow:inset 0 0 0 1.5px var(--cream),0 0 16px #f1d59033}
.clip-button svg{width:19px;height:19px}
.clip-button .icon-play,.clip-button .icon-sound,.is-paused .icon-pause{display:none}
.is-paused .icon-play{display:block}
.clip-controls:not(.is-muted) .icon-sound{display:block}
.clip-controls:not(.is-muted) .icon-muted{display:none}

/* ---- Under the screen, on glass ----------------------------------------------------------------- */
.title-info,.cat-section,.discover{width:min(100% - 2*var(--side),1360px);margin-left:auto;margin-right:auto}
.title-info{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:24px;margin-top:36px;padding:26px 30px}
.title-info h2{font-size:clamp(22px,1.8vw,28px);font-weight:600;letter-spacing:-.01em}
.title-info .meta{margin-top:10px;font-size:14px;font-weight:600}
.title-synopsis{margin-top:12px;font-size:16px;line-height:1.55;color:#f3efe6}
.title-info-side{display:flex;flex-direction:column;align-items:flex-start;gap:10px;align-self:center;padding-left:24px;border-left:1px solid #ffffff2e;font-size:14px;line-height:1.5;color:#ffffffc7}
.title-info-side b{font-weight:600;color:#fff}

.cat-section{padding:44px 0 0}
.cat-section>h2,.row-heading h2{font-size:clamp(22px,2vw,32px);font-weight:700;letter-spacing:-.01em}
.cat-section>h2{margin-bottom:18px}

/* The clip, as Netflix's trailers: the picture, a play button and the length, then its name. */
.clip-card{width:min(400px,100%)}
.clip-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#1d1d1d;box-shadow:0 10px 26px #0008}
.clip-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.clip-thumb:hover img,.clip-thumb:focus-visible img{transform:scale(1.04)}
.clip-play{position:absolute;left:14px;bottom:14px;width:40px;height:40px;color:#fff}
.clip-play svg{width:100%;height:100%}
.clip-thumb:hover .clip-play{color:var(--cream)}
.clip-thumb .clip-length{position:absolute;right:12px;bottom:16px;padding:2px 8px;border-radius:4px;background:#000c;font-size:13px;font-weight:500}
.clip-card video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:8px;background:#000;box-shadow:0 10px 26px #0008}
.clip-card figcaption{margin-top:12px}
.clip-kind{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#ffffffa6}
.clip-name{display:block;margin-top:2px;font-size:16px;font-weight:600}

/* More Details: Netflix's three glass cards. */
.details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.details dl{display:grid;gap:14px;align-content:start;min-height:200px;padding:24px}
.details dt{font-size:14px;font-weight:600;color:#fff}
.details dd{margin-top:2px;font-size:14px;line-height:1.5;color:#ffffffb8}
.details dd a{text-decoration:underline;text-decoration-color:#ffffff4d;text-underline-offset:3px}.details dd a:hover{color:var(--cream);text-decoration-color:var(--cream)}

/* Tiles: the films' 16:9 pictures, with the name and info line under them, in rows that scroll sideways. */
.card{display:flex;flex-direction:column;gap:8px;min-width:0}
.card-art{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#1d1d1d;box-shadow:0 10px 26px #0008;transition:transform .2s ease,box-shadow .2s ease}
.card-art img{width:100%;height:100%;object-fit:cover}
.card-art .card-name-art{display:flex;align-items:center;justify-content:center;height:100%;padding:12px;font-weight:600;text-align:center;background:linear-gradient(135deg,#2a2418,#121212)}
.card:hover .card-art,.card:focus-visible .card-art{transform:scale(1.03);box-shadow:0 0 0 1px #f1d59080,0 14px 30px #000a,0 0 24px #d4a24c33}
.card:focus-visible{outline:none}
.card-name{font-size:15px;font-weight:600;line-height:1.35}
.card-meta{font-size:13px;color:#ffffffa6}
.row-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.row-heading span{font-size:13px;color:#ffffff99}
.row-track{display:grid;grid-auto-flow:column;grid-auto-columns:max(220px,calc((100% - 36px) / 4));gap:12px;list-style:none;margin:0 calc(-1 * var(--side));padding:4px var(--side) 12px;
  overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--side)}
.row-track::-webkit-scrollbar{display:none}
.row-track>li{scroll-snap-align:start;min-width:0}

/* The one plan, as Netflix's plan cards; the price is filled in by catalogue.js. */
.plan-card{display:flex;flex-direction:column;max-width:440px;min-height:200px;padding:24px 24px 22px;border-radius:14px;
  background:linear-gradient(150deg,#4b3815 0%,#271b0b 55%,#130d06 100%);box-shadow:inset 0 0 0 1px #f1d59047,inset 0 1px 0 #ffffff1f,0 20px 50px #0007}
.plan-card h3{font-size:22px;font-weight:600}
.plan-features{display:grid;gap:6px;list-style:none;margin:12px 0 0;padding:0}
.plan-features li{position:relative;padding-left:26px;font-size:14px;line-height:1.45;color:#ece6da}
.plan-features li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;background:linear-gradient(135deg,#f6e3a8,#d9ad5a);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E") center/contain no-repeat}
.plan-price{display:flex;align-items:baseline;gap:3px;margin-top:auto;padding-top:20px}
.plan-price strong{font-size:18px;font-weight:600;color:var(--cream)}
.plan-price span{font-size:15px;color:#ffffffcc}
.plan-tax{margin-top:2px;font-size:13px;color:#ffffff99}

/* Netflix's "Discover your next favorites" strip, then Get Started; the same pill follows the visitor down. */
.discover{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;min-height:92px;margin-top:44px;padding:20px 28px;border-radius:16px;box-shadow:inset 0 0 0 1px #ffffff24}
.discover-art{position:absolute;top:50%;left:54%;z-index:-2;display:flex;gap:8px;width:max-content;transform:translateY(-50%) rotate(-5deg);transform-origin:0 50%}
.discover-art img{flex:none;width:clamp(140px,11vw,190px);aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.discover::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0d0b08f2 0,#0d0b08d9 40%,#0d0b0866 62%,#0d0b0833 100%)}
.discover h2{max-width:min(500px,48%);font-size:clamp(17px,1.5vw,22px);font-weight:700;line-height:1.3;text-wrap:balance}
.discover .glass-button{flex:none;min-height:38px;padding:0 18px;font-size:14px}
.join-end{display:flex;justify-content:center;padding:36px 16px 0}
.join-end .gold-button{min-width:min(240px,100%);min-height:48px;font-size:17px}
.sticky-join{position:fixed;left:50%;bottom:18px;z-index:30;min-width:min(260px,calc(100% - 48px));min-height:50px;font-size:18px;font-weight:600;box-shadow:0 0 18px #f1d59040,0 10px 30px #000a,inset 0 1px 0 #fff6;
  opacity:0;visibility:hidden;transform:translate(-50%,16px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.sticky-join.is-shown{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s ease,transform .25s ease}
.sticky-join:hover{transform:translate(-50%,-1px)}

/* ---- The catalogue (/shortfilms): the same screen, with the films' pictures in place of a clip ---------------- */
/* As Netflix's Movies page (owner, 9 Nov 2026): the screen's size, the name and the email at its lower left. */
.films-hero{height:max(440px,min(74vh,52vw))}
.wall{position:absolute;top:50%;left:50%;z-index:-2;display:flex;flex-direction:column;width:max-content;gap:clamp(8px,1vw,16px);transform:translate(-50%,-50%) rotate(-12deg);pointer-events:none;--wall-picture:clamp(150px,15vw,270px)}
.wall-row{display:flex;width:max-content;gap:clamp(8px,1vw,16px)}
.wall-row:nth-child(even){transform:translateX(calc(var(--wall-picture) / -2))}
.wall img{flex:none;width:var(--wall-picture);aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:#111;box-shadow:0 10px 30px #000a}
.films-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#000000eb 0,#000000b3 30%,#00000059 55%,#00000014 80%),linear-gradient(0deg,#000000b3 0,#0000 40%)}
.films-hero-copy{position:absolute;left:clamp(24px,6vw,104px);bottom:calc(var(--curve) + clamp(36px,9%,96px));width:min(600px,calc(100% - 48px));display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.4vw,20px)}
.films-hero h1{font-size:clamp(38px,4.4vw,68px);font-weight:700;line-height:1.05;letter-spacing:-.02em;text-shadow:0 4px 24px #000c}
.films-hero p{font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:#f3efe6;max-width:560px;text-shadow:0 1px 10px #000a}
.films-hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.films-hero .actions .gold-button{min-width:min(240px,100%);min-height:48px;font-size:17px}
/* Behind the whole of /shortfilms: the same wall of pictures, blurred (owner: "the background we have on the picture
   on top but blurred"). */
.backdrop.is-wall .wall{z-index:0;--wall-picture:clamp(240px,26vw,460px);filter:blur(44px) saturate(1.3) brightness(.95)}
.backdrop.is-wall .wall img{position:static;width:var(--wall-picture);height:auto;filter:none;border-radius:0;box-shadow:none}
.backdrop.is-wall::after{background:linear-gradient(180deg,#00000040 0,#00000066 50%,#0000008c 100%)}
.genre-nav{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.genre-nav a{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500;color:#f6f1e7;
  background:linear-gradient(135deg,#ffffff14,#ffffff05 60%,#f1d59010);box-shadow:inset 0 0 0 1px #f1d5904d}
.genre-nav a:hover{color:var(--cream);box-shadow:inset 0 0 0 1px #f1d590a6,0 0 16px #f1d59026}
.row{scroll-margin-top:72px}

/* ---- The footer, as Netflix's: "Questions? Contact us.", then the links in four columns ------------------ */
.cat-footer{margin-top:auto;padding:72px 0 48px}
.cat-footer-inner{width:min(100% - 2*var(--side),1360px);margin:0 auto;font-size:14px;color:#ffffffb3}
.cat-footer-ask a{font-size:16px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}.cat-footer-ask a:hover{color:var(--cream);text-decoration-color:currentColor}
.cat-footer-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:14px 20px;list-style:none;margin:28px 0 0;padding:0}
.cat-footer-links a{font-size:13px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#ffffff59}
.cat-footer-links a:hover{color:var(--cream);text-decoration-color:currentColor}
.cat-footer-made{margin-top:36px;font-size:14px;color:#e6dcc4}
.cat-footer-brand{margin-top:14px;font-size:13px}
.cat-footer-brand small{display:block;margin-top:4px;font-size:12px;letter-spacing:.04em;color:#ffffff80}

@media(max-width:900px){.details{grid-template-columns:repeat(2,minmax(0,1fr))}.details dl{min-height:0}
  .films-hero::after{background:linear-gradient(90deg,#000000eb 0,#000000c7 45%,#00000080 80%,#00000059 100%),linear-gradient(0deg,#000000b3 0,#0000 40%)}
  .title-info{grid-template-columns:1fr}.title-info-side{padding:18px 0 0;border-left:0;border-top:1px solid #ffffff2e;align-self:stretch}}
/* A phone: the clip on top in 16:9, the name and the email under it, in the same card. */
@media(max-width:720px){
  :root{--header:62px;--side:20px}
  .title-hero{width:calc(100% - 24px);height:auto;border-radius:14px;background:#0a0a0ad9}
  .title-hero-media{position:relative;inset:auto;z-index:0;aspect-ratio:16/9}
  .title-hero-media::after{background:linear-gradient(0deg,#0a0a0a 0,#0a0a0a00 45%)}
  .title-hero-copy{position:relative;left:auto;bottom:auto;width:100%;padding:18px 20px calc(var(--curve) + 30px)}
  .clip-controls{right:12px;bottom:12px;gap:8px}
  .clip-button{width:38px;height:38px}
  .films-hero{width:calc(100% - 24px);height:auto;min-height:540px;border-radius:14px;display:flex;align-items:flex-end}
  .films-hero::after{background:linear-gradient(0deg,#000000f2 0,#000000b3 45%,#00000040 100%)}
  .films-hero-copy{position:relative;left:auto;bottom:auto;width:100%;padding:24px 20px calc(var(--curve) + 30px)}
  .email-start.is-inline{grid-template-columns:1fr;justify-items:stretch}.email-start.is-inline .price-line{padding-left:0}
  .title-menu-bar{margin-top:-6px}.title-menu a{padding:7px 12px;font-size:13px}
  .title-info{margin-top:24px;padding:20px}
  .details{grid-template-columns:1fr}
  .row-track{grid-auto-columns:68vw}
  .discover{flex-direction:column;align-items:flex-start}.discover h2{max-width:none}.discover-art{left:30%}
  .cat-footer-links{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto)}
}
@media(prefers-reduced-motion:reduce){.gold-button,.card-art,.title-hero-clip,.clip-button,.clip-thumb img,.backdrop canvas,.sticky-join,.title-menu a,.title-menu-bar::before{transition:none}}