/* ALIGN ZONE — the site in the film's language: true black, one line of light type,
   everything on the centre line, colour only in the marks and the signal dot. */
:root {
  --bg: #000; --panel: #0b0b0a; --ink: #F2F1ED; --text2: #A6A6A0; --grey: #8A8984;
  --sep: #2C2C28; --sep2: #45453F; --signal: #F0612B;
  --ease-out: cubic-bezier(.16,1,.3,1); --ease-inout: cubic-bezier(.76,0,.24,1);
  --gutter: 24px;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { background: var(--bg); color: var(--ink); font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
img { display: block; max-width: 100%; }

/* ---------- the lockup, top centre, floating: no bar behind it ---------- */
.head { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 72px; pointer-events: none;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gutter); }
.head > * { pointer-events: auto; }
.lockup { grid-column: 2; display: block; width: 148px; color: var(--ink); }
.lockup svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 600px) { .head { height: 64px; } .lockup { width: 128px; } }

/* the menu: two lines that cross */
.menu-btn { grid-column: 3; justify-self: end; width: 44px; height: 44px; margin-right: -10px; position: relative; z-index: 2; }
.menu-btn i { position: absolute; left: 12px; right: 12px; height: 1px; background: var(--ink);
  transition: transform .4s var(--ease-out), top .4s var(--ease-out); }
.menu-btn i:first-child { top: 18px; }
.menu-btn i:last-child { top: 25px; }
.menu-open .menu-btn i:first-child { top: 21.5px; transform: rotate(45deg); }
.menu-open .menu-btn i:last-child { top: 21.5px; transform: rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: 40; background: #000; display: grid; align-content: center; justify-items: center;
  gap: 8px; padding: 96px var(--gutter) 48px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.menu-open .sheet { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.menu-open, .menu-open body { overflow: hidden; }
.sheet a { font-size: clamp(36px, 7vw, 72px); font-weight: 300; letter-spacing: -.04em; line-height: 1.2; color: var(--ink); }
.sheet a[aria-current="page"] { color: var(--grey); }
@media (hover: hover) { .sheet a:hover { color: var(--grey); } }
.sheet .small { margin-top: 40px; display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.sheet .small a { font-size: 12px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--grey); }

/* ---------- small type ---------- */
.label { font-size: 11px; font-weight: 400; letter-spacing: 3.6px; text-transform: uppercase; color: var(--grey); }

/* ---------- footer: small, centred, quiet ---------- */
.foot { padding: 96px var(--gutter) 48px; text-align: center; color: var(--grey); font-size: 13px; line-height: 1.8; }
.foot .lockup-s { width: 112px; margin: 0 auto 32px; color: var(--ink); }
.foot .lockup-s svg { display: block; width: 100%; height: auto; }
.foot nav { display: flex; gap: 8px 24px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
@media (hover: hover) { .foot a:hover { color: var(--ink); } }
.foot .fine { margin-top: 24px; font-size: 12px; color: #5d5d59; }