/* Poseativa design system — "Cena". Two colors only. */

:root{
  --paper:#ffffff;
  --red:#cc0e1d;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--red);
  color:var(--paper);
  font-family:'Familjen Grotesk',sans-serif;
  font-size:16px;
  line-height:1.7;
}
::selection{background:var(--paper);color:var(--red)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- nav ---------- */
.nav{
  position:relative;z-index:3;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;row-gap:12px;
  padding:26px 36px;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
}
.nav ul{display:flex;gap:26px;list-style:none;flex-wrap:wrap}
.nav a{border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color .25s}
.nav a:hover,.nav a[aria-current="page"]{border-color:currentColor}
.nav .brand{font-weight:700}
.nav .lang{display:flex;gap:7px;align-items:baseline}
.nav .lang i{font-style:normal;opacity:.6}
.nav .lang span{font-weight:700;border-bottom:1px solid currentColor;padding-bottom:3px}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:92vh;overflow:hidden;
  display:flex;flex-direction:column;
}
.hero--short{min-height:56vh}
.hero .bg{position:absolute;inset:0;background:var(--red)}
.hero .bg img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.2) brightness(.9);
  mix-blend-mode:screen;
  opacity:.9;
  animation:kenburns 18s ease-in-out infinite alternate;
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(204,14,29,.92) 0%,rgba(204,14,29,.15) 55%)}
.hero .title{position:relative;z-index:2;margin-top:auto;padding:0 36px 56px}
.credit-tag{
  position:absolute;z-index:2;right:14px;bottom:56px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  text-shadow:0 0 8px rgba(120,0,10,.55);
  writing-mode:vertical-rl;max-height:70vh;overflow:hidden;
}
h1{
  font-weight:700;letter-spacing:-.025em;line-height:.92;
  font-size:clamp(52px,9vw,130px);
  text-transform:uppercase;
  animation:fadeup 1.1s ease both;
}
h1.h1--long{font-size:clamp(34px,6vw,84px);line-height:1}
.hero .role{
  font-family:'Newsreader',serif;font-style:italic;font-weight:300;
  font-size:clamp(18px,2.4vw,26px);margin-top:18px;opacity:.95;
  animation:fadeup 1.1s .2s ease both;
}
@keyframes fadeup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero .bg img,h1,.hero .role{animation:none}
}

/* ---------- white sections ---------- */
.act{background:var(--paper);color:var(--red);padding:88px 36px}
.act--tight{padding:56px 36px}
.act .inner{max-width:980px;margin:0 auto}
.act .inner--narrow{max-width:720px}
.label{font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;display:block;margin-bottom:34px}
.lead{
  font-family:'Newsreader',serif;font-style:italic;font-weight:300;
  font-size:clamp(20px,2.6vw,28px);line-height:1.55;
}
.prose p{margin-bottom:1.2em;max-width:64ch}
.prose strong{font-weight:700}
h2{font-size:clamp(26px,3.6vw,40px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;margin-bottom:22px}
.year-h{
  display:flex;align-items:center;gap:18px;
  font-size:13px;letter-spacing:.3em;font-weight:700;
  margin:64px 0 28px;
}
.year-h::after{content:"";flex:1;border-top:1px solid var(--red)}
.year-h:first-of-type{margin-top:0}

/* ---------- film cards ---------- */
.films{display:grid;grid-template-columns:repeat(2,1fr);gap:36px}
.films--3{grid-template-columns:repeat(3,1fr)}
.film{position:relative;overflow:hidden;background:var(--red);aspect-ratio:16/9;display:block}
.film img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.15);mix-blend-mode:screen;
  transition:opacity .35s,transform .6s ease;
}
.film:hover img{opacity:.3;transform:scale(1.04)}
.film .info{
  position:absolute;inset:0;padding:22px;color:var(--paper);
  background:rgba(204,14,29,.86);
  display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;transition:opacity .35s;
}
.film:hover .info{opacity:1}
.film .info h2{font-size:20px;text-transform:uppercase;letter-spacing:0;margin:0}
.film .info p{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-top:6px}
.caption-row{
  display:flex;justify-content:space-between;gap:12px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:10px;
}
.card-title{font-size:19px;text-transform:uppercase;font-weight:700;margin-top:14px}
.card-sub{font-family:'Newsreader',serif;font-style:italic;font-size:16px;margin-top:4px}

/* figure with credit */
figure.duo{background:var(--red);margin:0}
figure.duo img{filter:grayscale(1) contrast(1.15);mix-blend-mode:screen;width:100%}
figure.duo figcaption,
.credit{font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:10px;color:var(--red)}
.onred .credit{color:var(--paper)}

/* ---------- quote ---------- */
.quote{background:var(--paper);color:var(--red);padding:96px 36px;text-align:center}
.quote p{
  font-family:'Newsreader',serif;font-style:italic;font-weight:300;
  font-size:clamp(24px,3.6vw,40px);line-height:1.4;max-width:820px;margin:0 auto;
}
.quote cite{
  display:block;font-family:'Familjen Grotesk',sans-serif;font-style:normal;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;margin-top:26px;font-weight:700;
}

/* ---------- lists ---------- */
.rows{list-style:none}
.rows li{border-top:1px solid var(--red)}
.rows li:last-child{border-bottom:1px solid var(--red)}
.rows a{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:22px 4px;transition:padding-left .25s;
}
.rows a:hover{padding-left:16px}
.rows .t{font-weight:700;font-size:18px;text-transform:uppercase}
.rows .m{font-size:11px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}

/* meta table (credits) */
.meta{display:grid;grid-template-columns:180px 1fr;gap:10px 24px;font-size:14px}
.meta dt{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;padding-top:2px}
.meta dd{margin:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;border:2px solid var(--red);color:var(--red);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  padding:14px 26px;transition:.2s;
}
.btn:hover{background:var(--red);color:var(--paper)}
.btn--onred{border-color:var(--paper);color:var(--paper)}
.btn--onred:hover{background:var(--paper);color:var(--red)}
.btn-row{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- footer ---------- */
.footer{
  background:var(--red);color:var(--paper);
  padding:14px 36px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
}
.footer a{border-bottom:1px solid transparent}
.footer a:hover{border-color:currentColor}

/* breadcrumb-ish back link */
.back{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;display:inline-block;margin-bottom:30px}
.back::before{content:"← "}

@media(max-width:760px){
  .films,.films--3{grid-template-columns:1fr}
  .nav{padding:20px}
  .act,.quote{padding-left:20px;padding-right:20px}
  .hero .title{padding:0 20px 44px}
  .meta{grid-template-columns:1fr}
  .credit-tag{
    writing-mode:horizontal-tb;max-height:none;
    right:20px;bottom:14px;left:20px;text-align:right;
  }
}