/* AIOLF / HOMEPAGE — single source of truth.
   All homepage film, philosophy, editorial news and product styles live here.
   website.css remains shared site/navigation CSS, not a second home stylesheet. */

.home-film-document {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  background: #070909;
}

body.home-film-page {
  --home-bg: #070909;
  --home-panel: #101414;
  --home-paper: #f3f3ed;
  --home-muted: #a3aaa6;
  --home-green: #00ff80;
  --home-pink: #ff0080;
  --home-side: max(clamp(1.25rem, 6.25vw, 7rem), calc((100vw - 1440px) / 2));
  --home-inner: calc(100% - 2 * var(--home-side));
  display: block;
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  margin: 0;
  background: var(--home-bg);
  color: var(--home-paper);
}

body.home-film-page main {
  position: relative;
  width: 100%;
  isolation: isolate;
}

body.home-film-page .home-scroll-module {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: transparent;
}

/* Shared navigation, with intentionally scoped overrides. */
body.home-film-page .navbar.navbar-film {
  background: #050707;
}

body.home-film-page .navbar.navbar-film a,
body.home-film-page .navbar.navbar-film .language-switch {
  color: #fff;
}

body.home-film-page .navbar.navbar-film a:hover,
body.home-film-page .navbar.navbar-film .dropdown a:hover {
  color: var(--home-pink) !important;
}

body.home-film-page .navbar.navbar-film a.active,
body.home-film-page .navbar.navbar-film li.active>a {
  color: var(--home-green) !important;
}

body.home-film-page .navbar.navbar-film .menu-toggle .bar {
  background: #fff;
}

body.home-film-page .navbar.navbar-film ul,
body.home-film-page .navbar.navbar-film .dropdown {
  background: #050707 !important;
}

body.home-film-page .navbar.navbar-film .language-switch {
  border-color: rgba(255, 255, 255, .5);
}

body.home-film-page .navbar.navbar-film .language-switch:hover {
  background: var(--home-pink);
  border-color: var(--home-pink);
}

/* ============================================================
   01 / CINEMA. Compositing-only CRT shutdown: fixed layers collapse
   sideways into the vertical centre line, leaving solid black behind.
   Animation work itself stops when the film leaves the first screen.
   ============================================================ */
/* The film Canvas is ALWAYS visible on the first screen. It is NOT part
   of the CRT overlay selector: the previous comma grouped it with
   visibility:hidden and blanked the entire movie. */
body.home-film-page .film-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100vw;
  height: 100svh;
  visibility: visible;
  opacity: 1;
  pointer-events: none;
}

body.home-film-page .film-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100svh;
  visibility: visible;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 9, 9, .40), rgba(7, 9, 9, .12) 48%, rgba(7, 9, 9, .025) 78%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .008) 0 1px, transparent 1px 5px);
}

/* Turn off the background only AFTER leaving the opening movie.
   The independent CRT layer displays a frozen snapshot during its outro. */
body.home-film-page[data-film-view="off"] .film-canvas,
body.home-film-page[data-film-view="off"] .film-grain {
  visibility: hidden;
}

/* Independent, top-composited CRT overlay: only this layer starts hidden. */
body.home-film-page .film-crt-outro {
  position: fixed;
  inset: 0;
  z-index: 80;
  isolation: isolate;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  background: #030505;
}

body.home-film-page .film-crt-outro.is-closing {
  visibility: visible;
}

body.home-film-page .film-crt-outro-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  opacity: 1;
}

body.home-film-page .film-crt-outro.is-closing .film-crt-outro-frame {
  animation: film-crt-shrink 850ms cubic-bezier(.26, .03, .19, 1) both;
}

@keyframes film-crt-shrink {
  0% {
    transform: scale(1, 1);
    opacity: 1;
    filter: brightness(1.08);
  }

  14% {
    transform: scale(.95, 1);
    opacity: 1;
    filter: brightness(1.25);
  }

  40% {
    transform: scale(.013, 1);
    opacity: 1;
    filter: brightness(2.4);
  }

  56% {
    transform: scale(.004, 1);
    opacity: 1;
    filter: brightness(3.5);
  }

  73% {
    transform: scale(.004, .013);
    opacity: 1;
    filter: brightness(4.5);
  }

  88% {
    transform: scale(.002, .002);
    opacity: .8;
    filter: brightness(5);
  }

  100% {
    transform: scale(0, 0);
    opacity: 0;
    filter: brightness(1);
  }
}

body.home-film-page .film-crt-outro-line,
body.home-film-page .film-crt-outro-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  opacity: 0;
  transform: translate(-50%, -50%);
}

body.home-film-page .film-crt-outro-line {
  width: 2px;
  height: 92svh;
  background: #eafff4;
  box-shadow: 0 0 7px 3px rgba(255, 255, 255, .75),
    0 0 32px 10px rgba(0, 255, 128, .32),
    0 0 70px 12px rgba(255, 0, 128, .17);
}

body.home-film-page .film-crt-outro-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 4px #fff, 0 0 25px 9px rgba(0, 255, 128, .72),
    0 0 60px 16px rgba(255, 0, 128, .24);
}

body.home-film-page .film-crt-outro.is-closing .film-crt-outro-line {
  animation: film-crt-line 850ms ease-out both;
}

body.home-film-page .film-crt-outro.is-closing .film-crt-outro-dot {
  animation: film-crt-dot 850ms ease-out both;
}

@keyframes film-crt-line {

  0%,
  32% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(1);
  }

  43% {
    opacity: .95;
    transform: translate(-50%, -50%) scaleY(1);
  }

  56% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleY(1);
  }

  71% {
    opacity: .95;
    transform: translate(-50%, -50%) scaleY(.012);
  }

  78%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(0);
  }
}

@keyframes film-crt-dot {

  0%,
  60% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.25);
  }

  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5);
  }

  82% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.08);
  }
}

body.home-film-page .olfaction-film {
  --film-ink: #fff;
  --film-dim: rgba(243, 243, 237, .77);
  z-index: 2;
  display: flex;
  align-items: center;
  padding: clamp(5.8rem, 12vh, 8rem) var(--home-side) clamp(2rem, 5vh, 3.5rem);
  color: #fff;
  isolation: isolate;
}

body.home-film-page .film-content {
  position: relative;
  z-index: 3;
  width: min(100%, 62vw);
  text-shadow: 0 2px 27px #060908;
}

body.home-film-page .film-eyebrow,
body.home-film-page .meaning-eyebrow {
  margin: 0 0 1.3rem;
  color: var(--home-green);
  font-size: .74rem;
  font-weight: normal;
  line-height: 1;
  text-transform: uppercase;
}

body.home-film-page .film-title {
  position: static;
  width: 100%;

  margin: 0;
  color: #fff;
  font-size: 6.2vh;
  font-weight: normal;
  line-height: 1;
  text-align: left;
}

body.home-film-page .film-caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  align-items: baseline;
  min-height: 5.3rem;
  margin-top: clamp(1.7rem, 4vh, 3rem);
}

body.home-film-page .film-stage-count {
  color: var(--home-pink);
  font-size: .73rem;
  font-variant-numeric: tabular-nums;
}

body.home-film-page .film-stage-label {
  color: #fff;
  font-size: .98rem;
}

body.home-film-page .film-stage-copy {
  grid-column: 2;
  max-width: 30rem;
  margin: .5rem 0 0;
  color: var(--film-dim);
  font-size: .95rem;
  line-height: 1.6;
}

body.home-film-page .film-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.home-film-page .film-timeline li {
  min-width: 0;
  color: rgba(243, 243, 237, .52);
}

body.home-film-page .film-timeline li.is-active,
body.home-film-page .film-timeline li.is-complete {
  color: #fff;
}

body.home-film-page .film-step-label {
  display: block;
  padding-top: .65rem;
  font-size: .69rem;
  transition: color 350ms;
}

body.home-film-page .film-step-track {
  display: block;
  width: 100%;
  height: 2px;
  margin-top: .5rem;
  overflow: hidden;
  background: rgba(255, 255, 255, .2);
}

body.home-film-page .film-step-track>span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--home-pink), var(--home-green));
  transform: scaleX(var(--step-progress, 0));
  transform-origin: left center;
}

body.home-film-page .film-scroll {
  display: inline-block;
  margin-top: 1.4rem;
  color: #fff;
  font-size: .81rem;
  text-decoration: none;
}

body.home-film-page .film-scroll:hover {
  color: var(--home-green);
}

body.home-film-page .film-progress {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: rgba(255, 255, 255, .10);
}

body.home-film-page .film-progress>span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--home-pink), var(--home-green));
  transform: scaleX(var(--film-progress, 0));
  transform-origin: left center;
}

/* ============================================================
   02 / THE PHILOSOPHY — white space and typographic certainty.
   The three pillars retain their original animated diagrams.
   ============================================================ */
body.home-film-page .olfaction-meaning {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(5.5rem, 10vh, 8rem) var(--home-side) clamp(2rem, 4vh, 3rem);
  background: var(--home-bg);
  color: var(--home-paper);
}

body.home-film-page .meaning-intro {
  min-width: 0;
  max-width: 1050px;
}

body.home-film-page .meaning-intro h2 {
  margin: 0;
  color: #fff;
  font-size: 6.2vh;
  font-weight: normal;
  line-height: 1;
}

body.home-film-page .meaning-description {
  max-width: 52rem;
  margin: 1.4rem 0 0;
  color: rgba(243, 243, 237, .72);
  font-size: clamp(.96rem, 1.38vw, 1.16rem);
  line-height: 1;
}

body.home-film-page .meaning-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.15rem, 2.7vw, 3rem);
  margin-top: clamp(2rem, 5vh, 3.5rem);
}

body.home-film-page .meaning-principle {
  min-width: 0;
  padding-top: .95rem;
  border-top: 1px solid rgba(243, 243, 237, .30);
}

body.home-film-page .principle-index {
  color: var(--home-green);
  font-size: .71rem;
  font-variant-numeric: tabular-nums;
}

body.home-film-page .meaning-principle h3 {
  margin: 1.05rem 0 .65rem;
  color: #fff;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 440;
}

body.home-film-page .meaning-principle p {
  max-width: 27rem;
  margin: 0;
  color: rgba(243, 243, 237, .74);
  font-size: clamp(.79rem, 1vw, .94rem);
  line-height: 1.65;
}

body.home-film-page .principle-visual {
  position: relative;
  height: clamp(4.3rem, 8vw, 6.6rem);
  margin: 1rem 0 .9rem;
  overflow: hidden;
  background: #101615;
}

body.home-film-page .principle-visual--sense {
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 130%, rgba(0, 255, 128, .13), transparent 65%), #101615;
}

body.home-film-page .principle-visual--sense span {
  position: absolute;
  width: 5.6rem;
  height: 5.6rem;
  border: 1px solid rgba(0, 255, 128, .26);
  border-radius: 50%;
  animation: sense-resonate 5s ease-in-out infinite;
}

body.home-film-page .principle-visual--sense span:nth-child(2) {
  width: 3.9rem;
  height: 3.9rem;
  animation-delay: -1.7s;
}

body.home-film-page .principle-visual--sense span:nth-child(3) {
  width: .7rem;
  height: .7rem;
  border: 0;
  background: var(--home-green);
  box-shadow: 0 0 22px rgba(0, 255, 128, .35);
}

body.home-film-page .principle-visual--flow {
  background: radial-gradient(ellipse at 20% 100%, rgba(0, 255, 128, .10), transparent 68%), #101615;
}

body.home-film-page .principle-visual--flow span {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 128, .44), transparent);
  animation: scent-current 8s ease-in-out infinite alternate;
}

body.home-film-page .principle-visual--flow span:nth-child(1) {
  top: 32%;
}

body.home-film-page .principle-visual--flow span:nth-child(2) {
  top: 51%;
  animation-delay: -2.5s;
}

body.home-film-page .principle-visual--flow span:nth-child(3) {
  top: 70%;
  animation-delay: -5s;
}

body.home-film-page .principle-visual--flow span::after {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--home-green);
  box-shadow: 0 0 12px rgba(0, 255, 128, .35);
  content: '';
}

body.home-film-page .principle-visual--pattern {
  background: linear-gradient(rgba(0, 255, 128, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 128, .10) 1px, transparent 1px), #101615;
  background-size: 2rem 2rem;
}

body.home-film-page .principle-visual--pattern span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .45rem;
  height: .45rem;
  border: 1px solid var(--home-green);
  border-radius: 50%;
  background: #101615;
  box-shadow: 0 0 0 .45rem rgba(0, 255, 128, .07);
  transform: translate(-50%, -50%);
  animation: pattern-emerge 3.6s ease-in-out infinite;
}

body.home-film-page .principle-visual--pattern span:nth-child(2) {
  left: 30%;
  animation-delay: -1.2s;
}

body.home-film-page .principle-visual--pattern span:nth-child(3) {
  left: 70%;
  animation-delay: -2.4s;
}

body.home-film-page .meaning-link {
  display: inline-block;
  align-self: flex-start;
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
  color: var(--home-paper);
  font-size: .86rem;
  text-decoration-color: var(--home-green);
  text-underline-offset: .35em;
}

body.home-film-page .meaning-link:hover {
  color: var(--home-green);
}

@keyframes scent-current {
  from {
    transform: translateX(-5%) skewY(-4deg);
    opacity: .45;
  }

  to {
    transform: translateX(5%) skewY(4deg);
    opacity: 1;
  }
}

@keyframes pattern-emerge {

  0%,
  100% {
    opacity: .45;
    transform: translate(-50%, -50%) scale(.78);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.25);
  }
}

@keyframes sense-resonate {

  0%,
  100% {
    opacity: .45;
    transform: scale(.90);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* Shared editorial design system: section headers are aligned to precisely
   the same left/right optical edges as the movie and philosophy sections. */
body.home-film-page .home-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  width: var(--home-inner);
  margin-inline: var(--home-side);
}

body.home-film-page .section-kicker {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .85rem;
  color: var(--home-muted);
  font-size: .70rem;
  font-weight: 500;
}

body.home-film-page .section-kicker-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--home-green);
}

body.home-film-page .section-display {
  margin: 0;
  color: #fff;
  font-size: 3.8vh;
  font-weight: normal;
  line-height: 1.05;
}

body.home-film-page .section-display-muted {
  color: rgba(243, 243, 237, .40);
  font-weight: 340;
}

body.home-film-page .section-side-link,
body.home-film-page .section-side-meta {
  margin-bottom: .35rem;
  color: rgba(243, 243, 237, .74);
  font-size: .76rem;
  text-decoration: none;
}

body.home-film-page .section-side-link:hover {
  color: var(--home-green);
}

/* ============================================================
   03 / JOURNAL — asymmetrical full-bleed magazine cover.
   No floating pills, bevels, or generic rectangular cards.
   ============================================================ */
body.home-film-page .news-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(5.9rem, 11.5vh, 8rem) 0 clamp(1.5rem, 3.3vh, 2.5rem);
  background: #080b0a;
}

body.home-film-page .news-wrapper {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: 0;
  width: var(--home-inner);
  max-height: min(57svh, 630px);
  margin: clamp(1.2rem, 3vh, 2.4rem) var(--home-side) clamp(.7rem, 1.6vh, 1rem);
  overflow: hidden;
  background: #101514;
  border-top: 1px solid rgba(255, 255, 255, .2);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}

body.home-film-page .news-display {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 450ms ease, transform 600ms cubic-bezier(.2, .68, .25, 1), visibility 450ms;
}

body.home-film-page .news-display.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

body.home-film-page .news-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(1.45rem, 3.4vw, 4.6rem);
  background:
    radial-gradient(ellipse at 0 100%, rgba(0, 255, 128, .065), transparent 48%),
    #101514;
}

body.home-film-page .news-issue {
  color: var(--home-green);
  font-size: .67rem;
  font-weight: 550;
}

body.home-film-page .news-date {
  display: block;
  margin: auto 0 1rem;
  color: rgba(243, 243, 237, .51);
  font-size: .78rem;
}

body.home-film-page .news-title {
  max-width: 12.5em;
  margin: 0 0 .85rem;
  color: #fff;
  font-size: 3.8vh;
  line-height: 1;
  font-weight: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.home-film-page .news-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-width: 36em;
  overflow: hidden;
  margin: 0;
  color: rgba(243, 243, 237, .68);
  font-size: clamp(.83rem, 1.15vw, 1rem);
  line-height: 1.65;
}

body.home-film-page .news-read {
  display: inline-flex;
  margin-top: clamp(1rem, 3vh, 2rem);
  color: #fff;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--home-green);
  font-size: .79rem;
}

body.home-film-page .news-right {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(125deg, #1b2823, #101013 58%, #431c34);
}

body.home-film-page .news-right::after {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .08), transparent 35%, rgba(0, 0, 0, .36));
}

body.home-film-page .news-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(.12, .55, .24, 1);
}

body.home-film-page .news-display:hover .news-image {
  transform: scale(1.045);
}

body.home-film-page .news-image-mark {
  position: absolute;
  z-index: 1;
  right: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 2.4vw, 2rem);
  color: rgba(255, 255, 255, .85);
  font-size: .63rem;
  text-shadow: 0 1px 14px #000;
}

body.home-film-page .news-fallback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: clamp(2rem, 5vw, 5rem);
  color: #fff;
  background: radial-gradient(ellipse at 100% 50%, rgba(255, 0, 128, .12), transparent 48%),
    radial-gradient(ellipse at 0 100%, rgba(0, 255, 128, .10), transparent 45%), #101514;
}

body.home-film-page .news-fallback-index {
  color: var(--home-green);
  font-size: .71rem;
}

body.home-film-page .news-fallback p {
  margin: 1.5rem 0 2rem;
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 4rem);
}

body.home-film-page .news-fallback-link {
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--home-green);
  color: var(--home-paper);
  font-size: .9rem;
  text-decoration: none;
}

body.home-film-page .news-container.is-empty .news-switch,
body.home-film-page .news-container.is-empty .news-position {
  visibility: hidden;
}

body.home-film-page .news-bottom-bar,
body.home-film-page .product-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: var(--home-inner);
  min-height: 2.7rem;
  margin-inline: var(--home-side);
}

body.home-film-page .news-position,
body.home-film-page .product-position {
  color: #fff;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

body.home-film-page .news-position>span:first-child,
body.home-film-page .product-position>span:first-child {
  color: var(--home-green);
}

body.home-film-page .news-count-divider {
  color: #626a66;
  padding: 0 .4rem;
}

body.home-film-page .news-bottom-caption,
body.home-film-page .product-controls-hint {
  color: rgba(243, 243, 237, .47);
  font-size: .66rem;
}

body.home-film-page .news-switch,
body.home-film-page .product-switch {
  display: flex;
  gap: .55rem;
}

body.home-film-page .news-arrow,
body.home-film-page .product-arrow {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  padding: 0;
  border: 1px solid rgba(243, 243, 237, .32);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 1.13rem;
  cursor: pointer;
  transition: background 190ms, border-color 190ms, color 190ms;
}

body.home-film-page .news-arrow:hover,
body.home-film-page .product-arrow:hover {
  background: var(--home-green);
  border-color: var(--home-green);
  color: #07100b;
}

/* ============================================================
   04 / PRODUCT ATLAS — restrained full-photo editorial gallery.
   Neighbours remain visible, central item is dominant and clickable.
   ============================================================ */
body.home-film-page .carousel.home-products-module {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(5.8rem, 11vh, 8rem) 0 0;
  background: #080b0a;
  aspect-ratio: auto;
  touch-action: pan-y;
  user-select: none;
}

body.home-film-page .carousel.home-products-module .card-container {
  position: relative;
  width: var(--home-inner);
  flex: 1 1 auto;
  min-height: 0;
  margin: clamp(1.25rem, 3vh, 2.3rem) var(--home-side) clamp(.85rem, 1.7vh, 1.3rem);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

body.home-film-page .carousel.home-products-module .card-container:active {
  cursor: grabbing;
}

body.home-film-page .carousel.home-products-module .card {
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  box-sizing: border-box;
  width: 74%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;
  background: #18201e;
  opacity: 0;
  transform: translate3d(-50%, 0, 0) scale(.85);
  transform-origin: center;
  transition: transform 720ms cubic-bezier(.16, .7, .24, 1), opacity 510ms ease;
  will-change: transform, opacity;
}

body.home-film-page .carousel.home-products-module .card[data-position="center"] {
  z-index: 4;
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}

body.home-film-page .carousel.home-products-module .card[data-position="left"] {
  z-index: 2;
  opacity: .44;
  transform: translate3d(calc(-50% - 86%), 0, 0) scale(.85);
}

body.home-film-page .carousel.home-products-module .card[data-position="right"] {
  z-index: 2;
  opacity: .44;
  transform: translate3d(calc(-50% + 86%), 0, 0) scale(.85);
}

body.home-film-page .carousel.home-products-module .card[data-position="hidden"] {
  z-index: 0;
  opacity: 0;
  transform: translate3d(calc(-50% + 130%), 0, 0) scale(.74);
}

body.home-film-page .carousel.home-products-module .card::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: '';
  background: linear-gradient(180deg, rgba(0, 0, 0, .37) 0, transparent 25%, transparent 47%, rgba(0, 0, 0, .68) 88%, rgba(0, 0, 0, .81) 100%);
}

body.home-film-page .carousel.home-products-module .card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 1s cubic-bezier(.18, .7, .22, 1);
}

body.home-film-page .carousel.home-products-module .card[data-position="center"]:hover .card-img {
  transform: scale(1.025);
}

body.home-film-page .product-card-top {
  position: absolute;
  z-index: 3;
  top: clamp(1rem, 2.7vw, 2.2rem);
  right: clamp(1rem, 2.7vw, 2.2rem);
  left: clamp(1rem, 2.7vw, 2.2rem);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: #fff;
  font-size: .64rem;
  font-weight: 550;
  text-shadow: 0 1px 8px #000;
}

body.home-film-page .carousel.home-products-module .product-title {
  position: absolute;
  z-index: 3;
  bottom: clamp(5.7rem, 14vh, 8.7rem);
  left: clamp(1.2rem, 3.1vw, 3rem);
  right: clamp(1.2rem, 3.1vw, 3rem);
  min-width: 0;
  width: auto;
  margin: 0;
  color: #fff;
  text-align: left;
  font-size: 3.8vh;
  font-weight: normal;
  line-height: 1.12;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .26);
}

body.home-film-page .carousel.home-products-module .buttons {
  position: absolute;
  z-index: 4;
  bottom: clamp(1.2rem, 3vw, 2.8rem);
  left: clamp(1.2rem, 3.1vw, 3rem);
  right: clamp(1.2rem, 3.1vw, 3rem);
  display: flex;
  justify-content: flex-start;
  width: auto;
}

body.home-film-page .carousel.home-products-module .buttons a {
  width: max-content;
  max-width: 100%;
  padding: 0.55rem 2rem;
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 0;
  background: rgba(0, 0, 0, .14);
  color: #fff;
  font-size: .82rem;
  font-weight: normal;
  text-decoration: none;
  backdrop-filter: blur(5px);
  transition: color 180ms, border-color 180ms, background 180ms;
}

body.home-film-page .carousel.home-products-module .buttons a::after {
  content: '↗';
  font-size: 1rem;
}

body.home-film-page .carousel.home-products-module .buttons a:hover {
  color: #050908;
  background: var(--home-green);
  border-color: var(--home-green);
}

body.home-film-page .product-controls {
  flex: 0 0 auto;
  margin-bottom: clamp(3.85rem, 7vh, 5.4rem);
}

body.home-film-page .home-site-footer {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: auto;
  min-height: 3.3rem;
  margin: 0;
  padding: .8rem var(--home-side);
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: #080b0a;
  color: rgba(243, 243, 237, .66);
}

body.home-film-page .home-site-footer .footer-l,
body.home-film-page .home-site-footer .footer-r {
  margin: 0;
}

body.home-film-page .home-site-footer a {
  color: rgba(243, 243, 237, .68);
  font-size: .70rem;
  text-decoration: none;
}

body.home-film-page .home-site-footer a:hover {
  color: var(--home-green);
}

/* Accessible focus states for link-led magazine/gallery interactions. */
body.home-film-page .film-scroll:focus-visible,
body.home-film-page .meaning-link:focus-visible,
body.home-film-page .section-side-link:focus-visible,
body.home-film-page .news-arrow:focus-visible,
body.home-film-page .product-arrow:focus-visible,
body.home-film-page .news-display:focus-visible,
body.home-film-page .carousel.home-products-module .buttons a:focus-visible {
  outline: 2px solid var(--home-green);
  outline-offset: 4px;
}

/* Tablet and narrow desktops */
@media (max-width: 1024px) {
  body.home-film-page .news-display {
    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
  }

  body.home-film-page .news-left {
    padding: clamp(1.1rem, 3vw, 2rem);
  }

  body.home-film-page .news-title {
    /*font-size: clamp(1.5rem, 3.2vw, 2.4rem);*/
  }

  body.home-film-page .news-summary {
    -webkit-line-clamp: 2;
  }

  body.home-film-page .carousel.home-products-module .card {
    width: 83%;
  }

  body.home-film-page .meaning-principles {
    gap: 1.25rem;
  }
}

/* Small screens: editorial magazine becomes an image-led cover with caption
   underneath; no horizontal overflow and no text baked into images. */
@media (max-width: 700px) {
  body.home-film-page {
    --home-side: clamp(1.15rem, 5.2vw, 1.6rem);
  }

  body.home-film-page .olfaction-film {
    align-items: flex-end;
    padding: 5.8rem var(--home-side) clamp(2.25rem, 6vh, 3.5rem);
  }

  body.home-film-page .film-content {
    width: 100%;
  }

  body.home-film-page .film-title {
    /*font-size: clamp(3.15rem, 14.8vw, 5.2rem);*/
  }

  body.home-film-page .film-caption {
    margin-top: 1.6rem;
    min-height: 5rem;
  }

  body.home-film-page .film-timeline {
    gap: .35rem;
  }

  body.home-film-page .film-step-label {
    font-size: .58rem;
  }

  body.home-film-page .olfaction-meaning {
    padding: 5.7rem var(--home-side) 2.3rem;
    justify-content: center;
  }

  /*
  body.home-film-page .meaning-intro h2 {
    font-size: clamp(2.1rem, 7.4vw, 3.8rem);
  }
  */

  body.home-film-page .meaning-description {
    margin-top: 1rem;
    font-size: .92rem;
  }

  body.home-film-page .meaning-principles {
    gap: .65rem;
    margin-top: 2rem;
  }

  body.home-film-page .meaning-principle {
    padding-top: .65rem;
  }

  body.home-film-page .meaning-principle h3 {
    margin: .6rem 0 .4rem;
    font-size: 1rem;
  }

  body.home-film-page .meaning-principle p {
    font-size: .72rem;
    line-height: 1.45;
  }

  body.home-film-page .principle-visual {
    height: clamp(3.5rem, 13vw, 4.8rem);
    margin: .7rem 0;
  }

  body.home-film-page .meaning-link {
    margin-top: 1.7rem;
    font-size: .8rem;
  }

  body.home-film-page .section-kicker {
    font-size: .61rem;
    margin-bottom: .6rem;
  }

  /*
  body.home-film-page .section-display {
    font-size: clamp(2.5rem, 8.5vw, 4rem);
  }
  */

  body.home-film-page .section-side-meta {
    display: none;
  }

  body.home-film-page .section-side-link {
    font-size: .7rem;
  }

  body.home-film-page .news-container {
    padding: 5.9rem 0 1.8rem;
  }

  body.home-film-page .news-wrapper {
    max-height: none;
    margin-block: 1.4rem .75rem;
  }

  body.home-film-page .news-display {
    grid-template-columns: 1fr;
    grid-template-rows: 52% 48%;
  }

  body.home-film-page .news-right {
    grid-row: 1;
    grid-column: 1;
  }

  body.home-film-page .news-left {
    grid-row: 2;
    grid-column: 1;
    padding: 1.2rem 1.3rem;
  }

  body.home-film-page .news-issue {
    font-size: .59rem;
  }

  body.home-film-page .news-date {
    margin: .55rem 0 .5rem;
    font-size: .68rem;
  }

  body.home-film-page .news-title {
    /*font-size: clamp(1.42rem, 5.7vw, 2rem);*/
    line-height: 1.16;
    -webkit-line-clamp: 3;
    margin-bottom: .5rem;
  }

  body.home-film-page .news-summary {
    font-size: .75rem;
    line-height: 1.45;
    -webkit-line-clamp: 2;
  }

  body.home-film-page .news-read {
    margin-top: auto;
    padding-top: .5rem;
    font-size: .7rem;
  }

  body.home-film-page .news-image-mark {
    font-size: .55rem;
  }

  body.home-film-page .news-bottom-caption,
  body.home-film-page .product-controls-hint {
    display: none;
  }

  body.home-film-page .carousel.home-products-module {
    padding-top: 5.9rem;
  }

  body.home-film-page .carousel.home-products-module .card {
    width: 94%;
  }

  body.home-film-page .carousel.home-products-module .card[data-position="left"] {
    transform: translate3d(calc(-50% - 96%), 0, 0) scale(.85);
  }

  body.home-film-page .carousel.home-products-module .card[data-position="right"] {
    transform: translate3d(calc(-50% + 96%), 0, 0) scale(.85);
  }

  body.home-film-page .carousel.home-products-module .product-title {
    bottom: clamp(5rem, 12vh, 6.8rem);
    /*font-size: clamp(2rem, 8vw, 3.5rem);*/
  }

  body.home-film-page .product-card-top {
    font-size: .56rem;
  }

  body.home-film-page .product-controls {
    margin-bottom: 4.6rem;
  }

  body.home-film-page .home-site-footer {
    min-height: 4.25rem;
    padding-block: .65rem;
  }

  body.home-film-page .home-site-footer .footer-l {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    align-items: center;
  }

  body.home-film-page .home-site-footer a {
    font-size: .63rem;
    white-space: nowrap;
  }

  body.home-film-page .product-controls {
    margin-bottom: 5.4rem;
  }
}

@media (max-width: 390px) {
  body.home-film-page .news-display {
    grid-template-rows: 43% 57%;
  }

  body.home-film-page .news-title {
    -webkit-line-clamp: 3;
  }

  body.home-film-page .meaning-principle p {
    font-size: .65rem;
  }
}

@media (max-height: 670px) and (min-width: 701px) {
  body.home-film-page .olfaction-meaning {
    padding-top: 4rem;
    padding-bottom: 1.3rem;
  }

  body.home-film-page .meaning-intro h2 {
    /*font-size: clamp(2rem, 4vw, 3.7rem);*/
  }

  body.home-film-page .meaning-description {
    margin-top: .75rem;
  }

  body.home-film-page .meaning-principles {
    margin-top: 1.2rem;
  }

  body.home-film-page .principle-visual {
    height: 3.8rem;
    margin: .5rem 0;
  }

  body.home-film-page .meaning-link {
    margin-top: 1rem;
  }

  body.home-film-page .news-container,
  body.home-film-page .carousel.home-products-module {
    padding-top: 4.5rem;
  }

  body.home-film-page .news-wrapper {
    margin-block: .8rem;
  }

  body.home-film-page .news-left {
    padding: 1.5rem 2.5rem;
  }

  body.home-film-page .news-title {
    /*font-size: clamp(1.55rem, 3.2vw, 2.9rem);*/
  }

  body.home-film-page .news-read {
    margin-top: 1rem;
  }

  body.home-film-page .carousel.home-products-module .product-title {
    bottom: 5rem;
  }
}

@media (max-height: 600px) and (max-width: 700px) {
  body.home-film-page .olfaction-film {
    padding-top: 3.5rem;
    padding-bottom: .8rem;
  }

  body.home-film-page .film-title {
    /*font-size: clamp(2.6rem, 12vw, 3.6rem);*/
  }

  body.home-film-page .film-caption {
    margin-top: .75rem;
    min-height: 3rem;
  }

  body.home-film-page .olfaction-meaning {
    padding-top: 3.25rem;
    padding-bottom: 1rem;
  }

  body.home-film-page .meaning-intro h2 {
    /*font-size: clamp(1.65rem, 6vw, 2.8rem);*/
  }

  body.home-film-page .meaning-description {
    font-size: .79rem;
    line-height: 1.35;
  }

  body.home-film-page .meaning-principles {
    margin-top: .65rem;
  }

  body.home-film-page .principle-visual {
    height: 2.8rem;
    margin: .4rem 0;
  }

  body.home-film-page .meaning-principle p {
    font-size: .63rem;
  }

  body.home-film-page .meaning-link {
    margin-top: .8rem;
  }

  body.home-film-page .news-container,
  body.home-film-page .carousel.home-products-module {
    padding-top: 3.7rem;
  }

  body.home-film-page .news-wrapper {
    margin-block: .7rem;
  }

  body.home-film-page .news-display {
    grid-template-rows: 41% 59%;
  }

  body.home-film-page .news-summary {
    display: none;
  }

  body.home-film-page .news-title {
    font-size: 1.25rem;
  }

  body.home-film-page .product-controls {
    margin-bottom: 4.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-film-document {
    scroll-behavior: auto;
  }

  body.home-film-page .film-canvas,
  body.home-film-page .film-grain,
  body.home-film-page .film-crt-outro-frame,
  body.home-film-page .film-crt-outro-line,
  body.home-film-page .film-crt-outro-dot,
  body.home-film-page .news-display,
  body.home-film-page .news-image,
  body.home-film-page .carousel.home-products-module .card,
  body.home-film-page .carousel.home-products-module .card-img,
  body.home-film-page .film-step-label,
  body.home-film-page .principle-visual span {
    transition: none !important;
    animation: none !important;
  }
}