/* Millie Kent. Option overrides.
   The page is the "Big picture" design (formerly option B). styles.css holds the base
   layout and components; this file holds the Big picture treatment, keyed off
   <html data-option="b">, plus the testimonial row. Option A was removed 11 Nov. */

/* =====================================================================
   OPTION B  "Big picture"
   Photo-led. Logotype sits over a full-bleed set still, intro on denim,
   About on cream, Book on denim, footer on charcoal.
   ===================================================================== */
[data-option="b"] .masthead { display: none; }

[data-option="b"] .hero {
  --bg: var(--denim); --fg: var(--cream); --accent: var(--cream); --cta: var(--cream);
  display: block; padding: 0;
}
[data-option="b"] .hero__media { height: min(86svh, 56vw); min-height: 26rem; margin: 0; }
[data-option="b"] .hero__media img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-position: 55% 35%; }
[data-option="b"] .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,12,.72), rgba(20,16,12,0) 55%); }
[data-option="b"] .hero__logo {
  display: block; position: absolute; z-index: 1;
  left: var(--gutter); right: var(--gutter); bottom: var(--gutter); /* same space left, right and below */
  width: auto; --logo: var(--cream);
}
[data-option="b"] .hero { display: flex; flex-direction: column-reverse; align-items: stretch; }
[data-option="b"] .hero__text {
  max-width: none;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap);
  padding: var(--section-y) max(var(--gutter), (100vw - var(--max)) / 2);
}
[data-option="b"] .hero h1 { grid-column: 1 / span 6; grid-row: 1 / span 3; margin: 0; }
/* Desktop: headline larger and wider so it reaches across to the intro copy (Cam's call). Still three lines. */
@media (min-width: 900px) {
  [data-option="b"] .hero h1 { grid-column: 1 / span 7; font-size: clamp(2.125rem, 3.9cqi, 4rem); max-width: 13.2em; line-height: 1.08; letter-spacing: -0.025em; }
}
[data-option="b"] .hero p, [data-option="b"] .cta { grid-column: 8 / -1; }
[data-option="b"] .hero p { margin-top: 0; max-width: none; font-size: var(--fs-body); }
[data-option="b"] .hero p + p { margin-top: 1.3em; }
[data-option="b"] .cta { justify-self: start; }

[data-option="b"] .marquee { --marquee-bg: var(--cream); --marquee-fg: var(--denim); border-bottom: 1.5px solid color-mix(in srgb, var(--denim) 30%, transparent); } /* text denim, 13 Nov (was red) */

[data-option="b"] .about { --bg: var(--cream); --fg: var(--denim); }
/* Headings red in B on cream and white. On denim (intro, Book, footer) they stay cream: red on denim is only 1.9:1 */
[data-option="b"] .about__text h2, [data-option="b"] .about__text h3, [data-option="b"] .testimonials h2 { color: var(--red); }
[data-option="b"] .about__media { grid-column: 8 / -1; order: 2; }
[data-option="b"] .about__text { grid-column: 1 / span 6; }

[data-option="b"] .book { --bg: var(--denim); --fg: var(--cream); --accent: var(--cream); --card: var(--cream); --line: color-mix(in srgb, var(--cream) 35%, transparent); }

[data-t="rail"] .testimonials { padding-right: 0; }
[data-t="rail"] .testimonials__head { padding-right: var(--gutter); }
[data-t="rail"] .rail-nav { display: flex; gap: .5rem; }
[data-t="rail"] .rail-nav button {
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1.5px solid var(--cream); background: transparent; color: var(--cream);
  font: 500 1.125rem/1 var(--font); transition: background .2s, color .2s;
}
[data-t="rail"] .rail-nav button:hover:not(:disabled) { background: var(--cream); color: var(--charcoal); }
[data-t="rail"] .rail-nav button:disabled { opacity: .35; }
[data-t="rail"] .t-grid {
  columns: auto; display: flex; align-items: stretch; gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0;
  padding: 0 var(--gutter) 1.5rem 0; scrollbar-width: none;
}
[data-t="rail"] .t-grid::-webkit-scrollbar { display: none; }
[data-t="rail"] .t-card { flex: 0 0 min(84vw, 32rem); margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
[data-t="rail"] .t-card figcaption { margin-top: auto; padding-top: 1.75rem; }
[data-t="rail"] .t-more { align-self: flex-start; }
[data-t="rail"] .t-card blockquote { flex: none; }
/* Long quotes fold to nine lines in the rail, with a Read more toggle */
[data-t="rail"] .t-card:not(.is-open) blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden; }
[data-t="rail"] .t-card:not(.is-open) blockquote p { display: inline; }
[data-t="rail"] .t-card:not(.is-open) blockquote p + p::before { content: " "; }
[data-t="rail"] .t-more.is-needed {
  display: inline-block; margin-top: 1rem; padding: 0; border: 0; background: none;
  font: 700 var(--fs-label)/1.4 var(--font); color: var(--denim); text-decoration: underline; text-underline-offset: .2em; min-height: 2.75rem;
}

[data-option="b"] .footer { --bg: var(--charcoal); --fg: var(--cream); --rule: color-mix(in srgb, var(--cream) 35%, transparent); box-shadow: none; } /* charcoal, so it separates from the denim Book section above */
[data-option="b"] .footer .logotype { --logo: var(--cream); }
[data-option="b"] .footer__nav a:hover { color: var(--cream); }

@media (max-width: 899px) {
  [data-option="b"] .hero__media { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  [data-option="b"] .hero h1, [data-option="b"] .hero p, [data-option="b"] .cta { grid-column: 1 / -1; grid-row: auto; }
  [data-option="b"] .hero h1 { margin-bottom: 1.2em; }
  [data-option="b"] .about__media, [data-option="b"] .about__text { grid-column: 1 / -1; order: 0; }
}

/* =====================================================================
   CREDITS LIST  with film posters on hover, both options
   ===================================================================== */
.credits { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--col-gap); margin-top: 2em; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.credits li {
  display: flex; justify-content: space-between; gap: 1.5rem; padding: .7em 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  transition: padding .3s var(--ease), color .2s;
}
.credits li span:first-child { font-weight: 700; }
.credits li:hover { padding-left: .75rem; }
.credits li:hover span:first-child { color: var(--red); }
@media (max-width: 499px) { .credits { grid-template-columns: 1fr; } }

/* =====================================================================
   TESTIMONIAL ROW  (both options)
   One row of soft cards that scrolls left to right, thumbnail bottom left,
   name with film and TV titles under it. Cards go dark on hover.
   ===================================================================== */
:root:not([data-t="rail"]) .testimonials {
  --bg: var(--white); --fg: var(--denim);
  --card: var(--cream); --card-fg: var(--charcoal); --card-muted: var(--denim);
  --wall-gap: clamp(.75rem, 1.2vw, 1rem);
}
:root:not([data-t="rail"]) .t-grid {
  display: flex; flex-direction: row; align-items: flex-start; columns: auto; gap: var(--wall-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 1rem 0;
}
:root:not([data-t="rail"]) .t-grid::-webkit-scrollbar { display: none; }
:root:not([data-t="rail"]) .t-col { display: contents; }

:root:not([data-t="rail"]) .t-card[data-reveal] {
  position: relative; margin: 0; border: 0; border-radius: var(--radius-card);
  padding: var(--pad-card);
  background: var(--card); color: var(--card-fg);
  transition: opacity .7s var(--ease), transform .7s var(--ease), background .3s, color .3s, box-shadow .3s;
}
:root:not([data-t="rail"]) .t-card blockquote { font-size: 1rem; line-height: 1.45; letter-spacing: -0.005em; }
:root:not([data-t="rail"]) .t-card figcaption { flex-direction: row; justify-content: flex-start; align-items: center; gap: .875rem; margin-top: 1.5rem; line-height: 1.45; }
:root:not([data-t="rail"]) .t-card figcaption > div { flex: 1; min-width: 0; }
:root:not([data-t="rail"]) .t-card figcaption img, :root:not([data-t="rail"]) .t-card__dot {
  flex: none; width: 3.25rem; height: 3.25rem; border-radius: 12px; /* sits bottom left, beside the name and credits */
  box-shadow: 0 10px 20px -8px rgba(0,0,0,.35);
}
:root:not([data-t="rail"]) .t-card cite { display: block; font-size: .875rem; font-weight: 700; color: inherit; }
:root:not([data-t="rail"]) .t-card small { display: block; margin: .15rem 0 0; font-size: var(--fs-small); font-weight: 400; color: var(--card-muted); transition: color .3s; }

/* Any card takes the dark treatment on hover */
@media (hover: hover) and (pointer: fine) {
  :root:not([data-t="rail"]) .t-card[data-reveal]:hover {
    --card: var(--charcoal); --card-fg: var(--cream); --card-muted: color-mix(in srgb, var(--cream) 72%, transparent);
    box-shadow: 0 24px 48px -20px rgba(0,0,0,.45);
  }
}
@media (prefers-reduced-motion: reduce) { :root:not([data-t="rail"]) .t-card[data-reveal] { transition: none; } }

/* One row that scrolls left to right, with arrows, at every width */
:root:not([data-t="rail"]) .t-card[data-reveal] { flex: 0 0 min(84vw, 24rem); margin: 0; scroll-snap-align: start; }
:root:not([data-t="rail"]) .t-card.is-lead { order: -1; } /* Leo leads */
:root:not([data-t="rail"]) .rail-nav { display: flex; gap: .5rem; }
:root:not([data-t="rail"]) .rail-nav button {
  width: var(--tap); height: var(--tap); border-radius: 50%;
  border: 1.5px solid currentColor; background: transparent; color: var(--denim);
  font: 500 1rem/1 var(--font);
}
:root:not([data-t="rail"]) .rail-nav button:disabled { opacity: .35; }
/* Long quotes fold to ten lines with the Read more toggle, so the row stays one even height */
:root:not([data-t="rail"]) .t-card:not(.is-open) blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; overflow: hidden; }
:root:not([data-t="rail"]) .t-card:not(.is-open) blockquote p { display: inline; }
:root:not([data-t="rail"]) .t-card:not(.is-open) blockquote p + p::before { content: " "; }
:root:not([data-t="rail"]) .t-more.is-needed {
  display: inline-flex; align-items: center; min-height: var(--tap); margin-top: .25rem; padding: 0; border: 0; background: none;
  font: 700 var(--fs-label)/1.4 var(--font); color: inherit; text-decoration: underline; text-underline-offset: .2em;
}
@media (max-width: 699px) { [data-option="b"] .hero__media { aspect-ratio: 4 / 5; } }

/* The rail keeps its flat row: column wrappers drop out, featured card leads */
[data-t="rail"] .t-col { display: contents; }
[data-t="rail"] .t-card.is-lead { order: -1; }

/* Phone held sideways: the photo fills the screen exactly, so her name sits on the fold instead of below it */
@media (max-width: 899px) and (orientation: landscape) { [data-option="b"] .hero__media { aspect-ratio: auto; height: 100svh; } }

/* Tablet portrait: portrait sits beside the text on the right, as on desktop, instead of alone above it */
@media (min-width: 700px) and (max-width: 899px) {
  [data-option="b"] .about .about__text { grid-column: 1 / span 7; padding-right: 1rem; }
  [data-option="b"] .about .about__media { grid-column: 8 / -1; order: 2; max-width: none; position: sticky; top: 4.5rem; align-self: start; }
  [data-option="b"] .about .about__media img { aspect-ratio: 4 / 5; object-position: 50% 50%; }
}

/* ---------- Section padding, evened out: every section has --section-y above and below its content ---------- */
[data-option="b"] .hero { row-gap: 0; }                                   /* tablet and phone had an extra 40px between the photo and the headline */
:root:not([data-t="rail"]) .t-grid { margin-bottom: -1rem; }             /* the row keeps 16px under the cards for their shadows; this takes it back off the section */
[data-option="b"] .footer { padding-bottom: var(--gutter); }             /* closing logotype: same space below as left and right, like the hero */