:root {
  --logo-url: url("assets/PLANNINE_LOGO_NEW__f8e27c2b.png");
}
html { scroll-behavior: smooth; }
body {
  background: #000;
  color: #d8d8da;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","cv11";
}

/* Film grain */
.grain::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 60;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: .6;
}

/* Vignette overlay across whole document */
.vignette::after {
  content:"";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 55;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.65) 100%);
}

/* Type */
.display {
  font-family: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.035em;
  font-feature-settings: "ss01", "liga";
  line-height: 1;
}
.it { font-style: italic; letter-spacing: -0.025em; }
.mono {
  font-family: "Geist Mono", monospace;
  letter-spacing: 0.06em;
  font-feature-settings: "ss02";
}

/* Nav */
.nav-link {
  color: #c2c4c9; transition: color .35s ease, text-shadow .5s ease;
}
.nav-link:hover { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.45); }
.nav-link.active { color: #fff; }
.nav-link.active::after {
  content:""; display:block; height:1px; margin-top:4px;
  background: rgba(255,255,255,.6);
}

/* ============================================================
   LOGO — shine on hover
   ============================================================ */
.logo-mark {
  position: relative; display: inline-block; line-height: 0; cursor: pointer; isolation: isolate;
}
.logo-mark .logo-base {
  display: block; width: 100%; height: auto;
  transition: filter .8s ease, opacity .6s ease;
  filter: drop-shadow(0 0 0 rgba(255,255,255,0));
}
.logo-mark .logo-shine {
  position: absolute; inset: 0;
  -webkit-mask-image: var(--logo-url); mask-image: var(--logo-url);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  background: linear-gradient(115deg,
    rgba(180,180,180,0)   0%,
    rgba(220,220,220,.0)  35%,
    rgba(255,255,255,.95) 48%,
    rgba(255,255,255,1)   50%,
    rgba(255,255,255,.95) 52%,
    rgba(220,220,220,.0)  65%,
    rgba(180,180,180,0)   100%);
  background-size: 240% 100%;
  background-position: 200% 0;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  mix-blend-mode: screen;
}
.logo-mark:hover .logo-shine {
  opacity: 1; animation: shine-sweep 1.6s cubic-bezier(.2,.7,.2,1) forwards;
}
.logo-mark:hover .logo-base {
  filter: drop-shadow(0 0 28px rgba(255,255,255,.32))
          drop-shadow(0 0 4px  rgba(255,255,255,.25));
}
@keyframes shine-sweep {
  0%   { background-position: 220% 0; }
  100% { background-position: -120% 0; }
}

.ambient-breathe { animation: breathe 7s ease-in-out infinite; }
@keyframes breathe {
  0%,100% { filter: drop-shadow(0 0 24px rgba(255,255,255,.06)); }
  50%     { filter: drop-shadow(0 0 36px rgba(255,255,255,.18)); }
}

/* ============================================================
   HERO (home page)
   ============================================================ */
.hero { position: relative; overflow: hidden; background: #000; }

.hero-bg {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.hero-bg .plate {
  position: absolute; inset: -6%;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: contrast(1.05) brightness(.95) saturate(1.25);
  animation: ken-burns 32s ease-in-out infinite alternate;
  transform-origin: 50% 55%;
  z-index: 0;
  transition: opacity .8s ease;
}
@keyframes ken-burns {
  0%   { transform: scale(1.00) translate(0,    0);   }
  50%  { transform: scale(1.08) translate(-1.5%, -1%); }
  100% { transform: scale(1.04) translate(1%,   1.5%); }
}
.hero-bg iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;
  min-height: 100%; min-width: 177.78vh;
  border: 0;
  filter: contrast(1.04) brightness(1) saturate(1.3);
  z-index: 1;
  transition: opacity .8s ease;
}
.hero-bg::after {
  content:""; position: absolute; inset: 0; z-index: 3;
  background:
    radial-gradient(85% 70% at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.95) 100%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 28%, rgba(0,0,0,.92) 100%);
  pointer-events: none;
}
.hero-bg::before {
  content:""; position: absolute; inset: 0; z-index: 2;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.02) 0px,
    rgba(255,255,255,.02) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  mix-blend-mode: overlay;
}
.hero > .hero-content { position: relative; z-index: 1; }

/* ============================================================
   CAROUSEL
   ============================================================ */
.carousel-controls {
  display: flex; align-items: center; gap: .75rem;
}
.carousel-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: "Geist Mono", monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  transition: border-color .4s ease, background .4s ease, box-shadow .5s ease, color .3s ease;
}
.carousel-btn:hover {
  border-color: #fff;
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 22px rgba(255,255,255,.15);
}
.carousel-btn .arrow {
  display: inline-block; transition: transform .4s ease;
}
.carousel-btn.prev:hover .arrow { transform: translateX(-3px); }
.carousel-btn.next:hover .arrow { transform: translateX(3px); }

/* Slide-meta crossfade */
.slide-meta { transition: opacity .35s ease; }
.slide-meta.fading { opacity: 0; }

/* Floating side-arrow nav (carousel) — sits in the upper portion of the
   hero so the trailer title/description has room beneath it. */
.hero-side-nav {
  position: absolute;
  top: 36%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: "Geist Mono", monospace;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: border-color .4s ease, background .4s ease, box-shadow .5s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.hero-side-nav:hover {
  border-color: #fff;
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 28px rgba(255,255,255,.18);
}
.hero-side-nav.prev { left: 2rem; }
.hero-side-nav.next { right: 2rem; }
.hero-side-nav.prev:hover { transform: translateY(-50%) translateX(-3px); }
.hero-side-nav.next:hover { transform: translateY(-50%) translateX(3px); }
@media (min-width: 1280px) {
  .hero-side-nav.prev { left: 3rem; }
  .hero-side-nav.next { right: 3rem; }
}

/* Long carousel titles (e.g. "Whim Rules the Child") need a smaller scale
   so they don't wrap onto two lines inside the 8-col title block. */
#wkFilmTitle.wkFilmTitle--long {
  font-size: clamp(2rem, 6.5vw, 5rem);
  line-height: 0.96;
  white-space: nowrap;
}

/* Mobile-only mini arrows in the carousel meta strip */
.hero-nav-mini {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: "Geist Mono", monospace;
  font-size: 15px; line-height: 1;
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease;
}
.hero-nav-mini:hover, .hero-nav-mini:active {
  border-color: #fff;
  background: rgba(255,255,255,.08);
}

/* Watch-trailer pill */
.watch-pill {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .65rem 1rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,.25);
  transition: border-color .4s ease, background .4s ease, box-shadow .5s ease, transform .5s ease;
}
.watch-pill:hover {
  border-color: #fff;
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 30px rgba(255,255,255,.15);
}
.watch-pill .play-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.6);
  animation: blink 2.4s ease-in-out infinite;
}

/* ============================================================
   FRAMES (project stills on /work)
   ============================================================ */
.frame {
  position: relative; overflow: hidden; background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.7);
  transition: filter 1s ease, transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.frame:hover img {
  filter: grayscale(0) contrast(1) brightness(.95);
  transform: scale(1.02);
}
.frame::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(0,0,0,.55), transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.6) 100%);
  pointer-events: none;
}
.frame::before {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 80px rgba(0,0,0,.6);
  pointer-events: none; z-index: 1;
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Hairlines */
.rule      { border-top: 1px solid rgba(255,255,255,.10); }
.rule-soft { border-top: 1px solid rgba(255,255,255,.05); }

/* ============================================================
   LAURELS (festival awards on /work)
   ============================================================ */
.laurels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 18px;
  margin-top: .25rem;
}

/* Every laurel occupies the same fixed box so PNGs and SVG-drawn ones line up uniformly.
   At rest: small + dimmed. On scroll-into-view (.is-visible added by site.js IO):
   brightens up and grows a touch. */
.laurel {
  width: 150px;
  height: 88px;
  flex: 0 0 150px;
  margin: 0;
  padding: 3px;
  opacity: .5;
  filter: brightness(.65);
  transform: scale(.94);
  transition:
    opacity 1.1s ease,
    filter 1.1s ease,
    transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.laurel.is-visible {
  opacity: 1;
  filter: brightness(1);
  transform: scale(1.06);
}

.laurel:not(.laurel--img) {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 5px;
}

.l-leaf {
  width: 18px;
  height: 66px;
  color: #e8d6a6;
  opacity: .92;
  filter: drop-shadow(0 0 6px rgba(232, 214, 166, .18));
  transition: color .5s ease, opacity .5s ease, filter .6s ease;
}
.l-leaf.l-right { transform: scaleX(-1); }
.laurel:hover .l-leaf {
  color: #f6e5b0;
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(246, 229, 176, .35));
}

.laurel figcaption {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.l-eyebrow {
  font-family: "Geist Mono", monospace;
  font-size: 7px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #bdbec3;
  line-height: 1;
}
.l-title {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .005em;
  color: #ededed;
  line-height: 1.14;
  text-wrap: balance;
}
.l-meta {
  font-family: "Geist Mono", monospace;
  font-size: 7.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #888a90;
  line-height: 1;
}

/* Real festival-laurel PNG variant — fits the same 220×104 box as the SVG laurels */
.laurel.laurel--img {
  display: flex;
  align-items: center;
  justify-content: center;
}
.laurel.laurel--img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .12));
  transition: filter .6s ease, transform .5s ease;
}
.laurel.laurel--img:hover img {
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, .28));
  transform: scale(1.04);
}

/* Compensation for laurels whose source PNG is square/near-square aspect —
   without this they render visibly smaller than wide laurels in the same box. */
.laurel.laurel--sq img { transform: scale(1.22); }
.laurel.laurel--img.laurel--sq:hover img { transform: scale(1.26); }

/* Per-laurel size tweaks for ones with unusual internal padding */
.laurel.laurel--xl img { transform: scale(1.36); }
.laurel.laurel--img.laurel--xl:hover img { transform: scale(1.40); }
.laurel.laurel--sm img { transform: scale(0.88); }
.laurel.laurel--img.laurel--sm:hover img { transform: scale(0.92); }

/* Black-on-white laurel PNGs: invert so they read light on the dark page. */
.laurel.laurel--img.laurel--invert img {
  filter: invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, .12));
}
.laurel.laurel--img.laurel--invert:hover img {
  filter: invert(1) drop-shadow(0 0 16px rgba(255, 255, 255, .28));
}

/* 2-column laurel grid — used in narrow side columns on /work */
.laurels.laurels-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-items: center;
  gap: 24px 14px;
}
/* Every cell occupies the same visual box — keeps PNGs and SVG laurels in tidy rows. */
.laurels-2col .laurel {
  width: 100%;
  height: 92px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.laurels-2col .laurel:not(.laurel--img) {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 22px;
  gap: 6px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.laurels-2col .l-leaf {
  width: 22px;
  height: 76px;
}
.laurels-2col .laurel.laurel--img img {
  height: 80px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
}
.laurels-2col .l-title   { font-size: 11.5px; line-height: 1.16; }
.laurels-2col .l-eyebrow { font-size: 8px; }
.laurels-2col .l-meta    { font-size: 8.5px; }

/* Glow text helpers */
.glow-on-hover { transition: text-shadow .6s ease, color .4s ease; }
.glow-on-hover:hover { text-shadow: 0 0 22px rgba(255,255,255,.35); color: #fff; }

/* Email mega-link */
.email-link { position: relative; display: inline-block; transition: color .4s ease, text-shadow .6s ease; }
.email-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: scaleX(.45); transform-origin: center;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.email-link:hover {
  color: #fff;
  text-shadow: 0 0 30px rgba(255,255,255,.5), 0 0 4px rgba(255,255,255,.3);
}
.email-link:hover::after { transform: scaleX(1); filter: drop-shadow(0 0 10px rgba(255,255,255,.6)); }

/* Editorial rows */
.row {
  display: grid; grid-template-columns: 56px 1fr; gap: 1.25rem;
  align-items: baseline; padding: 1.4rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 768px) {
  .row { grid-template-columns: 80px minmax(0,1.1fr) minmax(0,2.2fr) auto; gap: 2rem; padding: 1.75rem 0; }
}

/* Subtle scroll-cue blink */
.blink { animation: blink 3s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:.55} 50%{opacity:.95} }

/* News headline soft glow */
.news-row:hover .news-title { color: #fff; text-shadow: 0 0 22px rgba(255,255,255,.25); }
.news-title { transition: color .4s ease, text-shadow .5s ease; }

/* Clickable news card with thumbnail */
.news-card {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 1rem 1.25rem;
  align-items: center;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.news-card:last-child { border-bottom: 1px solid rgba(255,255,255,.08); }
.news-card:hover .news-title { color: #fff; text-shadow: 0 0 22px rgba(255,255,255,.25); }
.news-card:hover .news-arrow { color: #fff; transform: translate(2px, -2px); }
.news-arrow { transition: color .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.news-thumb {
  position: relative; overflow: hidden; background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  aspect-ratio: 3 / 2;
}
.news-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.75);
  transition: filter .8s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.news-card:hover .news-thumb img { filter: grayscale(0) brightness(.95); transform: scale(1.03); }
@media (min-width: 768px) {
  .news-card {
    grid-template-columns: 140px 80px minmax(0, 1fr) auto;
    gap: 1.25rem 2rem;
    padding: 1.75rem 0;
  }
}

/* Page header (subpages) */
.page-head {
  padding: 9rem 0 4.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 768px) { .page-head { padding: 11rem 0 6rem; } }

/* Page transition fade */
.page-fade { animation: page-in .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ============================================================
   COLOURFUL WORDMARK CENTERPIECE
   ============================================================ */
.colour-mark {
  display: block;
  width: clamp(96px, 9vw, 150px);
  height: auto;
  filter: drop-shadow(0 0 20px rgba(80,180,255,.14))
          drop-shadow(0 0 40px rgba(255,80,160,.08));
  animation: colour-float 9s ease-in-out infinite alternate;
}
@keyframes colour-float {
  0%   { transform: translateY(0)    scale(1); }
  100% { transform: translateY(-10px) scale(1.012); }
}

/* ============================================================
   INSTAGRAM EMBED — live post iframes (dark / wireframe treatment)
   ----
   Instagram serves these from instagram.com on a fixed white card.
   We can't restyle the iframe internals, so we apply an invert +
   hue-rotate filter: white chrome flips to near-black while photo
   colours stay roughly intact. The wrapper adds a thin hairline
   frame to anchor the cards into the dark page.
   ============================================================ */
.ig-embed {
  position: relative;
  width: 100%;
  background: #0a0a0a;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 40px rgba(0,0,0,.5);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease;
}
.ig-embed:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 22px 60px rgba(0,0,0,.65);
}
.ig-embed iframe {
  width: 100%;
  height: 660px;
  border: 0;
  display: block;
  background: #fff;
}
@media (min-width: 768px) {
  .ig-embed iframe { height: 600px; }
}