/* ==========================================================================
   Port Moody Multiplex — site layer
   Sits on top of tokens.css, base.css, components.css (Zada design system).
   This microsite trades the green hero scrims for cinema black: heroes and
   photo bands letterbox against --black-pure, everything else follows the
   system (paper reading sections, deep green trust moments, brown accent).
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — black scrims replace the system's green gradients on this site
   -------------------------------------------------------------------------- */
.hero__scrim {
  background: linear-gradient(to bottom,
    rgba(5, 5, 5, 0.62) 0%,
    rgba(5, 5, 5, 0.18) 50%,
    rgba(5, 5, 5, 0.74) 100%);
}
.photo-band::after {
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0.82), rgba(5, 5, 5, 0.22));
}

/* Hero content slides in once the page is ready (.is-loaded set by JS) */
.hero__content > * {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--dur-reveal) var(--ease-out-soft),
              transform var(--dur-reveal) var(--ease-out-soft);
}
.hero.is-loaded .hero__content > * { opacity: 1; transform: translateY(0); }
.hero.is-loaded .hero__content > *:nth-child(2) { transition-delay: 0.15s; }
.hero.is-loaded .hero__content > *:nth-child(3) { transition-delay: 0.3s; }
.hero.is-loaded .hero__content > *:nth-child(4) { transition-delay: 0.45s; }

/* Ken Burns for photo heroes: a slow 14s drift inside the crop */
.hero--kenburns img.hero__media {
  animation: pmm-kenburns 14s var(--ease-standard) both;
  will-change: transform;
}
@keyframes pmm-kenburns {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* Interior page hero: shorter, left aligned (uses .hero--short .hero--left) */
.hero--short .hero__content { padding-bottom: 4.5rem; }

.hero__cue { animation: pmm-cue 2.6s ease-in-out infinite; }
@keyframes pmm-cue {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50%      { transform: translateY(6px); opacity: 0.5; }
}

/* --------------------------------------------------------------------------
   NAV — scrolled state goes cinema black on this site (matches hero world)
   -------------------------------------------------------------------------- */
.nav.is-scrolled {
  background: rgba(8, 8, 8, 0.92);
  backdrop-filter: blur(16px) saturate(140%);
}
.nav__cta-link {
  border: 1px solid var(--brown-40);
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.1rem !important;
  color: var(--brown-warm) !important;
  transition: background var(--dur-base) ease, color var(--dur-base) ease;
}
.nav__cta-link:hover { background: var(--brown-warm); color: var(--black-cinema) !important; }
.nav__cta-link::after { display: none; }

/* Mobile menu — full screen cinema overlay */
.nav-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  list-style: none;
  margin: 0; padding: 2rem;
  background: rgba(5, 5, 5, 0.97);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) ease, visibility var(--dur-base) ease;
}
.nav-menu.open { opacity: 1; visibility: visible; }
.nav-menu a {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--off-white);
}
.nav-menu a:hover { color: var(--brown-warm); opacity: 1; }
.nav-menu .nav-menu__group {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brown-warm);
  margin-top: 1rem;
}
.nav__burger { z-index: 101; }
body.menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   EDUCATION COMPONENTS
   -------------------------------------------------------------------------- */

/* Fact table — zoning numbers, unit counts. Paper sections only. */
.fact-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.fact-table th {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--brown-warm);
  text-align: left;
  padding: 0 1rem 0.9rem 0;
  border-bottom: 1px solid var(--hairline-dark);
}
.fact-table td {
  padding: 1rem 1rem 1rem 0;
  border-bottom: 1px solid var(--hairline-dark);
  color: var(--text-body);
  vertical-align: top;
}
.fact-table td:first-child { font-weight: var(--fw-regular); }
.table-scroll { overflow-x: auto; }

/* Numbered process steps */
.steps { counter-reset: step; display: grid; gap: 2.5rem; }
.step { counter-increment: step; display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.5rem; align-items: start; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--brown-warm);
  border-top: 1px solid var(--brown-25);
  padding-top: 0.75rem;
}
.step h3 { font-size: var(--text-h4); margin-bottom: 0.5rem; }
.step p { font-size: var(--text-sm); color: var(--grey-warm); }
.section-dark .step p, .section-cinema .step p { color: var(--ink-on-dark-soft); }
@media (max-width: 640px) { .step { grid-template-columns: 3rem 1fr; gap: 1rem; } .step::before { font-size: 1.8rem; } }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid var(--hairline-dark); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1.75rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 1.5rem;
  color: var(--brown-warm);
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out-soft);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body { padding: 0 0 1.75rem; max-width: 62ch; }
.faq-item__body p { font-size: var(--text-sm); color: var(--grey-warm); line-height: 1.7; }
.faq-item__body p + p { margin-top: 0.9rem; }

/* Definition / glossary card */
.term { border-top: 1px solid var(--brown-25); padding-top: 1.25rem; }
.term--light { border-top-color: var(--hairline-dark); }
.term__word { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 0.5rem; }
.term__def { font-size: var(--text-sm); color: var(--ink-on-dark-soft); }
.term--light .term__def { color: var(--grey-warm); }

/* Callout — key fact emphasis inside long-form reading */
.callout {
  border-left: 2px solid var(--brown-warm);
  background: var(--brown-08);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
}
.callout p { font-size: var(--text-sm); }
.callout .eyebrow { display: block; margin-bottom: 0.6rem; font-size: 0.68rem; }

/* Source note — education-first credibility line under sections */
.source-note {
  font-size: var(--text-2xs);
  color: var(--grey-soft);
  letter-spacing: 0.02em;
  margin-top: 2rem;
}
.source-note a { text-decoration: underline; text-underline-offset: 3px; }
.section-dark .source-note, .section-cinema .source-note { color: var(--ink-on-dark-faint); }

/* --------------------------------------------------------------------------
   CARDS — neighbourhoods, guides, blog
   -------------------------------------------------------------------------- */
.tile-card { position: relative; display: block; overflow: hidden; color: var(--off-white); }
.tile-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
  transition: transform var(--dur-slow) ease;
}
.tile-card:hover { opacity: 1; }
.tile-card:hover img { transform: scale(1.04); }
.tile-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,0.78) 0%, rgba(5,5,5,0.12) 55%);
  transition: background var(--dur-slow) ease;
}
.tile-card__body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; padding: 1.75rem; }
.tile-card__kicker {
  font-size: 0.68rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brown-warm);
  margin-bottom: 0.5rem;
}
.tile-card__title { font-family: var(--font-serif); font-size: 1.75rem; line-height: 1.15; }
.tile-card__meta { font-size: var(--text-xs); color: var(--ink-on-dark-soft); margin-top: 0.4rem; }

.grid-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 1024px) { .grid-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .grid-tiles { grid-template-columns: 1fr; } }

/* Blog / guide card on paper */
.post-card { display: block; color: inherit; }
.post-card:hover { opacity: 1; }
.post-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--grey-soft); margin-bottom: 1.25rem; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) ease; }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__kicker { font-size: 0.68rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brown-warm); margin-bottom: 0.6rem; }
.post-card__title { font-family: var(--font-serif); font-size: 1.6rem; line-height: 1.2; margin-bottom: 0.6rem; }
.post-card:hover .post-card__title { color: var(--brown-warm); transition: color var(--dur-fast) ease; }
.post-card__excerpt { font-size: var(--text-sm); color: var(--grey-warm); max-width: 48ch; }
.post-card__date { font-size: var(--text-2xs); color: var(--grey-soft); margin-top: 0.8rem; letter-spacing: 0.06em; }

/* --------------------------------------------------------------------------
   LONG-FORM ARTICLE (blog posts, guides)
   -------------------------------------------------------------------------- */
.article { padding: var(--section-y) 0; }
.article__inner { max-width: var(--content-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.article h2 { font-size: var(--text-h3); margin: 3rem 0 1.25rem; }
.article h3 { font-size: var(--text-h4); margin: 2.25rem 0 1rem; }
.article p { margin-bottom: 1.25rem; }
.article ul, .article ol { margin: 0 0 1.5rem 1.25rem; }
.article li { margin-bottom: 0.6rem; font-size: var(--text-base); line-height: 1.7; }
.article blockquote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.55;
  color: var(--grey-warm);
  border-left: 2px solid var(--brown-warm);
  padding-left: 1.75rem;
  margin: 2.5rem 0;
}
.article figure { margin: 2.5rem 0; }
.article figcaption { font-size: var(--text-2xs); color: var(--grey-soft); margin-top: 0.75rem; }
.article__meta {
  display: flex; gap: 1rem; align-items: center;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-soft);
  margin-bottom: 2.5rem;
}

/* --------------------------------------------------------------------------
   MISC
   -------------------------------------------------------------------------- */

/* Split media block */
.grid-split .media-crop { overflow: hidden; }
.grid-split .media-crop img { transition: transform var(--dur-slow) ease; width: 100%; display: block; }
.grid-split .media-crop:hover img { transform: scale(1.04); }

/* Statement band type */
.photo-band .statement {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 4vw, 3.25rem);
  line-height: 1.15;
  text-align: center;
  max-width: 22ch;
  padding: var(--section-y) var(--gutter);
}
.photo-band .statement strong { color: var(--brown-warm); font-weight: var(--fw-regular); }

/* CTA band */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin: 0 auto 1.25rem; }
.cta-band .lede { max-width: 52ch; margin: 0 auto 2.5rem; }
.cta-band .hero__actions { justify-content: center; }

/* Disclosure fine print */
.fine-print { font-size: var(--text-2xs); color: var(--grey-soft); line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .hero--kenburns img.hero__media { animation: none; }
  .hero__cue { animation: none; }
  .hero__content > * { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   EMBEDS — City zoning map, flipbook guide, video (restored resources)
   -------------------------------------------------------------------------- */
.hero__content { padding-top: 7rem; }

.embed-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--black-cinema);
  overflow: hidden;
}
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-frame__cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
  padding: 2rem;
}
.embed-frame__cover::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(5,5,5,0.55), rgba(5,5,5,0.78));
  z-index: -1;
}
.embed-frame__cover img.cover-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.embed-frame__note { font-size: var(--text-sm); color: var(--ink-on-dark-soft); max-width: 40ch; }

.guide-embed { aspect-ratio: 3 / 2.1; }
.guide-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.play-btn {
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 1px solid var(--brown-40);
  background: rgba(10,10,10,0.6);
  backdrop-filter: blur(6px);
  color: var(--brown-warm);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--dur-base) ease, transform var(--dur-base) var(--ease-out-soft);
}
.play-btn svg { width: 26px; height: 26px; margin-left: 4px; }
.embed-frame__cover:hover .play-btn, .play-btn:hover { background: var(--brown-warm); color: var(--black-cinema); transform: scale(1.06); }