:root {
  --bg: #08080a;
  --bg-2: #0e0e12;
  --ink: rgba(238, 238, 240, 0.92);
  --ink-dim: rgba(200, 200, 205, 0.55);
  --ink-faint: rgba(170, 170, 180, 0.32);
  --line: rgba(255, 255, 255, 0.07);
  /* Accent: the ice blue of the title treatment; --accent-2 is the electric
     blue of its fringe, used where a gradient runs off the accent. Text set on
     an accent surface uses --on-accent (dark) — the blue is too light for
     white type. --danger keeps the old red for the chat's "leak" lines and
     the title glitch, which are alarm colours rather than theme. */
  --accent: #8ae8fa;
  --accent-2: #3d8bff;
  --accent-rgb: 138, 232, 250;
  --accent-soft: rgba(138, 232, 250, 0.18);
  --on-accent: #06181c;
  --danger: #ff2e57;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --serif: "Times New Roman", Times, "Iowan Old Style", Georgia, serif;
}

* { box-sizing: border-box; }
/* Elements the content loader hides must stay hidden whatever their display. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.6;
  mix-blend-mode: screen;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), 0.05), transparent 60%);
  animation: flicker 7.3s infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  47% { opacity: 1; }
  48% { opacity: 0.65; }
  49% { opacity: 1; }
  74% { opacity: 0.85; }
  75% { opacity: 1; }
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 3;
}

/* NAV — three zones (brand left, links centre, socials right) so the links
   are centred on the VIEWPORT, not on whatever is left between the brand and
   the socials. Ported from MLS-Website's .site-nav. */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 14px 28px;
  background: rgba(8, 8, 10, 0.78);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transition: background .3s, border-color .3s;
}
.nav-left { justify-self: start; min-width: 0; display: flex; align-items: center; gap: 18px; }
/* Studio mark: the MLS swoosh, divided from the film title like the studio's
   other film sites. Links out to magentalightstudios.com. */
.studio-mark { display: inline-flex; align-items: center; flex: 0 0 auto;
  padding-right: 18px; border-right: 1px solid rgba(255, 255, 255, 0.14);
  opacity: .92; transition: opacity .2s; }
.studio-mark:hover { opacity: 1; }
/* The landing page bar has no title after the mark, so no divider either. */
body[data-hero-overlay] .studio-mark { border-right: 0; padding-right: 0; }
.studio-mark img { height: 13px; width: auto; display: block; }
/* Title treatment art in the brand slot; scales down by width when the zone
   is narrow so it never pushes the links off centre. */
.brand { min-width: 0; }
.brand-title { display: block; width: auto; height: auto; max-height: 30px; max-width: 100%; }
.brand-text { display: none; align-items: center; gap: 12px; }
.brand--text .brand-text { display: inline-flex; }
@media (max-width: 640px) {
  .nav-left { gap: 12px; }
  .studio-mark { padding-right: 12px; }
  .studio-mark img { height: 10px; }
  .brand-title { max-height: 22px; }
}
.nav-right { justify-self: end; display: flex; align-items: center; gap: 6px; }
@media (max-width: 640px) { .site-nav { padding: 12px 18px; } }
.site-nav.scrolled { background: rgba(8, 8, 10, 0.95); }
body { padding-top: var(--nav-h, 72px); }
.brand {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
.brand .dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}
.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-self: center;
  font-size: 13px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.nav-links a {
  color: #fff;   /* as bright on every page as over the home hero */
  text-decoration: none;
  transition: color 0.2s;
  text-transform: uppercase;
  position: relative;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a.current {
  color: #fff;
}
/* The small outward arrow after Showtimes: a hint that tickets are bought
   off-site. Accent blue whatever the link's own colour. */
.nav-links .nav-ext { color: var(--accent); font-size: 1.25em; line-height: 0; display: inline-block;
  position: relative; top: -0.36em; margin-left: 1px; }
/* The current-page underline stops at the word; the arrow is not part of it. */
.nav-links a.current:has(.nav-ext)::after { right: 0.83em; }
.nav-links a.current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: var(--accent);
}
.nav-cta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--on-accent);
  background: var(--accent);
  padding: 9px 16px;
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nav-cta:hover {
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.5);
}
/* Header socials — icons rather than words so they fit beside the links. */
.nav-social { display: flex; align-items: center; gap: 4px; }
.nav-social a { display: inline-flex; padding: 6px; color: rgba(255,255,255,.75); transition: color .2s; }
.nav-social a:hover { color: var(--accent); }
.nav-social svg { width: 17px; height: 17px; display: block; fill: currentColor; }
@media (max-width: 920px) { .nav-social { display: none; } }
.nav-toggle {
  display: none; background: none; border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ink); border-radius: 4px; padding: 7px 10px; cursor: pointer;
  font-size: 16px; line-height: 1;
}
@media (max-width: 920px) {
  /* The links panel leaves the grid (it is fixed), so the bar drops to two
     zones — otherwise the toggle would sit in the middle column. */
  .site-nav { grid-template-columns: 1fr auto; }
  .nav-links {
    justify-self: stretch;
    position: fixed; top: var(--nav-h, 72px); left: 0; right: 0; flex-direction: column; gap: 0;
    background: #0a0a0d;
    max-height: 0; overflow: hidden; transition: max-height .35s ease; align-items: stretch;
  }
  .nav-links.open { max-height: 80vh; border-bottom: 1px solid var(--line); }
  .nav-links a { padding: 16px 28px; border-top: 1px solid var(--line); font-size: 13px; }
  .nav-links a.current::after { display: none; }
  .nav-toggle { display: block; }
}

/* HERO */
.hero {
  display: grid;
  grid-template-columns: 1fr 1.27fr;
  gap: 60px;
  padding: 80px 0 100px;
  align-items: center;
}
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; gap: 50px; padding: 50px 0 70px; }
}
/* Landing page without the chat widget beside the copy: one column. */
.hero--solo { grid-template-columns: 1fr; padding: 64px 0 80px; }
.hero--solo > div { max-width: 760px; }
.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-top: 80px;
  margin-bottom: 6px;
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--accent-soft);
  border-radius: 3px;
}
h1.title {
  font-family: var(--serif);
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--ink);
  position: relative;
  white-space: nowrap;
}
h1.title .word {
  position: relative;
  display: inline-block;
}
/* Title streak: blue and white ghost copies of the whole title, masked to a
   soft band that sweeps left to right — the title treatment's own colours,
   over the full word rather than one half at a time. Fired by index.html. */
h1.title::before,
h1.title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 62%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 62%, transparent 100%);
  -webkit-mask-size: 36% 100%; mask-size: 36% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: -40% 0; mask-position: -40% 0;
}
h1.title::before {
  color: var(--accent);
  transform: translate(-4px, 1px);
  text-shadow: 0 0 22px rgba(var(--accent-rgb), 0.9), 0 0 6px var(--accent-2);
}
h1.title::after {
  color: #fff;
  transform: translate(4px, -1px);
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.7), 0 0 30px rgba(var(--accent-rgb), 0.5);
}
h1.title.glitch::before { animation: title-streak 1.24s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
h1.title.glitch::after  { animation: title-streak 1.24s cubic-bezier(0.2, 0.7, 0.3, 1) 0.14s forwards; }
@keyframes title-streak {
  0%   { opacity: 0; -webkit-mask-position: -40% 0; mask-position: -40% 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; -webkit-mask-position: 140% 0; mask-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) { h1.title::before, h1.title::after { display: none; } }
.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.9vw, 22px);
  color: var(--accent);
  margin: 0 0 20px;
  letter-spacing: -0.005em;
}
.sub {
  font-size: 15px;
  color: var(--ink-dim);
  max-width: none;
  margin-bottom: 28px;
  line-height: 1.6;
}
.cta-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 11px 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(var(--accent-rgb), 0.35);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 11px 20px;
  font-family: var(--mono);
  font-size: 12px;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.filmmeta {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}
.filmmeta .rating {
  border: 1px solid var(--ink-faint);
  padding: 2px 8px;
  font-weight: 700;
  color: var(--ink-dim);
}

/* PAGE HEADER (for non-home pages) */
.page-header {
  padding: 40px 0 30px;
  border-bottom: 1px solid var(--line);
}
.page-header .sec-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 18px;
}
.page-header h1 {
  font-family: var(--serif);
  font-size: clamp(22px, 3.25vw, 42px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  max-width: 900px;
}
.page-header h1 em { font-style: italic; color: var(--accent); }
.page-header p.lead {
  font-size: 18px;
  color: var(--ink-dim);
  max-width: 640px;
  margin: 0;
}

/* CHAT WIDGET — anime frame UI */
.chat-card {
  background-color: transparent;
  background-image: url('chat-frame.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  box-shadow: none;
  display: block;
  height: auto;
  width: 100%;
  aspect-ratio: 1149 / 1369;
  position: relative;
  transform: translateY(-48px);
}
@media (max-width: 880px) {
  .chat-card { transform: none; }
}
.chat-header {
  display: none;
}
.chat-header-legacy {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.015);
}
.chat-header .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s infinite;
}
.chat-header .session {
  margin-left: auto;
  color: var(--ink-faint);
  font-size: 11px;
}
.chat-body {
  position: absolute;
  top: 37%;
  bottom: 16%;
  left: 19%;
  right: 19%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 9px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
/* Only the bottom-most bot bubble gets indented away from the lightning-bolt icon.
   As soon as new messages push it up, the indent moves to the new bottom.
   Apply to the typing-dots indicator too while it's the last child. */
.chat-body > .msg.bot:last-child,
.chat-body > .typing:last-child {
  margin-left: 28px;
}
.chat-card .msg {
  max-width: 78%;
  padding: 9px 13px;
  font-size: 13.5px;
  line-height: 1.45;
  border-radius: 12px;
}
.chat-body::-webkit-scrollbar { width: 6px; }
.chat-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.msg {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  word-wrap: break-word;
  animation: msg-in 0.35s ease-out;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.msg.bot {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.msg.bot.creep { color: var(--danger); }
.msg.user {
  background: var(--accent);
  color: var(--on-accent);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.typing {
  display: inline-flex;
  gap: 4px;
  padding: 14px 15px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-dim);
  animation: typing 1.2s infinite;
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.chat-input {
  position: absolute;
  bottom: 4%;
  top: auto;
  left: 21%;
  right: 18%;
  height: 8%;
  border-top: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
}
.chat-input input {
  flex: 1;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 12px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  outline: none;
  min-width: 0;
}
.chat-input input:focus { border: 0; outline: none; }
.chat-input input::placeholder { color: var(--ink-dim); opacity: 0.7; }
.chat-input button {
  background: transparent;
  color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 0;
  cursor: pointer;
  width: 14%;
  height: 100%;
}
.chat-input button:active { background: rgba(255,255,255,0.05); }

/* SLIDESHOW */
.still-section {
  padding: 70px 0 90px;
  border-top: 1px solid var(--line);
}
.slideshow {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  gap: 18px;
  align-items: center;
}
@media (max-width: 640px) {
  .slideshow { grid-template-columns: 44px 1fr 44px; gap: 10px; }
}
.slide-arrow {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
  user-select: none;
}
.slide-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.5);
}
@media (max-width: 640px) {
  .slide-arrow { width: 44px; height: 44px; font-size: 18px; }
}
.slide-viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0a0a0a;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.slide.active {
  opacity: 1;
  pointer-events: auto;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(0.92) brightness(0.95);
}
.slide iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}
.slide-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,0.2) 0%, transparent 30%, transparent 65%, rgba(8,8,10,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}
.slide-caption {
  position: absolute;
  bottom: 22px;
  left: 26px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.6;
  max-width: 70%;
}
.slide-caption .label {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  padding: 3px 9px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.slide-counter {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.55);
  padding: 5px 12px;
  border-radius: 3px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.slide-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.slide-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.slide-dot:hover { background: rgba(255,255,255,0.4); }
.slide-dot.active {
  background: var(--accent);
  transform: scale(1.25);
}

/* VIDEOS */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.04);
  background: #000;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-caption {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.video-caption .video-rating { color: var(--accent); }
.video-caption a {
  color: var(--accent);
  text-decoration: none;
}
.video-caption a:hover { text-decoration: underline; }

.page-section { padding: 70px 0 90px; }

/* SYNOPSIS */
.synopsis-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  column-gap: 50px;
  row-gap: 24px;
  /* The synopsis is centred on the POSTER alone: text and poster share the
     first row, the credits sit in a second row under the poster. */
  align-items: center;
}
.synopsis-grid > .synopsis-body { grid-row: 1; grid-column: 1; }
.synopsis-grid > .poster-card { grid-row: 1; grid-column: 2; margin-bottom: 0; }  /* the row gap spaces the credits; a margin would skew the centring */
.synopsis-grid > .creditbox { grid-row: 2; grid-column: 2; align-self: start; margin-top: -15px; } /* 9px under the poster: the 24px row gap less 15 */
@media (max-width: 880px) {
  .synopsis-grid { grid-template-columns: 1fr; }
  .synopsis-grid > .synopsis-body, .synopsis-grid > .poster-card, .synopsis-grid > .creditbox { grid-row: auto; grid-column: auto; }
}
.synopsis-body {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink);
}
.synopsis-body p { margin: 0 0 22px; }
/* Opening initial: a touch larger and blue, but in the line with its word,
   not a two-line drop cap. */
.synopsis-body p:first-child::first-letter {
  font-size: 1.35em;
  line-height: 1;
  color: var(--accent);
  font-style: italic;
  padding-right: 1px;
}
.creditbox {
  border: 1px solid var(--line);
  padding: 26px;
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.9;
  border-radius: 4px;
  align-self: start;
}
/* Label in the mono accent-blue caps, the names beneath in the serif. */
.creditbox dt {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.6;
  margin-top: 18px;
}
.creditbox dt:first-child { margin-top: 0; }
/* Optional link under a credited name, styled like the cast cards' IMDb line. */
.creditbox dd .credit-link { display: block; margin-top: 6px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-decoration: none; transition: color .2s; }
.creditbox dd .credit-link:hover { color: var(--ink); }
.creditbox dd {
  margin: 4px 0 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.25;
}
/* Synopsis page has no header now: start just under the nav. */
.synopsis-page { position: relative; padding-top: 48px; }
/* The release line sits where it does on the other pages. On wide screens the
   synopsis text is centred beside the poster with headroom above it, so the
   line floats in that headroom and nothing else moves; narrower than that it
   goes in flow above the text. */
.synopsis-page > .notify__eyebrow { margin: 0 0 24px; }
@media (max-width: 640px) { .synopsis-page { padding-top: 32px; } }
@media (min-width: 1200px) {
  .synopsis-page { padding-top: 32px; }
  .synopsis-page > .notify__eyebrow { position: absolute; top: 48px; left: 0; margin: 0; }
}
.poster-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 18px;
  background: #000;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.poster-card img {
  width: 100%;
  height: auto;
  display: block;
}
.poster-card .poster-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--on-accent);
  background: var(--accent);
  padding: 3px 7px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 2;
}
.pullquote {
  margin: 50px 0 0;
  padding: 30px;
  border-left: 3px solid var(--accent);
  background: var(--bg-2);
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.5;
}
.pullquote cite {
  display: block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-style: normal;
  text-transform: uppercase;
}

/* CAST */
.cast-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1024px) { .cast-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .cast-grid { grid-template-columns: repeat(2, 1fr); } }
/* Phones keep two cards side by side; the cards tighten up so two fit. */
@media (max-width: 480px) {
  .cast-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .castcard { padding: 12px; }
  .castcard .portrait { margin-bottom: 12px; }
  .castcard .portrait .initials { font-size: 44px; }
  .castcard .name { font-size: 16px; }
}
.castcard {
  border: 1px solid var(--line);
  padding: 22px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-radius: 4px;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.castcard:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.castcard .portrait {
  width: 100%;
  /* Portrait-shaped, like the headshots, so far less of each picture is cut. */
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #1a1a20, #08080a);
  border-radius: 3px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.castcard .portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor near the top so heads stay in frame; a per-person position or
     zoom (set in the console) overrides this. */
  object-position: 50% 15%;
  transform-origin: 50% 25%;
  z-index: 2;
  filter: contrast(1.05) saturate(0.95) brightness(0.95);
}
.castcard .portrait .initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 64px;
  color: rgba(var(--accent-rgb), 0.42);
  z-index: 1;
}
.castcard .portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.15 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
}
.castcard .name {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

/* SHOWTIMES */
.showtimes-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  align-items: center;
}
.showtimes-bar input,
.showtimes-bar select {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 13px;
  border-radius: 4px;
  outline: none;
  min-width: 160px;
}
.showtimes-bar input:focus,
.showtimes-bar select:focus { border-color: var(--accent); }
.showtimes-bar .find-btn {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 12px 22px;
  font-family: var(--mono);
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.theater-list { display: flex; flex-direction: column; gap: 14px; }
.theater {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 26px;
  background: var(--bg-2);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: center;
}
@media (max-width: 720px) {
  .theater { grid-template-columns: 1fr; }
}
.theater .tname {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 4px;
}
.theater .taddr {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.theater .times {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.theater .times a {
  border: 1px solid var(--line);
  padding: 7px 12px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  text-decoration: none;
  border-radius: 3px;
  transition: all 0.15s;
}
.theater .times a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.theater .times a.sold {
  color: var(--ink-faint);
  text-decoration: line-through;
  pointer-events: none;
}

/* CLOSER */
.closer {
  padding: 55px 0;
  text-align: center;
  border-top: 1px solid var(--line);
}
.closer h2 {
  font-family: var(--serif);
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.02;
  font-weight: 400;
  margin: 0 0 22px;
  letter-spacing: -0.015em;
}
.closer h2 em { font-style: italic; color: var(--accent); }
.closer p {
  color: var(--ink-dim);
  font-size: 18px;
  max-width: 540px;
  margin: 0 auto 36px;
}


/* ===================== CINEMATIC HERO (homepage) =========================
   Ported from MLS-Website (.vhero). Full-bleed video band: its height derives
   from WIDTH via the footage's own aspect ratio (--vhero-ratio), the video is
   inset over the whole band, and a scrim keeps white copy readable. The key
   art sits behind the video as the fallback if it cannot load or play. */
.vhero {
  --vhero-ratio: 2560 / 1070;              /* assets/hero.mp4 is 2560x1070 */
  position: relative; display: grid; overflow: hidden;
  background: #0b0910 url('assets/posters/07-appofeniacs.png') center / cover no-repeat;
}
.vhero::before { content: ""; grid-area: 1 / 1; width: 100%; aspect-ratio: var(--vhero-ratio); }
.vhero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Top of the scrim is heavy so the floating nav stays legible over bright frames. */
.vhero__scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8,7,10,.72), rgba(8,7,10,0) 190px),
              linear-gradient(to right, rgba(8,7,10,.88) 0%, rgba(8,7,10,.55) 42%, rgba(8,7,10,.05) 78%); }
/* Copy sits in the lower part of the frame, clear of the floating nav. Left
   padding matches the nav's, so the title starts on the same line as the brand. */
.vhero__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; width: 100%;
  padding: 64px 28px clamp(32px, 5.5%, 84px); }
.vhero__copy { max-width: 720px; color: #f4f1f4; }
.vhero__meta { display: flex; align-items: center; margin: 0 0 10px; }
.vhero__badge { font-family: var(--mono); font-size: clamp(22px, 2vw, 26px); letter-spacing: .24em;
  text-transform: uppercase; color: var(--accent); filter: drop-shadow(0 1px 8px rgba(0,0,0,.45)); }
.vhero h1.title { font-size: clamp(40px, 6.5vw, 92px); line-height: .92; margin: 0 0 22px; color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.vhero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vbtn { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  padding: 13px 24px; border-radius: 3px; text-decoration: none; display: inline-flex; align-items: center;
  transition: background .2s, color .2s, border-color .2s; }
.vbtn--solid { background: #f4f1f4; color: #0b0910; }
.vbtn--solid:hover { background: var(--accent); color: var(--on-accent); }
.vbtn--ghost { border: 1px solid rgba(255,255,255,.35); color: #f4f1f4; }
.vbtn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
/* The hero footage plays for everyone, including visitors with Reduce Motion on. */
/* "Tap to play" pill, shown by the script only when the device refuses to
   autoplay (iPhone Low Power Mode). Centred over the footage. */
.vhero__tap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); background: rgba(8, 8, 10, .72); border: 1px solid rgba(var(--accent-rgb), .55);
  border-radius: 999px; padding: 12px 22px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.vhero__tap:hover { background: var(--accent); color: var(--on-accent); }
/* Landing page: the band fills the screen instead of following the footage's
   ratio; the footage covers it, cropping as needed. The copy stays on at every
   width, since the band is tall enough on phones too. */
.vhero--full { height: 100vh; height: 100svh; min-height: 480px; }
.vhero--full::before { aspect-ratio: auto; height: 100%; }
@media (max-width: 640px) { .vhero--full .vhero__body { display: block; padding-left: 18px; padding-right: 18px; } }
/* Phones (portrait): the wide footage would be cropped to a sliver if it
   covered the tall screen, so it is scaled to fit its full width instead and
   sits in the upper half, above the copy, on plain black. The side scrim goes
   too: it only darkened the little frame. */
@media (max-width: 640px) {
  /* The band becomes a column: the footage at its own ratio, then the copy a
     little way beneath it, the pair centred in the screen below the nav. */
  .vhero--full { background-image: none; background-color: #000; height: auto; min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
    padding: calc(var(--nav-h, 72px) + 8px) 0 36px; }
  .vhero--full::before { display: none; }
  .vhero--full .vhero__video { position: static; width: 100%; height: auto; aspect-ratio: var(--vhero-ratio); object-fit: cover; }
  .vhero--full .vhero__body { position: static; padding: 18px 18px 0; }
  .vhero--full .vhero__scrim { background: linear-gradient(to bottom, rgba(8,7,10,.72), rgba(8,7,10,0) 160px); }
}

/* ---- Homepage overlay hero: the film starts at the very top of the page and
   the nav floats over it with no bar, until you scroll away from the hero. --- */
body[data-hero-overlay] { padding-top: 0; }
body[data-hero-overlay] .site-nav:not(.scrolled) {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
}
body[data-hero-overlay] .site-nav:not(.scrolled) .nav-links a { color: #fff; }
body[data-hero-overlay] .site-nav:not(.scrolled) .nav-links a:hover,
body[data-hero-overlay] .site-nav:not(.scrolled) .nav-links a.current { color: #fff; }
body[data-hero-overlay] .site-nav:not(.scrolled) .nav-toggle { color: #fff; }
body[data-hero-overlay] .site-nav:not(.scrolled) .nav-social a { color: rgba(255,255,255,.75); }
body[data-hero-overlay] .site-nav:not(.scrolled) .nav-social a:hover { color: #fff; }
/* The open mobile menu needs its own surface — it is no longer sitting on a bar. */
@media (max-width: 920px) {
  body[data-hero-overlay] .site-nav:not(.scrolled) .nav-links.open { background: #08080a; }
}

/* On phones the band keeps the footage's exact ratio, which is too short to
   hold the copy — so the overlay copy hides and the title drops into the text
   column below instead. */
.hero .hero-title-mobile { display: none; }
@media (max-width: 640px) {
  .vhero__body { display: none; }
  .hero .hero-title-mobile { display: block; }
  .hero .hero-title-mobile .eyebrow { margin-top: 0; }
}

/* ---- Tickets-not-yet-on-sale board (showtimes page) ----------------------
   Ported from MLS-Website's .notify: release line, two-tone headline, the
   promise, and the signup, which posts to the Mailchimp audience. Swapped to
   Appofeniacs colours: the title blue running into electric blue. */
.notify { padding: 48px 0 40px; }
.notify__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0 0 24px;
  font-family: var(--mono); font-size: clamp(12px, 1.2vw, 15px); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink); font-weight: 600; white-space: nowrap; }
.notify__dash { width: 56px; height: 2px; background: var(--ink); flex: 0 0 auto; }
.notify__eyebrow b, .notify__h b {
  color: var(--accent);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.notify__h { font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  font-size: clamp(46px, 8.2vw, 132px); line-height: .88; letter-spacing: -.02em;
  margin: 0 0 46px; color: var(--ink); }
.notify__h b { display: block; font-weight: 800; }
.notify__body { display: flex; gap: 26px; align-items: flex-start; margin-bottom: 46px; }
.notify__rule { flex: 0 0 auto; width: 46px; margin-top: 14px;
  border-top: 4px solid var(--accent); border-bottom: 4px solid var(--accent);
  height: 14px; box-sizing: content-box; }
.notify__body p { font-family: var(--sans); font-size: clamp(19px, 2.1vw, 34px); line-height: 1.45;
  color: var(--ink); margin: 0; max-width: 34ch; }
.notify__body em { font-style: normal; font-weight: 600; color: var(--accent); }
/* One flush block: field left, button right, no gap between them. */
.notify__form { display: flex; gap: 0; max-width: 900px; width: 100%; margin: 0; }
.notify__form input[type=email] { flex: 1; min-width: 0; background: var(--bg-2);
  border: 1px solid rgba(255, 255, 255, 0.14); border-right: 0; color: var(--ink);
  padding: 26px 28px; border-radius: 0; font-size: clamp(15px, 1.3vw, 20px); font-family: var(--mono); }
.notify__form input[type=email]::placeholder { color: var(--ink-faint); }
.notify__form input[type=email]:focus { outline: none; border-color: var(--accent); }
.notify__form button { flex: 0 0 auto; border: 0; cursor: pointer; color: var(--on-accent);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  padding: 26px clamp(28px, 5vw, 68px); border-radius: 0;
  font-family: var(--mono); font-size: clamp(13px, 1.2vw, 18px); letter-spacing: .18em;
  text-transform: uppercase; transition: filter .2s; }
.notify__form button:hover { filter: brightness(1.12); }
.notify__form button:disabled { opacity: .6; cursor: wait; }
.form-note { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--ink-dim);
  margin: 14px 0 0; min-height: 1.4em; }
.form-note.ok { color: #5ad19a; }
.form-note.err { color: var(--danger); }
.notify__fine { font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin: 12px 0 0; }
@media (max-width: 640px) {
  .notify { padding-top: 32px; }
  .notify__eyebrow { gap: 12px; }
  .notify__dash { width: 28px; }
  .notify__form { flex-direction: column; }
  .notify__form input[type=email] { border-right: 1px solid rgba(255, 255, 255, 0.14); }
  .notify__body { gap: 16px; margin-bottom: 34px; }
  .notify__rule { width: 32px; }
  .notify__h { margin-bottom: 34px; }
}

/* ---- Press page — editorial article cards, laurels. Ported from the MLS
   press panel (.press-art / .laurel). ---------------------------------- */
.press-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 34px 0 14px; }
.page-section > .press-sub:first-child { margin-top: 0; }
/* Press cards + horizontal rail, ported from the MLS news page: three across
   on desktop, extra articles scroll sideways instead of wrapping. */
.press-rail-wrap { position: relative; }
.press-rail { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 18px; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; }
.press-rail::-webkit-scrollbar { display: none; }
.press-rail > .press-card { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
@media (max-width: 900px) { .press-rail > .press-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 600px) { .press-rail > .press-card { flex-basis: 86%; } }
.press-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; background: var(--bg-2);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.press-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.press-card .pc-thumb { position: relative; aspect-ratio: 16 / 10; background: #0c0c10; }
.press-card .pc-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.press-card .pc-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.press-card .pc-meta { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.press-card .pc-outlet { color: var(--ink); font-weight: 500; }
.press-card .pc-dot { color: var(--ink-faint); }
.press-card .pc-date { color: var(--accent); letter-spacing: .1em; }
.press-card .pc-title { font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.22; margin: 0; color: var(--ink); }
.press-card .pc-excerpt { color: var(--ink-dim); font-size: 14px; line-height: 1.5; margin: 0; }
.press-card .pc-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.press-card .pc-read { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); transition: color .2s; }
.press-card .pc-read b { font-weight: 400; }
.press-card:hover .pc-read { color: #fff; }
.press-rail-arrow { position: absolute; top: calc(50% - 22px); z-index: 3; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); background: var(--bg-2); color: var(--ink);
  font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.4); transition: transform .15s ease, border-color .2s ease; }
.press-rail-arrow:hover { border-color: var(--accent); transform: scale(1.06); }
.press-rail-arrow.prev { left: -10px; }
.press-rail-arrow.next { right: -10px; }
@media (max-width: 640px) { .press-rail-arrow { display: none !important; } }
.laurels { display: flex; gap: 12px; flex-wrap: wrap; }
.laurel { border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 20px; padding: 8px 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--accent); }
/* The Accolades label above the laurels in the accent too, like the other small labels. */
.press-sub { color: var(--accent); }

/* ---- FOOTER — ported from magentalightstudios.com (minus the Magenta Edge
   column): studio lockup and accounts, the studio's film shelves, newsletter,
   legal bar. Dark-theme colours. ---------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 40px; margin-top: 40px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1.2fr; gap: 40px; }
@media (max-width: 820px) { .footer-top { grid-template-columns: 1fr; gap: 32px; } }
.footer-lockup { display: block; height: 56px; width: max-content; margin-bottom: 10px; }
.footer-lockup img { height: 100%; width: auto; display: block; }
.footer-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 14px; }
.footer-col a { display: block; color: var(--ink-dim); text-decoration: none; font-size: 13px; padding: 5px 0; transition: color .2s; }
.footer-col a:hover { color: var(--accent); }
.footer-blurb { color: var(--ink-dim); font-size: 13px; margin: 0 0 12px; }
.social-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.social-row--icons { gap: 4px; margin-top: 14px; }
.social-row--icons a { display: inline-flex; padding: 7px; color: var(--ink-dim); transition: color .2s; }
.social-row--icons a:hover { color: var(--accent); }
.social-row--icons svg { width: 19px; height: 19px; display: block; fill: currentColor; }
.newsletter { display: flex; gap: 10px; flex-wrap: wrap; max-width: 480px; }
.newsletter input[type=email] { flex: 1; min-width: 200px; background: var(--bg-2); border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ink); padding: 13px 15px; border-radius: 4px; font-size: 14px; font-family: var(--mono); }
.newsletter input[type=email]::placeholder { color: var(--ink-faint); }
.newsletter input[type=email]:focus { border-color: var(--accent); outline: none; }
.btn-sm { padding: 11px 18px; font-size: 11px; }
.footer-col .form-note { margin-top: 10px; min-height: 0; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 44px;
  padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px;
  color: var(--ink-faint); letter-spacing: .04em; }
.footer-bottom a { color: var(--ink-faint); text-decoration: none; }
.footer-bottom a:hover { color: var(--accent); }

/* Cookie choice bar, opened from the footer's legal links. */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; display: flex; align-items: center;
  justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 16px 20px; border-radius: 6px;
  background: rgba(12, 12, 16, 0.98); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 60px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s; }
.consent.show { opacity: 1; transform: none; }
.consent p { margin: 0; font-size: 13px; color: var(--ink-dim); max-width: 60ch; }
.consent-actions { display: flex; gap: 10px; }
@media (min-width: 720px) { .consent { left: auto; max-width: 720px; } }

.notify__cta { margin-top: 4px; }

/* Pull quote source: the publication's logo (or its name until the logo file
   lands), linking to the piece. */
.pullquote cite { text-transform: none; letter-spacing: 0; }
.pq-source { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink-dim); transition: color .2s; }
.pq-source img { height: 22px; width: auto; display: block; }
.pq-text { font-family: var(--sans); font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.pq-arrow { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.pq-source:hover { color: var(--accent); }
.pq-source:hover .pq-text, .pq-source:hover .pq-arrow { color: var(--accent); }