/* cinema-reader.css — "Lit from within": Cinema rail, essays, courses, blog index and reader.
   Scoped to html.enh[data-enh-view]. Loads after the originals and home-core.css.
   It never sets display on .section or [hidden] panels, so inline-hidden sections stay hidden. */

/* 2. The Living Film / Maturational Narrative: authored caps title, gold hairline, Cormorant lede. */
html.enh[data-enh-view^="cinema-"] #cinema-section .cinema-prose { max-width: 46rem; }
html.enh[data-enh-view^="cinema-"] #cinema-section .cinema-prose > h2 {
  max-width: none;
  margin: 0 0 2.25rem;
  color: var(--text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.75rem, 5.2vw, 4.75rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.02;
  overflow-wrap: break-word;
}
html.enh[data-enh-view^="cinema-"] #cinema-section .cinema-prose > h2::after,
html.enh[data-enh-view^="cinema-"] #cinema-section .cinema-course > h2::after { display: block; width: 3.5rem; height: 1px; margin-top: 1.6rem; background: var(--accent); content: ""; }
html.enh[data-enh-view^="cinema-"] #cinema-section .cinema-prose > .cinema-body-scroll > p:first-of-type {
  max-width: none;
  margin-bottom: 1.75rem;
  color: var(--text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.4rem, 0.95rem + 1vw, 1.8rem);
  font-weight: 400;
  line-height: 1.42;
  text-wrap: pretty;
}
html.enh[data-enh-view^="cinema-"] #cinema-section .cinema-prose > .cinema-body-scroll > p + p { max-width: 62ch; font-size: calc(clamp(1.0625rem, 1rem + 0.15vw, 1.125rem) - 1px); line-height: 1.85; }
@media (max-width: 600px) {
  html.enh[data-enh-view^="cinema-"]:not([data-enh-view="cinema-blog-reader"]) .enh-cinema-nav { margin-bottom: 1.25rem; }
  html.enh[data-enh-view^="cinema-"] #cinema-section .cinema-prose > h2 { font-size: clamp(2rem, 9.6vw, 2.75rem); letter-spacing: 0.04em; }
}

/* 3. Courses. The subtitle keeps the original's !important sage italic at 1.35rem (about 22px). */
html.enh[data-enh-view^="cinema-"] #cinema-section .cinema-course { display: flex; flex-direction: column; min-width: 0; }
html.enh[data-enh-view^="cinema-"] #cinema-section .cinema-course > h2 { color: var(--text); font-size: 3rem; font-weight: 300; letter-spacing: 0.01em; line-height: 1.04; overflow-wrap: break-word; }
html.enh[data-enh-view^="cinema-"] #cinema-section .cinema-course > .cinema-body-scroll > p:not(.cinema-course-subtitle) { font-size: 1rem; line-height: 1.8; }
html.enh[data-enh-view^="cinema-"] #cinema-section .cinema-course > .cinema-body-scroll > p:last-of-type { margin-bottom: 1.75rem; }
html.enh[data-enh-view^="cinema-"] #cinema-section .cinema-course-link { align-self: flex-start; min-height: 48px; margin-top: auto; }
@media (min-width: 1180px) {
  html.enh[data-enh-view^="cinema-"] #cinema-section .cinema-courses:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  html.enh[data-enh-view^="cinema-"] #cinema-section .cinema-course { margin: 0; border-top: 0; padding: 0 var(--enh-cinema-gap, 3rem) 0 0; }
  html.enh[data-enh-view^="cinema-"] #cinema-section .cinema-course + .cinema-course { border-left: 1px solid rgba(216, 182, 124, 0.17); padding: 0 0 0 var(--enh-cinema-gap, 3rem); }
}

/* 4. Blog index: three square editorial tiles per row, with the category above each title. */
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-publication { width: 100%; max-width: 1040px; }
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: start;
  gap: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
  overflow: visible;
  padding: 0 0 2rem;
}
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-entry {
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(216, 182, 124, 0.2);
  background: rgba(14, 18, 15, 0.38);
}
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-entry:last-child { border-bottom: 1px solid rgba(216, 182, 124, 0.2); }
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-entry > a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  isolation: isolate;
}
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-entry > a::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 10, 8, 0.04) 4%, rgba(7, 10, 8, 0.22) 42%, rgba(7, 10, 8, 0.96) 100%);
  content: "";
  pointer-events: none;
}
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-entry-image { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-entry-image img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  filter: grayscale(0.84) sepia(0.52) hue-rotate(48deg) saturate(0.75) brightness(0.82);
  opacity: 0.84;
  transition: filter 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 560ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 560ms ease;
}
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-entry-link:not(:has(.blog-entry-image)) { background: linear-gradient(145deg, rgba(216, 182, 124, 0.08), transparent 58%), #0b100d; }
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-entry-copy {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.3rem clamp(1.1rem, 2vw, 1.5rem) 1.4rem;
}
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-entry-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-areas: "kicker meta" "title title";
  align-items: baseline;
  column-gap: 0.75rem;
  row-gap: 0.6rem;
}
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-entry-kicker {
  grid-area: kicker;
  width: max-content;
  border: 1px solid rgba(216, 182, 124, 0.38);
  padding: 0.24rem 0.42rem;
  color: var(--accent);
  font-family: "Inter", sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.075em;
  line-height: 1.3;
  text-transform: uppercase;
}
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-meta { grid-area: meta; justify-content: flex-end; text-align: right; }
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-entry-title {
  grid-area: title;
  min-width: 0;
  margin: 0;
  font-size: clamp(1.4rem, 1.8vw, 1.75rem);
  line-height: 1.08;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.65);
  transition: color 400ms ease;
}
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-meta {
  display: flex;
  min-height: 1.3em;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.72rem;
}
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-meta:empty { display: none; }
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-meta .blog-status { color: var(--italic-accent); }
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-entry p {
  max-width: none;
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
}
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-entry > a:is(:hover, :focus-visible) img {
  filter: none;
  opacity: 1;
  box-shadow: 0 0 28px rgba(216, 182, 124, 0.08);
}
html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-entry > a:focus-visible .blog-entry-title { color: var(--accent); }

/* 5. Blog reader: no rail, full stage, sticky original poster, Cormorant display title. */
html.enh[data-enh-view="cinema-blog-reader"] .section-stage { width: min(100%, 1180px); margin-inline: auto; }
html.enh[data-enh-view="cinema-blog-reader"] #cinema-section { width: 100%; }
html.enh[data-enh-view="cinema-blog-reader"] #cinema-section .blog-reading-column h1 { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.75rem, 4.6vw, 4.5rem); font-weight: 300; line-height: 1.04; overflow-wrap: break-word; }
html.enh[data-enh-view="cinema-blog-reader"] #cinema-section .blog-prose :is(h1, h2, h3, h4, h5, h6) { font-weight: 300; letter-spacing: 0.08em; }
html.enh #cinema-section .blog-return { display: none; }
@media (min-width: 861px) {
  html.enh[data-enh-view="cinema-blog-reader"] #cinema-section .blog-reading-layout { margin-inline: auto; }
  html.enh[data-enh-view="cinema-blog-reader"] #cinema-section .blog-reading-layout:has(.blog-poster) { grid-template-columns: 180px minmax(0, 1fr); column-gap: 3.5rem; max-width: 66rem; }
  html.enh[data-enh-view="cinema-blog-reader"] #cinema-section .blog-poster { top: 2.75rem; }
  html.enh[data-enh-view="cinema-blog-reader"] #cinema-section .blog-reading-column { min-width: 0; max-width: 66rem; }
  html.enh[data-enh-view="cinema-blog-reader"] #cinema-section .blog-prose :is(p, li) { font-size: calc(1.5rem - 1px); }
  html.enh[data-enh-view="cinema-blog-reader"] #cinema-section .blog-article-nav a { min-height: 48px; }
}
@media (max-width: 860px) {
  html.enh[data-enh-view="cinema-blog-reader"] #cinema-section .blog-prose :is(p, li) { font-size: calc(1.375rem - 1px); }
  html.enh[data-enh-view="cinema-blog-reader"] #cinema-section .blog-reading-column h1 { font-size: clamp(1.9375rem, 8.5vw, 2.625rem); line-height: 1.1; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  html.enh .enh-cinema-nav button,
  html.enh .enh-cinema-nav button::before,
  html.enh[data-enh-view^="cinema-"] #cinema-section .blog-entry .blog-entry-title { transition: none !important; }
  html.enh[data-enh-view="cinema-blog"] #cinema-section .blog-entry img {
    transition: filter 280ms ease-out, opacity 280ms ease-out, box-shadow 280ms ease-out !important;
  }
}
/* The four Cinema destinations share one title treatment. */
html.enh[data-enh-view^="cinema-"] #cinema-section :is(.cinema-prose > h2, .cinema-view-heading, .cinema-course > h2) {
  color: var(--text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 48px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.04;
}
html.enh #cinema-section .cinema-body-scroll > p {
  margin: 0 0 1.1rem;
  color: var(--muted);
}
html.enh #cinema-section .cinema-course > h2 { padding-bottom: 1.5rem; }
html.enh #cinema-section .cinema-course-subtitle { margin-top: 0 !important; }

/* Titles occupy a fixed row; only the material beneath them scrolls. */
@media (min-width: 861px) {
  html.enh:is([data-enh-view="cinema-living-film"], [data-enh-view="cinema-maturational-narrative"], [data-enh-view="cinema-courses"]) .rhs-content {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }
  html.enh:is([data-enh-view="cinema-living-film"], [data-enh-view="cinema-maturational-narrative"], [data-enh-view="cinema-courses"]) :is(.section-stage, #cinema-section, .cinema-panels) {
    height: 100%;
    min-height: 0;
  }
  html.enh #cinema-section .cinema-prose:not([hidden]),
  html.enh #cinema-section .cinema-course {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  html.enh #cinema-section .cinema-body-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: #444842 #0b100d;
    padding-right: 1rem;
  }
  html.enh #cinema-section .cinema-courses:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    max-width: none;
  }
  html.enh #cinema-section .cinema-course { margin: 0; border-top: 0; padding: 0 3rem 0 0; }
  html.enh #cinema-section .cinema-course + .cinema-course { border-left: 1px solid rgba(216, 182, 124, 0.17); padding: 0 0 0 3rem; }
  html.enh #cinema-section .cinema-course > .cinema-body-scroll { display: flex; flex-direction: column; }
  html.enh #cinema-section .cinema-course > .cinema-body-scroll > * { flex-shrink: 0; }
}
/* OPUS_CINEMA_COMPLETE */