/* Shared shell for the pages that aren't picture-led.
   The home and film pages carry their own hero CSS; everything below is common. */
:root {
  --shell: #14101E; --shell-2: #1B1626; --ink: #F0F2DC;
  --dim: rgba(240,242,220,.66); --text: rgba(240,242,220,.86); --faint: rgba(240,242,220,.58); --line: rgba(240,242,220,.18);
  --room: #E7E4F1; --room-ink: #191325; --accent: #B99BBA;
  --gutter: 40px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--shell); color: var(--ink); font: 300 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
section, header, nav, footer { padding: 0 var(--gutter); }
.label { font: 400 13px/1.4 var(--body); color: var(--faint); }
a { color: inherit; }

/* the bar: the only navigation on the pages without a hero */
.bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 30px; padding-bottom: 30px; }
.bar__mark { font: 500 19px/1 var(--display); letter-spacing: .045em; color: var(--ink); text-decoration: none; }
.bar__nav { display: flex; gap: 26px; }
.bar__nav a { font: 400 14px/1 var(--body); color: var(--faint); text-decoration: none; }
.bar__nav a[aria-current="page"] { color: var(--ink); }
/* small links get a 44px hit area that doesn't move them */
.bar__mark, .bar__nav a, .foot a, .desk a.to { position: relative; }
.bar__mark::before, .bar__nav a::before, .foot a::before, .desk a.to::before { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }
a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.head { padding-top: 84px; padding-bottom: 64px; }
.head h1 { margin: 0; max-width: 20ch; font: 400 60px/1.16 var(--display); text-wrap: balance; text-wrap: pretty; }

.sec { margin: 0 0 26px; font: 400 15px/1.3 var(--body); color: var(--ink); }

.foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; border-top: 1px solid var(--line); padding-top: 56px; padding-bottom: 56px; margin-top: 40px; }
.foot a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 4px; font: 400 14px/1.3 var(--body); }
.foot__mail { font: 400 30px/1 var(--display); letter-spacing: 0; border: 0; padding: 0; }
.foot__links { display: flex; gap: 28px; flex-wrap: wrap; }

@media (max-width: 760px) {
  :root { --gutter: 20px; }
  .bar { padding-top: 20px; padding-bottom: 20px; }
  .bar__nav { gap: 18px; }
  .bar__nav a { font-size: 14px; }
  .head { padding-top: 48px; padding-bottom: 42px; }
  .head h1 { font-size: 34px; max-width: none; }
  .foot { flex-direction: column; align-items: flex-start; gap: 30px; padding-top: 42px; padding-bottom: 42px; }
  .foot__mail { font-size: 22px; }
}