/* ==========================================================================
   Salma Abusamra, design system
   Cinematic dark. The film stills carry the colour.
   Fonts are self-hosted (see fonts.css) so no visitor IP reaches Google.
   ========================================================================== */

:root {
  /* Ink, the room the films are screened in */
  --ink:        #0B0B0C;
  --ink-raised: #131316;
  --ink-card:   #17171B;

  /* Paper, warm off-white, never pure white */
  --paper:      #F2EEE6;
  --paper-mid:  #B6B0A6;
  --paper-dim:  #857F76;

  /* Accents pulled from her own frames */
  --gold:       #E0A526;  /* the marigold tobe on the ridge, Survivors */
  --gold-soft:  #F0C97A;
  --red:        #8C2027;  /* the red handprints on the revolution mural */

  --line:       rgba(242, 238, 230, 0.14);
  --line-soft:  rgba(242, 238, 230, 0.07);

  /* Type */
  --script:  "Allura", "Snell Roundhand", cursive;
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --display-ar: "El Messiri", "Tajawal", sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rhythm, deliberately tight. Empty space should feel composed, not forgotten. */
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --gap: clamp(1.5rem, 3vw, 2.75rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Text on a gold fill, bars and fades: these change in light mode */
  --on-gold:    #0B0B0C;
  --bar-bg:     rgba(11, 11, 12, 0.92);
  --header-fade: linear-gradient(to bottom,
    rgba(11,11,12,0.72) 0%, rgba(11,11,12,0.5) 45%, rgba(11,11,12,0) 100%);
  --error-text: #E88B92;
  --grain-opacity: 0.3;
  color-scheme: dark;
}

/* ==========================================================================
   Light mode (html[data-theme="light"], chosen with the sun button).
   Warm paper instead of ink. The gold turns to a deeper bronze so small
   gold text stays readable on the light page. The photo blocks (home hero,
   project heroes, the mural band, the photo viewer) stay dark, like a
   screen in a bright room, and so does the header while it floats over
   one of them.
   ========================================================================== */
html[data-theme="light"] {
  color-scheme: light;
  --ink:        #F3EFE7;
  --ink-raised: #EBE6DC;
  --ink-card:   #E3DDD1;
  --paper:      #17161A;
  --paper-mid:  #4A453E;
  --paper-dim:  #6B655B;
  --gold:       #8F6100;
  --gold-soft:  #6F4B00;
  --on-gold:    #FBF6EC;
  --line:       rgba(23, 22, 26, 0.16);
  --line-soft:  rgba(23, 22, 26, 0.09);
  --bar-bg:     rgba(243, 239, 231, 0.93);
  --header-fade: none;
  --error-text: #9B1C24;
  --grain-opacity: 0.12;
}
html[data-theme="light"] :is(.hero, .film-hero, .lb),
html[data-theme="light"] body:has(.hero, .film-hero) .site-header:not(.is-stuck):not(.menu-open) {
  color-scheme: dark;
  color: #F2EEE6;   /* inherited text colour does not follow the tokens by itself */
  --ink:        #0B0B0C;
  --ink-raised: #131316;
  --ink-card:   #17171B;
  --paper:      #F2EEE6;
  --paper-mid:  #B6B0A6;
  --paper-dim:  #857F76;
  --gold:       #E0A526;
  --gold-soft:  #F0C97A;
  --on-gold:    #0B0B0C;
  --line:       rgba(242, 238, 230, 0.14);
  --line-soft:  rgba(242, 238, 230, 0.07);
  --header-fade: linear-gradient(to bottom,
    rgba(11,11,12,0.72) 0%, rgba(11,11,12,0.5) 45%, rgba(11,11,12,0) 100%);
}
/* the stuck header, the filter bar and the menu take the page colour */
html[data-theme="light"] .site-header.is-stuck { background: var(--bar-bg); }

/* Arabic gets its own faces. El Messiri is modern and open, not a classical
   naskh serif; Tajawal keeps body copy clean at small sizes. */
html[lang="ar"] {
  --display-ar: "El Messiri", "Tajawal", sans-serif;
  --script:  "El Messiri", "Tajawal", sans-serif;
  --display: "El Messiri", "Tajawal", sans-serif;
  --body:    "Tajawal", "El Messiri", sans-serif;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(0.975rem, 0.93rem + 0.2vw, 1.0625rem);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html.i18n-pending body { visibility: hidden; }

img, picture, video, iframe, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
html[lang="ar"] h1, html[lang="ar"] h2,
html[lang="ar"] h3, html[lang="ar"] h4 {
  letter-spacing: 0;
  line-height: 1.35;
  font-weight: 600;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold); color: var(--on-gold); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 999;
  background: var(--gold);
  color: var(--on-gold);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Grain

   Large dark gradients band into visible stripes on 8-bit screens, that is
   the "glitching lines" effect. A fine noise layer dithers them away.
   ========================================================================== */

.grain {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  background-image: url("../img/grain.png");
  background-size: 160px 160px;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section + .section { padding-top: 0; }

.eyebrow {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-out) 0.15s;
}
html[dir="rtl"] .eyebrow::after { transform-origin: right center; }
.eyebrow.is-visible::after { transform: scaleX(1); }
html[lang="ar"] .eyebrow { letter-spacing: 0; font-size: 0.85rem; }

.section-title {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  margin-bottom: 0.85rem;
}

.lede {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--paper);
  max-width: 44rem;
}

.muted { color: var(--paper-mid); }


/* ==========================================================================
   Buttons & links
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.7rem;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease);
}
/* A gold panel wipes up through the button on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
  z-index: -1;
}
.btn:hover, .btn:focus-visible { color: var(--on-gold); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }

.btn--solid { background: var(--gold); color: var(--on-gold); }
.btn--solid::before { background: var(--gold-soft); }

html[lang="ar"] .btn { letter-spacing: 0; font-size: 0.9rem; }

.link-u {
  color: var(--paper);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.4s var(--ease), color 0.3s var(--ease);
  padding-bottom: 2px;
}
.link-u:hover, .link-u:focus-visible { background-size: 100% 1px; color: var(--gold); }
html[dir="rtl"] .link-u { background-position: 100% 100%; }

/* A name inside a sentence that links out (filmArche on About): bold, with
   a thin gold underline that turns fully gold on hover */
.school-link {
  font-weight: 600;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.3s var(--ease);
}
.school-link:hover, .school-link:focus-visible { color: var(--gold); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.arrow-link svg { transition: transform 0.4s var(--ease-out); flex: none; }
.arrow-link:hover svg { transform: translateX(7px); }
html[dir="rtl"] .arrow-link svg { transform: scaleX(-1); }
html[dir="rtl"] .arrow-link:hover svg { transform: scaleX(-1) translateX(7px); }
html[lang="ar"] .arrow-link { letter-spacing: 0; font-size: 0.9rem; }

/* A back arrow points to where reading starts: left in English and German,
   right in Arabic, and nudges further that way on hover. These come after the
   generic arrow rules above, so they win at equal specificity. */
.arrow-link--back svg { transform: scaleX(-1); }
.arrow-link--back:hover svg { transform: scaleX(-1) translateX(7px); }
html[dir="rtl"] .arrow-link--back svg { transform: scaleX(1); }
html[dir="rtl"] .arrow-link--back:hover svg { transform: scaleX(1) translateX(7px); }

/* Small tertiary link, e.g. "Watch on YouTube" */
.ext-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
  transition: color 0.3s var(--ease);
}
.ext-link:hover { color: var(--gold); }
html[lang="ar"] .ext-link { letter-spacing: 0; font-size: 0.88rem; }

/* ==========================================================================
   Scroll progress
   ========================================================================== */

.progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 300;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
html[dir="rtl"] .progress { transform-origin: right center; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 200;
  padding-block: 1.25rem;
  border-bottom: 1px solid transparent;
  transition: background 0.45s var(--ease), padding 0.45s var(--ease),
              border-color 0.45s var(--ease), transform 0.45s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--header-fade);
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
}
.site-header.is-stuck {
  background: rgba(11, 11, 12, 0.9);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-bottom-color: var(--line-soft);
  padding-block: 0.7rem;
}
.site-header.is-stuck::before { opacity: 0; }
/* Slide the bar away when reading downwards, bring it back on the way up */
.site-header.is-hidden { transform: translateY(-101%); }

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  font-family: var(--script);
  font-size: clamp(1.5rem, 1.2rem + 0.7vw, 1.95rem);
  line-height: 1;
  white-space: nowrap;
  padding-block: 0.1em;

  /* The signature draws itself in on load in reading direction, like a pen
     stroke. On hover a highlight travels across the letters the same way. Both effects live on the
     one element because the label is a single text node the translator owns. */
  background-image: linear-gradient(105deg,
    var(--paper) 0%, var(--paper) 40%,
    var(--gold-soft) 48%, var(--gold) 52%,
    var(--paper) 60%, var(--paper) 100%);
  background-size: 320% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: background-position 1s var(--ease-out);
  animation: brandWrite 1.15s var(--ease-out) 0.15s both;
}
.brand:hover, .brand:focus-visible { background-position: 0 0; }

@keyframes brandWrite {
  from { clip-path: inset(-20% 100% -30% -5%); }
  to   { clip-path: inset(-20% -5% -30% -5%); }
}
/* Arabic is written right to left, so the signature draws in from the right. */
@keyframes brandWriteRTL {
  from { clip-path: inset(-20% -5% -30% 100%); }
  to   { clip-path: inset(-20% -5% -30% -5%); }
}
html[dir="rtl"] .brand {
  animation-name: brandWriteRTL;
}

/* The hover light travels in reading direction too. In Arabic it rests past
   the right edge and sweeps right to left, and the band slants the mirrored
   way (255deg instead of 105deg). Inside @supports, so a browser that cannot
   clip a background to text keeps the plain-ink fallback below. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html[dir="rtl"] .brand {
    background-image: linear-gradient(255deg,
      var(--paper) 0%, var(--paper) 40%,
      var(--gold-soft) 48%, var(--gold) 52%,
      var(--paper) 60%, var(--paper) 100%);
    background-position: 0 0;
  }
  html[dir="rtl"] .brand:hover,
  html[dir="rtl"] .brand:focus-visible { background-position: 100% 0; }
}

/* If a browser cannot clip a background to text, fall back to plain ink */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand { color: var(--paper); -webkit-text-fill-color: currentColor; background-image: none; }
  .brand:hover { color: var(--gold); }
}
html[lang="ar"] .brand { font-size: 1.25rem; font-weight: 600; }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-mid);
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.3s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s var(--ease-out);
}
html[dir="rtl"] .nav-links a::after { transform-origin: left center; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--paper); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left center; }
html[dir="rtl"] .nav-links a:hover::after { transform-origin: right center; }
.nav-links a[aria-current="page"] { color: var(--paper); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
html[lang="ar"] .nav-links a { letter-spacing: 0; font-size: 0.92rem; }

.lang {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  border: 1px solid var(--line);
  padding: 0.15rem;
  flex: none;
}
.lang button {
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-dim);
  background: none;
  border: 0;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
  min-width: 2rem;
}
.lang button:hover { color: var(--paper); }

/* Light / dark switch, beside the languages and the same height */
.theme-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.05rem;
  height: 2.05rem;
  padding: 0;
  margin-inline-start: calc(0.6rem - clamp(1.25rem, 2.5vw, 2.25rem));
  border: 1px solid var(--line);
  background: none;
  color: var(--paper-mid);
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--gold); border-color: var(--gold); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .ti-moon { display: none; }
html[data-theme="light"] .theme-toggle .ti-sun { display: none; }
html[data-theme="light"] .theme-toggle .ti-moon { display: block; }
.lang button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  flex: none;
}
.menu-toggle span {
  position: absolute;
  inset-inline: 12px;
  height: 1px;
  background: var(--paper);
  transition: transform 0.4s var(--ease-out), opacity 0.2s var(--ease);
}
.menu-toggle span:nth-child(1) { top: 16px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:nth-child(3) { top: 26px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 880px) {
  .menu-toggle { display: block; z-index: 2; }
  .nav {
    position: fixed;
    inset: 0;
    background: var(--ink);
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease);
  }
  .nav.is-open { opacity: 1; pointer-events: auto; }
  /* The stuck header's blur (and its slide transform) turns it into the box
     that a fixed child is measured against, which squeezed the open menu into
     the thin bar after scrolling. While the menu is open, drop both so the
     menu always covers the whole screen. */
  .site-header.menu-open {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    transition: none;
  }
  .site-header.menu-open::before { opacity: 0; }
  body.menu-lock .progress { opacity: 0; }
  .nav-links { flex-direction: column; gap: 1.75rem; }
  .nav-links a { font-size: 1.15rem; letter-spacing: 0.18em; }
  .nav.is-open .nav-links li { animation: menuIn 0.5s var(--ease-out) both; }
  .nav.is-open .nav-links li:nth-child(1) { animation-delay: 0.06s; }
  .nav.is-open .nav-links li:nth-child(2) { animation-delay: 0.12s; }
  .nav.is-open .nav-links li:nth-child(3) { animation-delay: 0.18s; }
  .nav.is-open .nav-links li:nth-child(4) { animation-delay: 0.24s; }
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: -6% 0 0;      /* extra room so the parallax never exposes an edge */
  z-index: 0;
  will-change: transform;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero-slide.is-active { opacity: 1; }
/* Without JavaScript nothing marks a slide active, so the hero would be empty.
   The head script sets js-reveal; if scripts are off (or main.js never boots and
   the watchdog clears the class) the first photograph simply shows. */
html:not(.js-reveal) .hero-slide:first-child { opacity: 1; }
.hero-slide picture, .hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-slide img {
  object-fit: cover;
  object-position: 50% 45%;
}
/* On a phone the frame is far narrower than the photograph, so it centres on
   the woman in yellow. From tablet up it anchors left and keeps both women. */
.hero-slide--left img { object-position: 42% 50%; }
@media (min-width: 760px) {
  .hero-slide--left img { object-position: 4% 45%; }
}
/* The exhibition still: on a phone, centre between the two seated women.
   On landscape screens, slide the women away from the text column (the text
   sits left in English and German, right in Arabic). Portrait tablets keep
   the centred crop, or the women would leave the frame. */
.hero-slide--recoiling img { object-position: 41.5% 50%; }
@media (min-aspect-ratio: 4/3) {
  .hero-slide--recoiling img { object-position: 0% 50%; }
  html[dir="rtl"] .hero-slide--recoiling img { object-position: 90% 50%; }
}
/* Quronful: on a portrait screen (phones, upright tablets) the frame shows
   only a narrow strip of the wide still, which landed on the red scarf.
   Slide it so her face, left of centre in the still, is in view. */
@media (max-aspect-ratio: 1/1) {
  .hero-slide--quronful img { object-position: 22% 50%; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 599px) {
  .hero-slide--quronful img { object-position: 27% 50%; }
}
.hero-slide img {
  transform: scale(1.07);
  transition: transform 10s linear;
}
.hero-slide.is-active img { transform: scale(1); }

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Many stops keep the fade smooth instead of stepping into bands */
  background:
    linear-gradient(to top,
      rgba(11,11,12,1) 0%,
      rgba(11,11,12,0.97) 8%,
      rgba(11,11,12,0.86) 18%,
      rgba(11,11,12,0.68) 30%,
      rgba(11,11,12,0.48) 44%,
      rgba(11,11,12,0.34) 58%,
      rgba(11,11,12,0.3) 72%,
      rgba(11,11,12,0.42) 88%,
      rgba(11,11,12,0.6) 100%);
}
.hero-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/grain.png");
  background-size: 160px 160px;
  opacity: 0.4;
  mix-blend-mode: overlay;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(3.5rem, 9vh, 7rem);
  padding-top: 9rem;
}

.hero-role {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.9rem;
}
html[lang="ar"] .hero-role { letter-spacing: 0; font-size: 0.9rem; }

.hero-title {
  font-family: var(--script);
  font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.6rem);
  line-height: 1.08;
  letter-spacing: 0;
  margin: 0 0 1rem;
  padding-block: 0.1em;
}
html[lang="ar"] .hero-title {
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem);
  font-weight: 600;
  line-height: 1.25;
}

.hero-sub {
  font-size: clamp(0.98rem, 0.92rem + 0.35vw, 1.15rem);
  color: var(--paper-mid);
  max-width: 30rem;
  margin-bottom: 2rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Staggered entrance */
.hero-inner > * {
  opacity: 0;
  transform: translateY(24px);
  animation: heroIn 1s var(--ease-out) both;
}
.hero-inner > *:nth-child(1) { animation-delay: 0.25s; }
.hero-inner > *:nth-child(2) { animation-delay: 0.38s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.52s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.66s; }
@keyframes heroIn {
  to { opacity: 1; transform: none; }
}

/* Slide markers, bottom right */
.hero-dots {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: clamp(3.5rem, 9vh, 7rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-end;
}
html[dir="rtl"] .hero-dots { right: auto; left: var(--gutter); align-items: flex-start; }
.hero-dots button {
  width: 26px;
  height: 2px;
  padding: 0;
  border: 0;
  background: rgba(242, 238, 230, 0.28);
  cursor: pointer;
  transition: background 0.4s var(--ease), width 0.4s var(--ease);
}
.hero-dots button[aria-current="true"] { background: var(--gold); width: 44px; }

@media (max-width: 880px) { .hero-dots { display: none; } }

/* ==========================================================================
   Work, home grid
   Every card uses the same frame ratio, so the row reads as one system.
   ========================================================================== */

.work-grid {
  display: grid;
  gap: var(--gap);
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 940px) { .work-grid--thirds { grid-template-columns: repeat(3, 1fr); } }

.work-card { position: relative; display: flex; flex-direction: column; }

.work-card__media {
  position: relative;
  overflow: hidden;
  background: var(--ink-card);
  aspect-ratio: 3 / 2;
}
.work-card__media picture { display: block; width: 100%; height: 100%; }
.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out), filter 0.6s var(--ease);
  filter: saturate(0.92) brightness(0.92);
}
.work-card:hover .work-card__media img,
.work-card:focus-visible .work-card__media img {
  transform: scale(1.05);
  filter: saturate(1.05) brightness(1);
}
/* Thin gold rule sweeps along the bottom of the frame on hover */
.work-card__media::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease-out);
  z-index: 2;
}
html[dir="rtl"] .work-card__media::after { transform-origin: right center; }
.work-card:hover .work-card__media::after { transform: scaleX(1); }

.work-card__body { padding-top: 1.1rem; }

.work-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 0.5rem;
}
.work-card__meta .is-accent { color: var(--gold); }
html[lang="ar"] .work-card__meta { letter-spacing: 0; font-size: 0.82rem; }

.work-card__title {
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);
  margin-bottom: 0.45rem;
  transition: color 0.3s var(--ease);
}
.work-card:hover .work-card__title { color: var(--gold); }



.work-card__text {
  color: var(--paper-mid);
  font-size: 0.94rem;
  max-width: 30rem;
}

.badge {
  position: absolute;
  top: 0.9rem;
  inset-inline-start: 0.9rem;
  z-index: 3;
  background: rgba(11, 11, 12, 0.78);
  backdrop-filter: blur(6px);
  color: #E0A526;   /* always on a dark chip over a picture, so the bright gold in both modes */
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
}
html[lang="ar"] .badge { letter-spacing: 0; font-size: 0.78rem; }

/* Play glyph */
.play-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}
.play-mark span {
  width: 64px; height: 64px;
  border: 1px solid rgba(242,238,230,0.55);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(11,11,12,0.3);
  backdrop-filter: blur(3px);
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.45s var(--ease-out);
}
.work-card:hover .play-mark span,
.video-facade:hover .play-mark span {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.1);
}
/* The play triangle points right in every language: media controls are not
   mirrored in Arabic. The 3px nudge to the right centres it in the circle. */
.play-mark svg { fill: var(--paper); transition: fill 0.45s var(--ease); margin-left: 3px; }
.work-card:hover .play-mark svg, .video-facade:hover .play-mark svg { fill: var(--ink); }

/* ==========================================================================
   Work, filmography index
   A numbered editorial list. Reads like a filmography, not a tile wall.
   ========================================================================== */

/* No top border here: the eyebrow above already draws the section rule. */
.filmography { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

.film-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line);
  align-items: center;
}
@media (min-width: 760px) {
  .film-row {
    grid-template-columns: 3rem minmax(0, 15rem) minmax(0, 1fr) 2.5rem;
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }
}

.film-row__no {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--paper-dim);
  letter-spacing: 0.1em;
  transition: color 0.4s var(--ease);
}
.film-row:hover .film-row__no { color: var(--gold); }

.film-row__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ink-card);
}
.film-row__media picture { display: block; width: 100%; height: 100%; }
.film-row__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.88);
  transform: scale(1.02);
  transition: transform 0.9s var(--ease-out), filter 0.6s var(--ease);
}
.film-row:hover .film-row__media img { transform: scale(1.09); filter: saturate(1.05) brightness(1); }

.film-row__title {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.4rem);
  margin-bottom: 0.4rem;
  transition: color 0.35s var(--ease);
}
.film-row:hover .film-row__title { color: var(--gold); }

.film-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 0.55rem;
}
.film-row__meta .is-accent { color: var(--gold); }
html[lang="ar"] .film-row__meta { letter-spacing: 0; font-size: 0.82rem; }

.film-row__text { color: var(--paper-mid); font-size: 0.94rem; max-width: 34rem; }

.film-row__go {
  justify-self: end;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s var(--ease), transform 0.45s var(--ease-out);
}
html[dir="rtl"] .film-row__go { justify-self: start; transform: scaleX(-1) translateX(-10px); }
.film-row:hover .film-row__go { opacity: 1; transform: none; }
html[dir="rtl"] .film-row:hover .film-row__go { transform: scaleX(-1); }
@media (max-width: 759px) { .film-row__go { display: none; } }

/* The whole row is clickable (picture, text and arrow), but the heading stays
   the real link. The link itself must NOT be positioned: its ::after then
   stretches over the whole .film-row (position: relative) instead of only
   over the heading text. */
.film-row__link { position: static; }
.film-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ==========================================================================
   Video facade
   The YouTube player is only fetched after a click, so no request reaches
   Google, and no consent banner is needed, until the visitor asks for it.
   ========================================================================== */

.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--ink-card);
  overflow: hidden;
  display: block;
}
.video-facade picture { display: block; width: 100%; height: 100%; }
.video-facade img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.9);
  transition: transform 0.9s var(--ease-out), filter 0.5s var(--ease);
}
.video-facade:hover img { transform: scale(1.04); filter: brightness(0.7); }
.video-facade iframe { width: 100%; height: 100%; border: 0; }
.video-facade video { display: block; width: 100%; height: 100%; background: #000; object-fit: contain; }
.video-facade--43 { aspect-ratio: 4 / 3; }
.video-facade.is-playing { cursor: default; }
.video-facade.is-playing .play-mark { display: none; }

/* The small line under a video. It starts on the video's left edge and
   may use its full width; "Watch on YouTube" sits on the right edge, on
   the first line. When there is no room (phones), the link drops under
   the text, on the same left edge. */
.video-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem 2rem;
  font-size: 0.8rem;
  color: var(--paper-dim);
  margin-top: 0.9rem;
  line-height: 1.6;
}
.video-note__text { flex: 1 1 20rem; max-width: 40rem; }
.video-note .ext-link { flex: none; color: var(--paper-mid); }
.video-note .ext-link:hover { color: var(--gold); }
html[lang="ar"] .video-note { font-size: 0.88rem; line-height: 1.75; }
/* In a video card the note closes the card, right under the YouTube link */
.work-card__body .video-note { margin-top: 0.55rem; }

/* Commissioned cards: when one title takes two lines, the YouTube link and
   the note still line up with the cards beside it */
.work-card:has(.play-card__foot) .work-card__body { flex: 1; display: flex; flex-direction: column; }
.work-card__body .play-card__foot { margin-top: auto; padding-top: 0.7rem; }

/* A card whose media plays inline: caption row under the frame */
.play-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.7rem;
}

/* ==========================================================================
   Work page filter bar
   Sticks under the header (or at the very top while the header is slid
   away). One button per group; the gold one is the group on show.
   ========================================================================== */

.work-filter {
  position: sticky;
  top: var(--hdr, 0px);
  z-index: 150;
  background: var(--bar-bg);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: top 0.45s var(--ease), border-color 0.3s var(--ease);
}
.work-filter.is-stuck { border-bottom-color: var(--line-soft); }
.work-filter__row {
  display: flex;
  gap: 0.5rem;
  padding-block: 0.9rem;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.work-filter__row::-webkit-scrollbar { display: none; }
/* more buttons off to the side: the row fades out at that edge */
.work-filter__row.has-more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}
html[dir="rtl"] .work-filter__row.has-more {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
}
.chip {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--paper-mid);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.chip:hover { color: var(--paper); border-color: var(--paper-dim); }
.chip.is-active { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.chip__n { font-size: 0.62rem; letter-spacing: 0.04em; opacity: 0.65; }
html[lang="ar"] .chip { letter-spacing: 0; font-size: 0.86rem; }
html[lang="ar"] .chip__n { font-size: 0.78rem; }
/* the first list follows the bar closely, like it follows the page head */
.work-lists > .section:first-child { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
/* when one group is shown alone, it starts at the same distance from the bar */
.section[hidden] + .section:not([hidden]) { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* --------------------------------------------------------------------------
   Work overview ("All"): the same lists as a contact sheet. Small frames
   side by side, each list under its own name, lists sharing a row when they
   are short (the section's data-n = how many projects it holds). Four
   frames across on wide screens, three on tablets, two on phones. One
   click on a list button shows that list as the full numbered index.
   -------------------------------------------------------------------------- */
.work-lists.is-overview {
  --cols: 2;
  --ov-gap: clamp(0.85rem, 2vw, 1.75rem);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--ov-gap);
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter) 0;
}
@media (min-width: 760px)  { .work-lists.is-overview { --cols: 3; } }
@media (min-width: 1100px) { .work-lists.is-overview { --cols: 4; } }

.is-overview > .section {
  grid-column: 1 / -1;
  grid-row: span 2;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  column-gap: var(--ov-gap);
  padding: 0;
  min-width: 0;
}
.is-overview > .section[hidden] { display: none; }
.is-overview > .section[data-n="1"] { grid-column: span 1; }
@media (min-width: 760px)  { .is-overview > .section[data-n="2"] { grid-column: span 2; } }
@media (min-width: 1100px) { .is-overview > .section[data-n="3"] { grid-column: span 3; } }
.is-overview > .section > .wrap { display: contents; }
/* list names in one row share a line; a name on two lines pushes no card down */
.is-overview > .section > .wrap > .eyebrow { grid-column: 1 / -1; grid-row: 1; align-self: end; margin-bottom: 1.1rem; }
.is-overview .filmography,
.is-overview .work-grid {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: subgrid;
  column-gap: var(--ov-gap);
  row-gap: clamp(1.75rem, 3vw, 2.25rem);
  align-content: start;
  margin: 0 0 clamp(2.5rem, 5vw, 3.75rem);
}
/* the frames share row lines (below), so the space between two rows of
   frames sits under each title instead of in the grid gap */
.is-overview .filmography {
  --ov-row: clamp(1.75rem, 3vw, 2.25rem);
  row-gap: 0;
  margin-bottom: calc(clamp(2.5rem, 5vw, 3.75rem) - var(--ov-row));
}
/* Each frame spans three rows of its list (picture, type and year, title)
   and shares them with its neighbours, so when a type wraps to two lines in
   one card (longer in German), the titles in that row still start level. */
.is-overview .film-row {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
  padding: 0;
  border: 0;
  align-items: start;
}
.is-overview .film-row > div:not([class]) { display: contents; }
.is-overview .film-row__no,
.is-overview .film-row__text,
.is-overview .film-row__go,
.is-overview .film-row__runtime { display: none; }
.is-overview .film-row__media { margin-bottom: 0.95rem; }
.is-overview .film-row__meta { margin-bottom: 0.4rem; gap: 0.25rem 0.7rem; letter-spacing: 0.14em; }
.is-overview .film-row__title { font-size: clamp(1.2rem, 1.02rem + 0.6vw, 1.55rem); line-height: 1.12; margin: 0 0 var(--ov-row); }
html[lang="ar"] .is-overview .film-row__title { line-height: 1.4; }
.is-overview .work-card__title { font-size: clamp(1.2rem, 1.02rem + 0.6vw, 1.55rem); line-height: 1.12; }
html[lang="ar"] .is-overview .work-card__title { line-height: 1.4; }
/* the page ends one call-to-action gap below the last row */
.work-lists.is-overview + .section--tight { padding-top: 0; }
@media (max-width: 559px) {
  /* two frames across: type on one line and year under it in every card,
     so lists that sit side by side also start their titles level */
  .is-overview .film-row__meta { flex-direction: column; gap: 0.1rem; }
  .is-overview .film-row__meta,
  .is-overview .work-card__meta { font-size: 0.62rem; letter-spacing: 0.12em; }
  html[lang="ar"] .is-overview .film-row__meta,
  html[lang="ar"] .is-overview .work-card__meta { font-size: 0.78rem; letter-spacing: 0; }
  .is-overview .work-card .play-mark span { width: 48px; height: 48px; }
}

/* ==========================================================================
   Film detail page
   ========================================================================== */

.film-hero {
  position: relative;
  min-height: min(72svh, 660px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.film-hero > picture { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.film-hero > picture img { width: 100%; height: 100%; object-fit: cover; }
.film-hero .hero-scrim { z-index: 1; }
.film-hero .wrap {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-top: 8.5rem;
}

.film-title {
  font-size: clamp(2.4rem, 1.4rem + 4.6vw, 5rem);
  line-height: 1;
  margin-bottom: 0.4rem;
}


.film-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--paper-mid);
  margin: 0;
}
html[lang="ar"] .film-meta { letter-spacing: 0; font-size: 0.85rem; }

.film-body {
  display: grid;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 940px) {
  .film-body { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}

.credits { list-style: none; margin: 0; padding: 0; }
.credits li {
  display: grid;
  grid-template-columns: minmax(7.5rem, 40%) 1fr;
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9rem;
}
.credits .k {
  color: var(--paper-dim);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-top: 0.25rem;
}
html[lang="ar"] .credits .k { letter-spacing: 0; font-size: 0.82rem; }

/* Blue Nile Stories: outputs list, two screens, story icons, logo card */
.bn-outputs { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.bn-outputs li {
  position: relative;
  padding-inline-start: 1.4rem;
  color: var(--paper-mid);
  font-size: 0.95rem;
  line-height: 1.6;
}
.bn-outputs li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.78em;
  width: 0.7rem;
  height: 1px;
  background: var(--gold);
}
/* A square poster keeps its shape in the portrait frame */
.about-portrait.about-portrait--square img { aspect-ratio: 1 / 1; }
.bn-icons {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(0.35rem, 1vw, 0.75rem);
  margin-top: 1rem;
}
@media (max-width: 559px) { .bn-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bn-icons img { display: block; width: 100%; height: auto; }
.bn-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.75rem;
  background: var(--ink-card);
  border: 1px solid var(--line-soft);
}
.bn-logo img { display: block; width: 96px; height: auto; flex: none; }
.bn-logo p { margin: 0; }
.bn-logo__title { font-family: var(--display); font-size: 1.5rem; line-height: 1.15; color: var(--paper); }
.bn-logo__sub { margin-top: 0.3rem !important; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); }
html[lang="ar"] .bn-logo__sub { letter-spacing: 0; font-size: 0.85rem; }

/* Blue Nile: in the side column the logo card is the growing element */
.bn-logo.aside-grow {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 1.1rem;
  padding: 2rem 1.5rem;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(46, 132, 190, 0.18), transparent 70%),
    var(--ink-card);
}
.bn-logo.aside-grow img { width: 112px; }
/* The logo card gets the gold frame too, like the pictures on every other
   project page. Its background moves to a layer above the frame, so the
   frame only shows outside the card. */
.bn-logo.aside-grow { position: relative; isolation: isolate; background: none; border: 0; }
.bn-logo.aside-grow::before,
.bn-logo.aside-grow::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.bn-logo.aside-grow::before {
  inset: 0;
  z-index: -1;
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(46, 132, 190, 0.18), transparent 70%),
    var(--ink-card);
}
.bn-logo.aside-grow::after {
  inset-inline-start: -12px;
  top: -12px;
  width: 100%; height: 100%;
  border: 1px solid var(--gold);
  z-index: -2;
}
html[dir="rtl"] .bn-logo.aside-grow::after { inset-inline-start: auto; inset-inline-end: -12px; }
.bn-logo.aside-grow .bn-logo__title { font-size: 1.7rem; }


/* Film and project pages: both columns end on the same line.
   On wide screens the side column stretches to the text column's height and
   its first picture (.aside-fill, or .aside-grow for Blue Nile) takes up the
   difference. On phones the columns stack, and the fill picture is hidden:
   it only exists to balance the two columns. */
/* The side picture carries the same thin gold frame as the portrait on the
   About page: set 12px up and towards the text, behind the picture. */
.aside-fill { position: relative; margin: 0 0 1.75rem; }
.aside-fill a { position: relative; z-index: 1; overflow: hidden; background: var(--ink-card); }
.aside-fill::after {
  content: "";
  position: absolute;
  inset-inline-start: -12px;
  top: -12px;
  width: 100%; height: 100%;
  border: 1px solid var(--gold);
  z-index: 0;
  pointer-events: none;
}
html[dir="rtl"] .aside-fill::after { inset-inline-start: auto; inset-inline-end: -12px; }
.aside-fill a, .aside-fill picture { display: block; width: 100%; height: 100%; }
.aside-fill img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  filter: brightness(0.92);
  transition: transform 0.9s var(--ease-out), filter 0.5s var(--ease);
}
.aside-fill a:hover img { transform: scale(1.03); filter: brightness(1); }
@media (max-width: 939px) { .aside-fill { display: none; } }
@media (min-width: 940px) {
  .film-body--balance { align-items: stretch; }
  .film-body--balance > aside { display: flex; flex-direction: column; }
  .film-body--balance .aside-fill,
  .film-body--balance .aside-grow { flex: 1 1 0; min-height: 9rem; }
  /* Recoiling: the aside may now stretch too; the plinth photo never gets
     smaller than its own 3:4 shape, it only grows */
  .film-body--fill.film-body--balance > aside { align-self: stretch; }
  /* the logo card never gets smaller than its own content */
  .film-body--balance .bn-logo.aside-grow { min-height: auto; }
  .film-body--balance .aside-grow--photo { flex: 1 0 auto; aspect-ratio: 3 / 4; min-height: 0; }
  .aside-grow--photo a, .aside-grow--photo picture { display: block; height: 100%; }
  .aside-grow--photo img { height: 100%; aspect-ratio: auto; }
  /* Quronful: the tall poster, a little narrower */
  .about-portrait--narrow { width: 82%; }
}

/* Exhibition gallery: two columns on phones, four from 940px. The one tall
   photo spans two rows; the others keep their 4:3 shape. */
.ex-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.2vw, 1rem);
}
@media (min-width: 940px) { .ex-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Under the text: small thumbnails, two across on phones, four from 560px.
   Each row is at least 4:3 tall. Beside the details box (940px and up) the
   rows also grow to fill the column, so the photos end level with the box
   whatever the length of the text in each language. The photo is cropped to
   its tile; the viewer always shows it whole. */
.ex-gallery--inline {
  gap: 0.6rem;
  --cols: 2;
  --row-min: calc((100cqw - (var(--cols) - 1) * 0.6rem) / var(--cols) * 0.75);
  grid-auto-rows: minmax(var(--row-min), auto);
}
@media (min-width: 560px) {
  .ex-gallery--inline { grid-template-columns: repeat(4, minmax(0, 1fr)); --cols: 4; }
}
/* The column is the measuring box for the row height above (cqw) */
.fill-grow { container-type: inline-size; }
.ex-gallery--inline figure picture,
.ex-gallery--inline figure img,
.ex-gallery--inline .lb-link { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
@media (min-width: 940px) {
  .film-body--fill { align-items: stretch; }
  .film-body--fill > aside { align-self: start; }
  /* Grid, not flex: the paragraphs sit in a normal block inside, so their
     spacing stays exactly as before; only the photo block takes the rest. */
  .fill-col { display: grid; grid-template-rows: auto 1fr; }
  .fill-grow { flex: 1; display: flex; flex-direction: column; }
  .fill-grow .ex-gallery--inline { flex: 1; grid-auto-rows: minmax(var(--row-min), 1fr); }
}
.ex-gallery figure { margin: 0; overflow: hidden; position: relative; background: var(--ink-card); }
.ex-gallery picture { display: block; }
.ex-gallery img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.ex-gallery .is-tall { grid-row: span 2; }
.ex-gallery .is-tall .lb-link,
.ex-gallery .is-tall picture,
.ex-gallery .is-tall img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.ex-gallery figure:hover img { transform: scale(1.04); }

/* A photo that opens large in the viewer */
.lb-link { display: block; cursor: zoom-in; }

/* ==========================================================================
   Photo viewer (lightbox). Built by main.js; nothing loads from outside.
   ========================================================================== */
html.lb-open { overflow: hidden; }
.lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 8, 9, 0.985);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb-stage { margin: 0; display: grid; justify-items: center; gap: 0.9rem; padding: 4.5rem 5.5rem 3.5rem; max-width: 100%; }
.lb-img {
  max-width: calc(100vw - 11rem);
  max-height: calc(100svh - 10rem);
  width: auto; height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lb-cap { color: var(--paper-mid); font-size: 0.9rem; max-width: 46rem; text-align: center; margin: 0; }
.lb-count {
  position: absolute;
  top: 1.35rem;
  inset-inline-start: 1.5rem;
  margin: 0;
  color: var(--paper-dim);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
}
.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.lb-btn:hover { border-color: var(--gold); color: var(--gold); }
.lb-btn[hidden], .lb-count[hidden] { display: none; }
.lb-close { top: 1rem; inset-inline-end: 1rem; }
.lb-prev, .lb-next { top: 50%; margin-top: -1.5rem; }
.lb-prev { inset-inline-start: 1rem; }
.lb-next { inset-inline-end: 1rem; }
/* Arrows point the way they move: mirrored in Arabic */
.lb-prev svg { transform: scaleX(-1); }
html[dir="rtl"] .lb-prev svg { transform: none; }
html[dir="rtl"] .lb-next svg { transform: scaleX(-1); }
@media (max-width: 759px) {
  .lb-stage { padding: 4.25rem 1rem 5.5rem; }
  .lb-img { max-width: calc(100vw - 2rem); max-height: calc(100svh - 12rem); }
  .lb-prev, .lb-next { top: auto; bottom: 1rem; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .lb { transition: none; } }

/* Oxfam: keep her head in the frame when the hero is wider than 16:9 */
.film-hero--oxfam > picture img { object-position: 50% 30%; }
@media (max-aspect-ratio: 1/1) { .film-hero--oxfam > picture img { object-position: 58% 30%; } }

/* The two women sit left of centre; keep them in frame on a narrow phone. */
.film-hero--recoiling > picture img { object-position: 40% 50%; }

/* ==========================================================================
   About
   ========================================================================== */

.about-strip {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}
@media (min-width: 940px) {
  .about-strip { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
}
.about-portrait { position: relative; }
.about-portrait picture { display: block; }
.about-portrait img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.about-portrait picture { position: relative; z-index: 1; }
.about-portrait::after {
  content: "";
  position: absolute;
  inset-inline-start: -12px;
  top: -12px;
  width: 100%; height: 100%;
  border: 1px solid var(--gold);
  z-index: 0;
  pointer-events: none;
}
html[dir="rtl"] .about-portrait::after { inset-inline-start: auto; inset-inline-end: -12px; }

/* Two-up column block */
.col-2 {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}
@media (min-width: 800px) { .col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.pill-list li {
  border: 1px solid var(--line);
  padding: 0.4rem 0.85rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--paper-mid);
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.pill-list li:hover { border-color: var(--gold); color: var(--gold); }
html[lang="ar"] .pill-list li { letter-spacing: 0; font-size: 0.85rem; }

/* ==========================================================================
   Manifesto, the mural and the line she works by

   The mural photograph is pale and busy, so text laid over it could not be
   read. The image and the words now sit side by side on the dark ground.
   ========================================================================== */

/* ==========================================================================
   The mural band

   The photograph is a snapshot of a wall: pale, uneven, taken on a phone. Shown
   raw on a dark page it read as something pasted on. So it is graded down into
   the page ink in the image file itself, then run full width as a band whose
   top and bottom melt into the background. No hard edges anywhere.
   ========================================================================== */

.manifesto {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(76svh, 640px);
  min-height: max(min(76svh, 640px), min(40vw, 86svh));   /* taller on wide screens, so her whole face fits */
  overflow: hidden;
  margin-block: var(--section-y);
}
.manifesto > picture { position: absolute; inset: 0; z-index: 0; }
.manifesto > picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% 0%;   /* pinned to the top of the photo, where her face is */
  transform: scale(1.03);
  transition: transform 3s var(--ease-out);
}
.manifesto:hover > picture img { transform: scale(1); }

/* Dark over the empty wall where the quote sits, clear over her face, and
   feathered top and bottom so the band has no visible edge against the page.
   The same in every language: the words always sit where she calls out. */
.manifesto-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to left,
      rgba(11,11,12,0.9) 0%,
      rgba(11,11,12,0.78) 26%,
      rgba(11,11,12,0.3) 54%,
      rgba(11,11,12,0.05) 80%,
      rgba(11,11,12,0.22) 100%),
    linear-gradient(to bottom, rgba(11,11,12,1) 0%, rgba(11,11,12,0) 14%),
    linear-gradient(to top,    rgba(11,11,12,1) 0%, rgba(11,11,12,0) 24%);
}
.manifesto-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/grain.png");
  background-size: 160px 160px;
  opacity: 0.4;
  mix-blend-mode: overlay;
}
.manifesto-inner { position: relative; z-index: 2; width: 100%; }
.manifesto-text {
  max-width: 27rem;
  margin-left: auto;   /* on the empty wall beside her face, in every language */
}

.manifesto-line {
  font-family: var(--display);
  font-size: clamp(1.8rem, 1.15rem + 2.4vw, 3rem);
  line-height: 1.14;
  color: var(--paper);
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
.manifesto-line:empty { display: none; }

.manifesto-body {
  font-size: clamp(0.95rem, 0.92rem + 0.3vw, 1.08rem);
  line-height: 1.65;
  color: var(--paper-mid);
  margin: 0;
}
html[lang="ar"] .manifesto-line { line-height: 1.45; }
html[lang="ar"] .manifesto-body { line-height: 1.8; }
.manifesto-caption {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: 1.5rem 0 0;
}
html[lang="ar"] .manifesto-caption { letter-spacing: 0; font-size: 0.85rem; }

/* Light mode: the mirror of the dark band. The photo melts into the paper
   colour at the top, the bottom and on the quote side, the way it melts into
   black in dark mode, and the quote is set in dark ink on that paper. */
html[data-theme="light"] .manifesto-veil {
  background:
    linear-gradient(to left,
      rgba(243,239,231,0.78) 0%,
      rgba(243,239,231,0.6) 24%,
      rgba(243,239,231,0.2) 50%,
      rgba(243,239,231,0.02) 74%,
      rgba(243,239,231,0.08) 100%),
    linear-gradient(to bottom,
      rgba(243,239,231,1) 0%,
      rgba(243,239,231,0.9) 1.9%,
      rgba(243,239,231,0.7) 3.9%,
      rgba(243,239,231,0.46) 5.9%,
      rgba(243,239,231,0.25) 7.8%,
      rgba(243,239,231,0.1) 9.8%,
      rgba(243,239,231,0.03) 11.7%,
      rgba(243,239,231,0) 13%),
    linear-gradient(to top,
      rgba(243,239,231,1) 0%,
      rgba(243,239,231,0.9) 2.7%,
      rgba(243,239,231,0.7) 5.4%,
      rgba(243,239,231,0.46) 8.1%,
      rgba(243,239,231,0.25) 10.8%,
      rgba(243,239,231,0.1) 13.5%,
      rgba(243,239,231,0.03) 16.2%,
      rgba(243,239,231,0) 18%);
}
html[data-theme="light"] .manifesto-veil::after { opacity: 0.12; }

@media (max-width: 700px) {
  .manifesto { min-height: min(88svh, 620px); }
  .manifesto > picture img { object-position: 34% 40%; }
  .manifesto-veil {
    background:
      linear-gradient(to top,
        rgba(11,11,12,0.97) 0%,
        rgba(11,11,12,0.93) 38%,
        rgba(11,11,12,0.5) 54%,
        rgba(11,11,12,0.12) 70%),
      linear-gradient(to bottom, rgba(11,11,12,1) 0%, rgba(11,11,12,0) 14%);
  }
  .manifesto { align-items: flex-end; padding-bottom: clamp(2rem, 6vw, 3rem); }
  .manifesto-text { max-width: none; }
  /* Light mode on a phone: the words sit low on paper, like on black in dark mode */
  html[data-theme="light"] .manifesto-veil {
    background:
      linear-gradient(to top,
        rgba(243,239,231,1) 0%,
        rgba(243,239,231,0.9) 12%,
        rgba(243,239,231,0.84) 36%,
        rgba(243,239,231,0.4) 52%,
        rgba(243,239,231,0.06) 66%),
      linear-gradient(to bottom,
      rgba(243,239,231,1) 0%,
      rgba(243,239,231,0.9) 1.8%,
      rgba(243,239,231,0.7) 3.6%,
      rgba(243,239,231,0.46) 5.4%,
      rgba(243,239,231,0.25) 7.2%,
      rgba(243,239,231,0.1) 9%,
      rgba(243,239,231,0.03) 10.8%,
      rgba(243,239,231,0) 12%);
  }
}

/* ==========================================================================
   Closing call to action

   Left-aligned on the same grid as everything above it, so the page keeps one
   spine from top to bottom.
   ========================================================================== */

/* Same reason: this block opens with its own eyebrow rule. */
.cta-band { padding-top: clamp(0.5rem, 1vw, 1rem); }
.cta-band .section-title { max-width: 16ch; }
.cta-band .lede { margin-bottom: 1.75rem; }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-grid {
  display: grid;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 940px) {
  /* Equal columns so the form and the details line up on the same baseline */
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  display: grid;
  grid-template-columns: minmax(6.5rem, 30%) 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--line-soft);
}
.contact-list .k {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.contact-list .v { font-size: 1rem; min-width: 0; overflow-wrap: anywhere; }
html[lang="ar"] .contact-list .k { letter-spacing: 0; font-size: 0.84rem; }

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
html[lang="ar"] .field label { letter-spacing: 0; font-size: 0.84rem; }

.field input, .field textarea {
  font-family: var(--body);
  font-size: 0.98rem;
  color: var(--paper);
  background: var(--ink-raised);
  border: 1px solid var(--line);
  padding: 0.8rem 0.9rem;
  width: 100%;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--paper-dim); }
.field input:focus, .field textarea:focus {
  border-color: var(--gold);
  background: var(--ink-card);
  outline: none;
}
.field textarea { resize: vertical; min-height: 130px; }

@media (min-width: 560px) { .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-consent {
  font-size: 0.78rem;
  color: var(--paper-dim);
  line-height: 1.6;
}
.form-consent a { color: var(--paper-mid); text-decoration: underline; text-underline-offset: 3px; }
.form-consent a:hover { color: var(--gold); }

.form-status {
  font-size: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  display: none;
}
.form-status.is-ok { display: block; border-color: var(--gold); color: var(--gold); }
.form-status.is-error { display: block; border-color: var(--red); color: var(--error-text); }

/* ==========================================================================
   Legal pages (Impressum, privacy)
   ========================================================================== */

.prose { max-width: 44rem; }
.prose h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  margin: 2.25rem 0 0.7rem;
}
.prose h3 {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 1.6rem 0 0.45rem;
}
html[lang="ar"] .prose h3 { letter-spacing: 0; font-size: 0.9rem; }
.prose p, .prose li { color: var(--paper-mid); }
.prose ul { padding-inline-start: 1.1rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.4rem; }
.prose a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--gold); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  margin-top: var(--section-y);
}
.footer-top {
  display: grid;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 720px) {
  .footer-top { grid-template-columns: 1.6fr 1fr 1fr; }
}
.footer-title {
  font-family: var(--script);
  font-size: 1.9rem;
  line-height: 1.1;
  margin-bottom: 0.5rem;
  padding-block: 0.08em;
}
html[lang="ar"] .footer-title { font-size: 1.3rem; font-weight: 600; }

.footer-col h2 {
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: 0 0 0.9rem;
}
html[lang="ar"] .footer-col h2 { letter-spacing: 0; font-size: 0.84rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-col a { color: var(--paper-mid); transition: color 0.3s var(--ease); font-size: 0.92rem; }
.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.76rem;
  color: var(--paper-dim);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-legal a { transition: color 0.3s var(--ease); }
.footer-legal a:hover { color: var(--gold); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
html.js-reveal [data-reveal="fade"] { transform: none; }
html.js-reveal [data-reveal="right"] { transform: translateX(-28px); }
html.js-reveal[dir="rtl"] [data-reveal="right"] { transform: translateX(28px); }

html.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

[data-delay="1"] { transition-delay: 0.09s; }
[data-delay="2"] { transition-delay: 0.18s; }
[data-delay="3"] { transition-delay: 0.27s; }
[data-delay="4"] { transition-delay: 0.36s; }

/* Children reveal one after another */
html.js-reveal [data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
html.js-reveal [data-stagger].is-visible > * { opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0.04s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.12s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.20s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.28s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 0.36s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 0.44s; }

/* ==========================================================================
   Right-to-left
   ========================================================================== */

html[dir="rtl"] body { text-align: right; }

/* ==========================================================================
   Reduced motion, everything still works, nothing moves
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal], [data-stagger] > *, .hero-inner > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .hero-slide img { transform: none; }
  .grain { opacity: 0.2; }
  .eyebrow::after { transform: scaleX(1); }
}

/* ==========================================================================
   Interior page headers
   ========================================================================== */

.page-head {
  padding-top: clamp(7rem, 13vh, 9rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.page-head + .section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* 404 */
.notfound {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 7rem var(--gutter) 4rem;
}
.notfound h1 {
  font-size: clamp(4rem, 2rem + 10vw, 9rem);
  line-height: 0.9;
  color: var(--gold);
}

/* ==========================================================================
   Very small screens
   ========================================================================== */

@media (max-width: 380px) {
  :root { --gutter: 1.1rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .contact-list li { grid-template-columns: 1fr; gap: 0.15rem; }
  .credits li { grid-template-columns: 1fr; gap: 0.1rem; }
  .lang button { min-width: 1.8rem; padding: 0.3rem 0.35rem; }
}

/* ==========================================================================
   Touch targets

   On a phone the language buttons were 29x24, too small to hit reliably.
   ========================================================================== */

@media (max-width: 880px) {
  .lang button {
    min-height: 40px;
    min-width: 2.6rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.75rem;
  }
  .nav .lang { padding: 0.25rem; }
  /* in the phone menu it sits under the languages, as big as they are */
  .theme-toggle { width: 50px; height: 50px; margin: 0; }
  .theme-toggle svg { width: 20px; height: 20px; }
}