﻿/* ---------------------------------------------------------------------------
 * LCA! Film Festival 2026 — refinement layer
 *
 * Ported into this repository under LCA2026-SITE-010 (decision D-018) from the
 * Living Experience workspace. Design language adopted by the owner.
 *
 * AUTHORITY
 *   assets/css/tokens.css owns every design value. This file consumes tokens
 *   and defines none. It must never redefine a --color-*, --font-*, --duration-*,
 *   --easing-*, --space-* or --display-* custom property.
 *
 * CASCADE CONTRACT
 *   This layer SUPPLEMENTS production CSS; it never replaces it. It is linked
 *   AFTER the page's own stylesheet so it wins only where specificity is equal
 *   or higher. `.btn` itself stays owned by assets/css/components.css.
 *
 * Namespace is `.r06-`. Every rule below is as authored in the source layer
 * except this comment block.
 * ------------------------------------------------------------------------ */

.r06-about-cover { padding-block:3rem 0; --r06-texture-opacity:.06; }
.r06-about-cover h1{max-width:27ch}
.r06-about-standfirst{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-block:2rem 3rem;max-width:72rem}
.r06-about-standfirst p{max-width:52ch;font-size:1rem;line-height:1.75}
.r06-about-contact-sheet{display:grid;grid-template-columns:1fr 1.25fr .85fr;gap:1rem;align-items:end;margin-bottom:-2rem;position:relative;z-index:1;padding-bottom:0}
.r06-about-contact-sheet .r06-photo{background:var(--color-paper);padding:.7rem;color:var(--color-ink);box-shadow:0 10px 25px #0002}
.r06-about-contact-sheet .r06-photo:nth-child(1){transform:rotate(-3deg);margin-bottom:1rem}.r06-about-contact-sheet .r06-photo:nth-child(2){transform:rotate(2deg)}.r06-about-contact-sheet .r06-photo:nth-child(3){transform:rotate(-2deg);margin-bottom:2rem}
.r06-about-contact-sheet img{aspect-ratio:4/3;object-fit:cover}.r06-about-contact-sheet figcaption{font-size:.65rem}
.r06-about .r06-surface-ink.r06-section { padding-top:6rem; }
.r06-about-manifesto{display:grid;grid-template-columns:1fr 1.2fr;gap:5rem;align-items:center;margin-bottom:4rem}
.r06-about-manifesto h2{color:var(--color-yellow);line-height:1.5}.r06-about-manifesto p{font-size:1.15rem;max-width:46ch;line-height:1.8}
.r06-about-pillars{display:grid;grid-template-columns:1.2fr 1fr .9fr;gap:0}
.r06-about-pillar{padding:2rem;background:var(--color-coral);color:var(--color-ink)}
.r06-about-pillar:nth-child(2){background:var(--color-aqua);margin-top:2rem}.r06-about-pillar:nth-child(3){background:var(--color-yellow);margin-top:4rem}
.r06-about-pillar h3{font-size:var(--display-md);margin-block:1.5rem}.r06-about-pillar p{font-size:.9rem}
.r06-about-chapter--0 .split{gap:4rem}
.r06-about-chapter--1{position:relative;isolation:isolate;background:var(--color-coral)}
.r06-about-chapter--1::before{content:'';position:absolute;inset:0;z-index:-1;background:url('../../images/tile-c-wall.png') right center/150px repeat;opacity:.055;mask-image:linear-gradient(90deg,transparent,#000)}
.r06-about .history-milestones{border-top:3px solid var(--color-teal)}
.r06-about .history-milestones>div{border:0;padding:1.1rem;background:var(--color-paper-warm)}
.r06-about .about-gallery{grid-template-columns:1fr 1fr;align-items:center;gap:1rem}.r06-about .about-gallery figure:nth-child(2){margin-top:3rem}
@media(max-width:850px){.r06-about-manifesto{gap:2rem}.r06-about-pillars{grid-template-columns:1fr}.r06-about-pillar:nth-child(n){margin-top:0;display:grid;grid-template-columns:2rem 1fr;gap:0 1rem}.r06-about-pillar p{grid-column:2}.r06-about-pillar h3{margin:0 0 1rem}.r06-about-standfirst{gap:1.5rem}}
@media(max-width:600px){.r06-about-standfirst{grid-template-columns:1fr;gap:1rem}.r06-about-manifesto{grid-template-columns:1fr}.r06-about-manifesto h2 br{display:none}.r06-about-manifesto h2{line-height:1.5}.r06-about-contact-sheet{gap:.5rem}.r06-about-contact-sheet .r06-photo{padding:.3rem}.r06-about-contact-sheet figcaption{font-size:.5rem}.r06-about-contact-sheet .r06-photo:nth-child(3){margin-bottom:1rem}.r06-about-pillar{padding:1.5rem}}
@media(max-width:600px){.r06-about-manifesto h2 br{display:block}.r06-about-chapter--0 .split{gap:2rem}.r06-about .lead{overflow-wrap:anywhere}}
.r06-about-pillar > *{min-width:0;overflow-wrap:anywhere}
@media(max-width:850px){.r06-about-pillar:nth-child(n){grid-template-columns:2rem minmax(0,1fr)}}
@media(max-width:420px){.r06-about-pillar:nth-child(n){display:block}.r06-about-pillar h3{margin-top:.75rem}}
