:root {
  --ink: #0b0b0b;
  --paper: #edebe4;
  --white: #f4f2ec;
  --ui: 'Familjen Grotesk', 'Onest', system-ui, sans-serif;   /* Onest for Cyrillic, which Familjen lacks */
  --pad: clamp(18px, 2.4vw, 44px);
  --rise: -8deg; /* the mark's horizon */
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--white); font-family: var(--ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
main { overflow-x: clip; }
/* smooth scrolling (Lenis) and no native scrollbar: the page draws its own rail */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* the bar: the whole width of the page, nothing behind it, just his mark and the four words. It steps up out of the way
   while you scroll down and comes back the moment you scroll up or point at the top. White over the films, ink over
   the paper. The part you are in is the word at full strength, with a short rule under it on the mark's slant. */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  height: 88px; padding: 0 var(--pad); color: var(--white); pointer-events: none;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .28);
  transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .4s, color .3s; }
/* each mark and word takes the colour of what is right under it (home.js sets data-on): ink on the paper, white on the
   films. Once the page's own words pass under the bar, its ground is what it is over, so it is never a box: the paper
   on the paper, the ink on the films' ink, and over a film a shade that fades out downward, with no edge. While a part's
   slanted edge passes under it, the ground is split along that same slant (::after is the part coming in). */
.nav [data-on="paper"] { color: var(--ink); text-shadow: none; }
.nav [data-on="ink"] { text-shadow: none; }
.nav [data-on="split"] { color: #fff; text-shadow: none; mix-blend-mode: difference; }
.nav::before, .nav::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: -1; pointer-events: none; opacity: 0;
  transition: opacity .3s; }
.nav::before { clip-path: polygon(0 0, 100% 0, 100% var(--y1, 9999px), 0 var(--y0, 9999px)); }
.nav::after { clip-path: polygon(0 var(--y0, 9999px), 100% var(--y1, 9999px), 100% 100%, 0 100%); }
.nav.solid::before, .nav.solid:not([data-g2=""])::after { opacity: 1; }
.nav[data-g1="paper"]::before, .nav[data-g2="paper"]::after { background: var(--paper); }
.nav[data-g1="ink"]::before, .nav[data-g2="ink"]::after { background: var(--ink); }
.nav[data-g1="film"]::before, .nav[data-g2="film"]::after { height: 150%; background: linear-gradient(rgba(11, 11, 11, .62), rgba(11, 11, 11, .3) 55%, rgba(11, 11, 11, 0)); }
.nav > * { pointer-events: auto; }
/* the bar is there from the first screen, so you know it exists; on the cover JAMES is the mark, so the bar's own mark
   waits until you are through the letter */
.nav.away:not(:focus-within) { opacity: 0; transform: translateY(-70%); }
.nav.away:not(:focus-within) > * { pointer-events: none; }
.nav.cover .logo { opacity: 0; pointer-events: none; }
.nav .logo svg { height: 30px; width: auto; display: block; filter: drop-shadow(0 1px 10px rgba(0, 0, 0, .2)); }
.nav .logo[data-on="paper"] svg { filter: none; }
/* the mark is never cut in two: while a slanted edge runs through it, it steps aside until the edge has passed */
.nav .logo { transition: opacity .25s; }
.nav .logo[data-on="split"] { mix-blend-mode: normal; opacity: 0; }
.nav-links { position: relative; }
.nav-end { display: flex; align-items: center; gap: clamp(30px, 3.2vw, 56px); }
/* the language: its code in the bar, opening the six names, each written in its own language */
.lang { position: relative; font-size: clamp(15px, 1.1vw, 18px); font-weight: 500; }
.lang-b { opacity: .62; padding: 6px 0; letter-spacing: .03em; transition: opacity .3s; }
.lang-b:hover, .lang.open .lang-b { opacity: 1; }
.lang-l { position: absolute; right: -16px; top: calc(100% + 10px); list-style: none; margin: 0; padding: 8px 0; min-width: 156px;
  background: var(--ink); color: var(--white); border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); text-shadow: none;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s .25s; }
.lang.open .lang-l { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1); }
.nav .lang-l { display: block; font-size: 16px; }
.nav .lang-l li { opacity: 1; }
.lang-l button { display: block; width: 100%; text-align: left; padding: 9px 18px; font-size: 16px; font-weight: 500; opacity: .66; transition: opacity .2s; }
.lang-l button:hover, .lang-l button.on { opacity: 1; }
.nav ul { display: flex; gap: clamp(30px, 3.2vw, 56px); list-style: none; margin: 0; padding: 0;
  font-size: clamp(18px, 1.45vw, 24px); font-weight: 500; letter-spacing: -.005em; }
.nav li { opacity: .62; transition: opacity .3s; }
.nav li:hover, .nav li:has(.kc.on), .nav li:has(.kc:focus-visible) { opacity: 1; }
.nav-rule { position: absolute; left: 0; bottom: -7px; width: 0; height: 2px; background: currentColor; opacity: 0;
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.nav-rule.on { opacity: 1; }
/* a knife cut: pointing at a link flicks a blade through it on the mark's horizon, the word's two halves fall away
   like the reel's shots do, and the word comes back in the lettering of one of his films (a different one each time).
   */
.kc { position: relative; display: inline-block; padding: 4px 2px; }
.kc-t { visibility: hidden; }
.kc-h { position: absolute; left: 2px; top: 4px; white-space: nowrap; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s; }
.kc-a { clip-path: polygon(-30% -40%, 130% -40%, 130% 38%, -30% 68%); }
.kc-b { clip-path: polygon(-30% 68%, 130% 38%, 130% 140%, -30% 140%); }
.kc:hover .kc-a, .kc:focus-visible .kc-a { transform: translate(.5em, -.7em) rotate(6deg); opacity: 0;
  transition: transform .42s cubic-bezier(.5,0,.8,.3) .06s, opacity .25s .2s; }
.kc:hover .kc-b, .kc:focus-visible .kc-b { transform: translate(-.35em, .75em) rotate(-4deg); opacity: 0;
  transition: transform .42s cubic-bezier(.5,0,.8,.3) .06s, opacity .25s .2s; }
.kc-f { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1; pointer-events: none; opacity: 0;
  clip-path: polygon(-10% -40%, -10% -40%, -40% 140%, -40% 140%); transition: opacity .15s; }
.kc-f .letter { line-height: 1; }
/* the last word sits on the page's right margin, so its film lettering grows leftward from it */
.nav li:last-child .kc-f { left: auto; right: 0; transform: translateY(-50%); }
.kc:hover .kc-f, .kc:focus-visible .kc-f { opacity: 1; clip-path: polygon(-10% -40%, 160% -40%, 130% 140%, -40% 140%);
  transition: clip-path .42s cubic-bezier(.6,0,.2,1) .14s, opacity 0s .14s; }
.kc::after { content: ''; position: absolute; left: -30%; right: -30%; top: 55%; height: 1px; background: currentColor;
  transform: rotate(var(--rise)) scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.kc:hover::after, .kc:focus-visible::after { animation: kc-blade .32s cubic-bezier(.4,0,.2,1); }
@keyframes kc-blade { 0% { transform: rotate(var(--rise)) scaleX(0); opacity: 1; } 50% { transform: rotate(var(--rise)) scaleX(1); opacity: 1; }
  100% { transform: rotate(var(--rise)) scaleX(1) translateX(40%); opacity: 0; } }
.kc:focus-visible { outline: none; }
.kc.done .kc-a, .kc.done .kc-b { transform: none; opacity: 1; }
.kc.done .kc-f { opacity: 0; }
.kc.done::after { animation: none; }
/* the language sits in the bar as one more word (EN), cut like the others when you point at it; a click cuts Films and
   Contact away and the six languages come in along the same line, each in its own words, the one in use at full
   strength with the rule under it */
.nav-go, .nav-langs, .nav-lang { margin: 0; padding: 0; }
.nav-langs { position: absolute; right: 0; top: 0; pointer-events: none; }
.nav-langs li { opacity: 0; clip-path: polygon(-10% -40%, -10% -40%, -40% 140%, -40% 140%);
  transition: opacity .2s, clip-path .32s cubic-bezier(.6,0,.2,1); }
.nav.langs .nav-langs { pointer-events: auto; }
.nav.langs .nav-langs li { opacity: .62; clip-path: polygon(-10% -40%, 160% -40%, 130% 140%, -40% 140%);
  transition: opacity .2s calc(.12s + var(--i) * .035s), clip-path .42s cubic-bezier(.6,0,.2,1) calc(.12s + var(--i) * .035s); }
.nav.langs .nav-langs li:hover, .nav.langs .nav-langs li:has(.kc.on) { opacity: 1; }
.nav.langs .nav-go li { pointer-events: none; }
.nav.langs .nav-go .kc-a { transform: translate(.5em, -.7em) rotate(6deg); opacity: 0; transition: transform .36s cubic-bezier(.5,0,.8,.3), opacity .22s .1s; }
.nav.langs .nav-go .kc-b { transform: translate(-.35em, .75em) rotate(-4deg); opacity: 0; transition: transform .36s cubic-bezier(.5,0,.8,.3), opacity .22s .1s; }
.nav.langs .nav-go .kc-f { opacity: 0; }
.nav-lang li { opacity: .62; }
.nav-lang li:has([aria-expanded="true"]) { opacity: 1; }
.lang-kc { letter-spacing: .03em; }
.nav-end { padding-right: 190px; }

/* Mise's button: a slanted chip in the top-right corner (it steps away with the bar), Mise black on the paper and paper over the
   films, with Mise's name; pointed at, it opens up and Mise plays inside the letters */
.mchip { position: fixed; z-index: 41; top: 22px; right: calc(var(--pad) + 22px); width: 104px; height: 44px; color: #f4f2ee;
  transition: width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1), color .3s, transform .55s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.mchip.away:not(:focus-visible) { opacity: 0; transform: translateY(-70%); pointer-events: none; }
.mc-bg { position: absolute; inset: 0; background: #101012; transform: skewX(-40deg); transition: background .3s, box-shadow .3s; }
.mchip[data-on="film"], .mchip[data-on="ink"] { color: #101012; }
.mchip[data-on="film"] .mc-bg, .mchip[data-on="ink"] .mc-bg { background: #f4f2ee; }
.mc-logo { position: absolute; left: 50%; top: 50%; height: 42%; aspect-ratio: 1952 / 795; transform: translate(-50%, -54%); }
.mc-ink, .mc-film { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask: url(brand/mise-wordmark-light.svg) center / 100% 100% no-repeat; mask: url(brand/mise-wordmark-light.svg) center / 100% 100% no-repeat; }
.mc-ink { background: currentColor; transition: opacity .3s; }
.mc-film { opacity: 0; transition: opacity .3s; }
.mc-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); }
@media (hover: hover) {
  .mchip:hover, .mchip:focus-visible { width: 150px; height: 76px; }
  .mchip:hover .mc-film, .mchip:focus-visible .mc-film { opacity: 1; }
  .mchip:hover .mc-ink, .mchip:focus-visible .mc-ink { opacity: .18; }
}
.mchip:focus-visible { outline: none; }
.menu-open .mchip { color: #101012; }
.menu-open .mchip .mc-bg { background: #f4f2ee; }
.loading .mchip { opacity: 0; }

/* letters with a film inside (common.js filmLetters): the film shows only through the words */
.fl { position: relative; display: inline-block; isolation: isolate; vertical-align: top; }
.fl-film { position: absolute; inset: 0; overflow: hidden; }
.fl-film .fl-m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-k { position: relative; display: block; }
.fl-g { position: absolute; inset: -6px; pointer-events: none; }
.fl-paper .fl-k { background: #fff; box-shadow: 0 0 0 3px #fff; mix-blend-mode: screen; }
.fl-paper .fl-k, .fl-paper .fl-k .letter { color: #000 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; }
.fl-paper .fl-g { background: var(--paper); mix-blend-mode: multiply; }
.fl-ink .fl-k { background: #000; box-shadow: 0 0 0 3px #000; mix-blend-mode: multiply; }
.fl-ink .fl-k, .fl-ink .fl-k .letter { color: #fff !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; }
.fl-ink .fl-g { background: var(--ink); mix-blend-mode: screen; }

/* a part that changes the ground comes in on a blade (common.js): its top cut on the mark's rise, levelling out as it
   comes up the screen; --blade is how deep the cut starts, in vh */
.blade-top { position: relative; --blade: 16; margin-top: calc(var(--blade) * -1vh); clip-path: polygon(0 var(--sl, 0px), 100% 0, 100% 100%, 0 100%); }
/* (the cut's depth is the part's own: as it changes, only the part's edge is drawn again, not everything inside it) */
@property --sl { syntax: '<length>'; inherits: false; initial-value: 0px; }
.nav .menu { display: none; font-size: 18px; font-weight: 500; }
.nav-sheet { display: none; }
@media (max-width: 760px) {
  .nav-sheet { position: fixed; inset: 0; z-index: 29; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
    padding: 0 16px 40px; background: var(--ink); color: var(--white); visibility: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: clip-path .5s cubic-bezier(.6,0,.2,1), visibility 0s .5s; }
  .nav-sheet a { font-size: 54px; line-height: 1.05; font-weight: 600; letter-spacing: -.03em; }
  .sheet-langs { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 30px; font-size: 18px; font-weight: 500; }
  .sheet-langs button { opacity: .55; }
  .sheet-langs button.on { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
  .menu-open .nav-sheet { visibility: visible; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% + 24vh)); transition: clip-path .5s cubic-bezier(.6,0,.2,1); }
  .menu-open .nav { color: var(--white); transform: none; opacity: 1; text-shadow: none; }
  .menu-open .nav [data-on] { color: var(--white); }
  .menu-open .nav::before, .menu-open .nav::after { opacity: 0 !important; }
  .menu-open .nav > * { pointer-events: auto; }
  .menu-open .nav .logo { opacity: 1; pointer-events: auto; }

}

/* a film's own lettering */
.letter { display: inline-block; line-height: .9; white-space: nowrap; }
.letter.chroma { text-shadow: -.035em 0 0 rgba(255, 30, 60, .85), .035em 0 0 rgba(0, 220, 255, .75); }

@media (max-width: 760px) {
  .nav .nav-links, .nav .nav-lang { display: none; }
  .nav .menu { display: block; }
  .nav .menu { margin-right: 96px; }
  .nav-end { padding-right: 0; }
  .mchip { top: 15px; right: 26px; width: 78px; height: 34px; }
  .nav { height: 64px; padding: 0 16px; }
  .nav .logo svg { height: 22px; }
}