/* Landau Lab · film shelf under the homepage hero (521 Claude, 19 Oct 2026; Joe chose "shelf of three films",
   AskJoe 15:16). Muted 8 s previews play when the shelf is on screen (polish.js); the cards open the films. */
.ln-films{background:#0b1214;color:#e9e6df;padding:clamp(3.5rem,6vw,5.5rem) 0 clamp(4rem,7vw,6rem);border-top:1px solid rgba(245,242,236,.08)}
.ln-films-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
.ln-films-k{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#d2ae72}
.ln-films h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,1.3rem + 2vw,2.8rem);line-height:1.1;color:#f5f2ec;margin:.7rem 0 0}
.ln-films h2 em{color:#d2ae72}
.ln-films-all{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:rgba(245,242,236,.78);border-bottom:1px solid rgba(245,242,236,.3);padding-bottom:.15rem}
.ln-films-all:hover{color:#f5f2ec;border-bottom-color:#d2ae72}
.ln-films-row{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2rem)}
.ln-film > a,.ln-film > div{display:block;color:inherit}
.ln-film-media{position:relative;border-radius:6px;overflow:hidden;background:#05090a;aspect-ratio:16/9;
  box-shadow:0 18px 50px rgba(0,0,0,.4);transition:transform .35s ease,box-shadow .35s ease}
.ln-film-media video{display:block;width:100%;height:100%;object-fit:cover}
.ln-film > a:hover .ln-film-media,.ln-film > a:focus-visible .ln-film-media{transform:translateY(-3px);box-shadow:0 26px 60px rgba(0,0,0,.5)}
.ln-film-tag{position:absolute;right:10px;bottom:10px;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:#fff;
  background:rgba(0,0,0,.62);padding:.2rem .45rem;border-radius:3px}
.ln-film-tag.soon{background:rgba(210,174,114,.92);color:#1b1a16}
.ln-film-play{position:absolute;left:12px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(245,242,236,.9);display:grid;place-items:center;
  opacity:.92;transition:transform .25s ease}
.ln-film-play::after{content:"";border-left:11px solid #1b1a16;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.ln-film > a:hover .ln-film-play{transform:scale(1.08)}
.ln-film-k{margin-top:1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#9cc8cb}
.ln-film h3{font-family:var(--serif);font-weight:400;font-size:1.32rem;line-height:1.2;color:#f5f2ec;margin:.45rem 0 .4rem}
.ln-film-d{font-size:.9rem;line-height:1.55;color:rgba(245,242,236,.7)}
/* compact (Annie, 19 Oct 15:32, on her phone: "too big - we're too far from the start here/guided tour") */
.ln-films{padding:clamp(2.2rem,4vw,3.2rem) 0 clamp(2.6rem,4.5vw,3.6rem)}
.ln-films h2{font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem);margin-top:.5rem}
.ln-films-row{margin-top:1.5rem}
.ln-film-k{margin-top:.8rem}
.ln-film h3{font-size:1.15rem;margin:.35rem 0 .3rem}
.ln-film-d{font-size:.86rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* two films (ketamine film off the homepage while Joe revises it, 19 Oct 21:54): two equal columns, no empty slot */
.ln-films-row.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* four films (ketamine film back next to the one-minute films, 26 Oct): one row of four, full width on desktop (below) */
.ln-films-row.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:860px){
  .ln-films-head{display:block}
  .ln-films h2{font-size:1.45rem}
  .ln-films-all{display:inline-block;margin-top:.6rem}
  .ln-films-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.9rem;margin:1.1rem calc(-1 * clamp(1.25rem,5vw,4rem)) 0;
    padding:0 clamp(1.25rem,5vw,4rem) .4rem;scroll-padding-inline:clamp(1.25rem,5vw,4rem);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ln-films-row::-webkit-scrollbar{display:none}
  .ln-film{flex:0 0 74%;scroll-snap-align:start}
  .ln-film-d{display:none}
  .ln-film h3{font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){ .ln-film-media,.ln-film-play{transition:none} }
/* about 20% smaller on desktop (Annie via Joe, 20 Oct 2026): the row and its header take 80% of the content column,
   left-aligned with the page, so "All films & lectures" still sits above the last card */
@media (min-width:861px){ .ln-films-head,.ln-films-row{max-width:80%}
  .ln-film-k{font-size:.6rem;letter-spacing:.13em;margin-top:.7rem} .ln-film h3{font-size:1.02rem;margin:.3rem 0 .25rem}
  .ln-film-d{font-size:.8rem} .ln-film-play{width:30px;height:30px}
  /* four cards across the full column are each about the size three were at 80% */
  .ln-films:has(.n4) .ln-films-head,.ln-films-row.n4{max-width:none} }
/* titles on the picture (Joe, #1 27 Oct 2026: mockup B at 18:01, then back to the spacing above at 21:59 because B's
   edge-to-edge row felt too tight): one slim "Films" line instead of "Start with a film" (Annie: two "Start"s), the
   title on the picture and no other card text */
.ln-films-over .ln-films-head{align-items:baseline}
.ln-films-over h2.ln-films-k{font-family:var(--mono);font-size:.7rem;font-weight:400;letter-spacing:.2em;line-height:1.4;color:#d2ae72;margin:0}
.ln-films-over .ln-film > a{position:relative;transition:transform .35s ease}
.ln-films-over .ln-film > a:hover,.ln-films-over .ln-film > a:focus-visible{transform:translateY(-3px)}
.ln-films-over .ln-film > a:hover .ln-film-media,.ln-films-over .ln-film > a:focus-visible .ln-film-media{transform:none}
.ln-films-over .ln-film-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:65%;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.8))}
.ln-films-over .ln-film-tag{top:8px;bottom:auto;right:9px;z-index:2}
.ln-films-over .ln-film h3{position:absolute;left:12px;right:12px;bottom:9px;margin:0;z-index:2;font-size:.98rem;line-height:1.2;
  text-shadow:0 1px 10px rgba(0,0,0,.7)}
.ln-films-over .ln-film > a:focus-visible{outline:2px solid #d2ae72;outline-offset:3px;border-radius:6px}
@media (max-width:860px){
  .ln-films-over .ln-films-head{display:flex}
  .ln-films-over .ln-films-all{margin-top:0}
}
@media (prefers-reduced-motion:reduce){ .ln-films-over .ln-film > a{transition:none} }