/* ==========================================================================
   Petra Pan Film · base.css
   Shared by every page: colours, reset, type, header, phone menu.
   Page-specific styles live in home.css (index.html) and film.css (film pages).
   ========================================================================== */

/* ---- Colours and spacing: change here, applies to the whole site ---- */
:root {
  --bg: #121210; /* page background */
  --panel: #191917; /* slightly lighter band behind some sections */
  --ink: #f2efe8; /* main text, links */
  --soft: #cdc8bd; /* body text */
  --faint: #8d887e; /* labels, credits, years */
  --line: #f2efe81f; /* thin divider lines */
  --accent: #d8bf86; /* link hover (warm straw) */
  --eyebrow: #c8621f; /* small orange line above titles */
  --side: 20px; /* left/right page margin; each page sets its own */
  --title-font: "Yanone Kaffeesatz", "Arial Narrow", sans-serif;
  color-scheme: dark;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    1rem/1.6 "Hanken Grotesk",
    "Helvetica Neue",
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
p,
ul,
ol,
dl,
dd,
h1,
h2,
h3,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: var(--ink);
  text-decoration: none;
}
a:hover,
a:focus-visible {
  color: var(--accent);
}
button {
  font: inherit;
}

/* ---- Small uppercase labels ---- */
.label,
.eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
.eyebrow {
  color: var(--eyebrow);
}

/* ---- Justified text with hyphenation (no big gaps between words) ----
   hyphens: auto follows the page language (lang="en").
   In the HTML, ­ marks extra places where a long word may break. */
.justified {
  text-align: justify;
  text-align-last: left;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 7 3 3; /* words of 7+ letters, at least 3 on each side */
  text-wrap: pretty; /* avoids a lonely word on the last line */
}

/* ---- Years after film titles (home page list and phone menus) ---- */
.films span,
.menu-group span {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ---- Sibling film: indented under its main film, with a small ↳ ----
   <li class="sibling"> in the film lists (home page and phone menus) */
.films li.sibling,
.menu-group li.sibling {
  padding-left: 1.6em;
  text-indent: -1.25em;
}
.films li.sibling::before,
.menu-group li.sibling::before {
  content: "\21B3";
  display: inline-block;
  width: 1.25em;
  text-indent: 0;
  color: var(--faint);
}

/* ---- Arrow for links that open another site (drawn, so it stays clear
   at small sizes). Used as a mask, so it takes the colour of the text. ---- */
:root {
  --out-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 9 3M4.2 3H9v4.8'/%3E%3C/svg%3E");
}

/* ---- Films that link to IMDb get "IMDb ↗" after the year ----
   Added automatically to every list item whose link goes to an IMDb title
   page (home page list and all phone menus). Films with their own page on
   this site link there instead, so they don't get it. */
li:has(> a[href*="imdb.com/title"]) > span::after {
  content: "IMDb";
  margin-left: 0.55em;
  padding-right: 1.3em; /* room for the arrow */
  font-size: 0.75em;
  letter-spacing: 0.06em;
  color: var(--faint);
  white-space: nowrap;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238d887e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 9 3M4.2 3H9v4.8'/%3E%3C/svg%3E")
    right 0 center / 1.1em no-repeat;
}

/* ---- Header: logo + name on the left, links / menu button on the right ---- */
.topbar {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(16px, env(safe-area-inset-top)) var(--side) 14px;
  font-size: 14px;
  /* black at about 50% (last two digits: 80 = 50%, 99 = 60%, 66 = 40%) */
  background: #12121080;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--soft);
}
.brand img {
  width: 30px;
  opacity: 0.92;
}
.topnav {
  display: flex;
  gap: 1.4rem;
}
.topnav a {
  color: var(--soft);
}

/* ---- Menu button (three lines) and full-screen menu: phones only ----
   The menu content is copied by menu.js from every element on the page
   that has a data-menu="Title" attribute, in page order. */
.mbtn,
.menu {
  display: none;
}
@media (max-width: 720px) {
  .topnav {
    display: none;
  }
  .mbtn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }
  .menu {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: block;
    overflow-y: auto;
    padding: max(72px, calc(env(safe-area-inset-top) + 56px)) var(--side) max(32px, env(safe-area-inset-bottom));
    background: #121210a6;
    -webkit-backdrop-filter: blur(36px);
    backdrop-filter: blur(36px);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s,
      visibility 0.3s;
  }
  .menu-open {
    overflow: hidden;
  }
  .menu-open .menu {
    opacity: 1;
    visibility: visible;
  }
  .menu-close {
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
    right: var(--side);
  }
  .menu-inner {
    display: grid;
    gap: 40px;
  }
  .menu-group .label {
    margin-bottom: 12px;
    font-size: 11px;
  }
  /* copied lists: one item per line */
  .menu-group > :not(.label) {
    display: grid;
    justify-content: start;
    gap: 8px;
    font-size: 17px;
  }
  /* the page you are on */
  .menu-group a[aria-current="page"] {
    color: var(--accent);
  }
  /* data-menu-size="big": large title-font links (film pages) */
  .menu-group.big > :not(.label) {
    gap: 6px;
    font: 600 2.6rem/1.05 var(--title-font);
    text-transform: uppercase;
  }
  .menu-foot {
    font-size: 14px;
    color: var(--faint);
  }
  .menu-foot a {
    color: var(--soft);
  }
}

/* ---- Gentle zoom-in for big photos when a page opens ---- */
@keyframes settle {
  from {
    transform: scale(1.04);
    opacity: 0.4;
  }
}