/* Tolani Family Office - Director Polish Pass
   Purpose: final alignment, contrast, image integrity, and editorial rhythm. */

:root{
  --director-ink:#20282a;
  --director-oxblood:#5e2b26;
  --director-paper:#f5efe4;
  --director-rule:rgba(94,43,38,.20);
}

/* 1. Global editorial rhythm */
html{scroll-padding-top:92px}
body{overflow-x:hidden}
p{orphans:3;widows:3}
.shell{box-sizing:border-box}
.eyebrow{line-height:1.25}

/* Prevent the site from feeling uniformly over-spaced. */
.refined-intro,.refined-museum,.flow-origin-section,.flow-overlay-section,
.flow-ppli-section,.flow-suitability,.flow-research-cta,.institution-thesis,
.leadership-section,.public-private-work,.institution-lineage,
.refined-contact-section,.stewardship-close{padding-top:72px;padding-bottom:72px}

/* Align the main editorial two-column systems to a consistent top edge. */
.refined-intro-grid,.heritage-split-grid,.flow-origin-grid,.flow-overlay-grid,
.flow-ppli-grid,.public-private-grid,.institution-thesis-grid,
.video-feature-grid,.correspondence-grid{align-items:start}

/* 2. Contrast audit - all type placed over imagery gets a deliberate scrim. */
.steward-hero:before{
  background:
    linear-gradient(90deg,rgba(7,19,29,.72) 0%,rgba(7,19,29,.36) 54%,rgba(7,19,29,.08) 100%),
    linear-gradient(0deg,rgba(7,19,29,.95) 0%,rgba(7,19,29,.62) 40%,rgba(7,19,29,.12) 78%);
}
.steward-hero-copy{max-width:980px;text-shadow:0 2px 20px rgba(0,0,0,.34)}
.steward-hero p{color:#eee4d6;max-width:680px}

.majlis-band:before{
  background:
    linear-gradient(90deg,rgba(7,19,29,.72),rgba(7,19,29,.10) 72%),
    linear-gradient(0deg,rgba(7,19,29,.94),rgba(7,19,29,.18) 70%);
}
.majlis-band .shell{text-shadow:0 2px 18px rgba(0,0,0,.35)}
.majlis-band p{color:#f0e5d7}

.contact-hero.refined-contact:before{
  background:linear-gradient(90deg,var(--midnight) 0%,rgba(7,19,29,.97) 26%,rgba(7,19,29,.58) 68%,rgba(7,19,29,.28) 100%)!important;
}
.contact-hero h1,.contact-hero p{text-shadow:0 2px 18px rgba(0,0,0,.28)}

.gallery-editorial figure:after,.refined-gallery-grid figure:after{
  content:"";position:absolute;inset:auto 0 0;height:44%;
  background:linear-gradient(transparent,rgba(7,19,29,.88));pointer-events:none
}
.refined-gallery-grid figcaption{z-index:2;text-shadow:0 1px 10px rgba(0,0,0,.4)}

/* 3. Family-history source plates - preserve the whole composition. */
.family-opening .hero-plate img{
  width:100%;height:auto!important;max-height:none!important;min-height:0!important;
  object-fit:contain!important;object-position:center!important;background:#eadcc7
}
.family-chronicle .chronicle-image img,
.family-chronicle .chronicle-image.full img,
.family-chronicle .chronicle-media-pair img{
  width:100%;height:auto!important;max-height:none!important;
  aspect-ratio:16/9;object-fit:contain!important;object-position:center!important;
  background:#eadcc7;filter:sepia(.09) saturate(.86);box-shadow:0 18px 44px rgba(48,31,19,.08)
}
.family-chronicle .chronicle-image.portrait-era img{
  aspect-ratio:4/3;object-fit:cover!important;object-position:center 18%!important;background:transparent
}
.family-chronicle .chronicle-media-pair{align-items:start}
.family-chronicle .chronicle-media-pair figure:nth-child(2){transform:translateY(28px)}

/* Give archival plates more room than prose; their embedded historical detail matters. */
@media (min-width:1101px){
  .chronicle-era{grid-template-columns:92px minmax(270px,.58fr) minmax(580px,1.42fr)!important;gap:30px 48px!important}
  .chronicle-copy{max-width:500px}
  .chronicle-date{padding-top:4px}
}

/* 4. Family chronology: clearer alignment and less visual noise. */
.chronology-nav nav{gap:0}
.chronology-nav a{font-size:.69rem;letter-spacing:.07em;padding:15px 10px;white-space:nowrap}
.chronicle-era{padding-top:28px!important}
.chronicle-date{line-height:1.1}
.chronicle-copy h2{max-width:12ch}
.chronicle-copy p{max-width:54ch;line-height:1.57}
.chronicle-copy blockquote{max-width:48ch}
.chronicle-image figcaption,.chronicle-media-pair figcaption{line-height:1.35}
.partition-era{padding-top:48px!important}

/* 5. Embedded films - visible, standard 16:9 embeds with a photographic fallback. */
.film-embed{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:#0b1620;
  box-shadow:0 20px 52px rgba(47,36,24,.14)
}
.film-embed .film-poster{position:absolute;inset:0;background:var(--film-poster) center/cover no-repeat;z-index:0}
.film-embed .film-poster:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,19,29,.62),rgba(7,19,29,.08) 60%)}
.film-poster-label{position:absolute;left:22px;bottom:18px;color:#f2e8da;font-family:var(--serif);font-size:1.2rem;z-index:2}
.film-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;background:transparent}
.video-feature-copy{padding-top:4px}
.video-feature-copy h2{max-width:9ch}
.video-feature-copy p{max-width:40ch;line-height:1.55}
.video-feature-copy small{font-size:.68rem;letter-spacing:.02em}

/* 6. Leadership / institution page - one clean baseline rather than floating profiles. */
.leadership-section .section-heading{margin-bottom:28px}
.leadership-grid{gap:0}
.leadership-profile{align-items:start;gap:30px;padding-top:34px;padding-bottom:34px}
.leadership-profile figure{align-self:start}
.leadership-profile img{height:auto!important;aspect-ratio:4/5;object-fit:cover}
.leadership-profile.ram img{object-position:center 18%}
.leadership-profile:not(.ram) img{object-position:center 20%}
.leadership-profile p{line-height:1.55}

/* 7. Clearer text sizing in sections that were visually underpowered. */
.refined-intro-grid .intro-prose p,
.heritage-split-copy p,.institution-thesis p,.public-private-grid p,
.video-feature-copy p,.correspondence-copy p{font-size:1.12rem;line-height:1.58}

/* 8. Home alignment / hierarchy */
.home-manifesto .manifesto-grid,.home-archive .archive-head,.timeline-intro{align-items:start}
.home-archive .archive-head p{max-width:56ch}
.home-history-strip .history-card h3{line-height:1.02}

/* 9. Source diagrams and editorial plates should never be cropped. */
.ppli-source-figure img,.flow-paper img,.map-plate img,.feature-paper img{
  object-fit:contain!important;object-position:center!important
}

/* 10. Footer: calmer, more legible. */
.site-footer .footer-brand p{max-width:32ch;line-height:1.5}
.site-footer a,.site-footer p{line-height:1.55}

@media (max-width:1100px){
  .chronicle-era{padding-top:48px!important}
  .family-chronicle .chronicle-media-pair figure:nth-child(2){transform:none}
  .video-feature-grid{align-items:start}
}

@media (max-width:720px){
  .refined-intro,.refined-museum,.flow-origin-section,.flow-overlay-section,
  .flow-ppli-section,.flow-suitability,.flow-research-cta,.institution-thesis,
  .leadership-section,.public-private-work,.institution-lineage,
  .refined-contact-section,.stewardship-close{padding-top:54px;padding-bottom:54px}

  .steward-hero:before{background:linear-gradient(0deg,rgba(7,19,29,.96),rgba(7,19,29,.50) 66%,rgba(7,19,29,.20))}
  .steward-hero-copy{padding-bottom:48px}
  .steward-hero p{font-size:1.08rem}

  .family-opening .hero-plate img{aspect-ratio:16/9}
  .family-chronicle .chronicle-image img,.family-chronicle .chronicle-image.full img,
  .family-chronicle .chronicle-media-pair img{aspect-ratio:16/9;height:auto!important}
  .family-chronicle .chronicle-image.portrait-era img{aspect-ratio:4/3}
  .chronicle-era{padding-top:52px!important;padding-bottom:54px!important}
  .chronicle-copy h2{font-size:2.55rem!important;max-width:11ch}
  .chronicle-copy p{font-size:1.02rem!important}
  .chronology-nav a{font-size:.63rem;padding:12px 8px}

  .video-feature-grid{gap:24px}
  .video-feature-copy h2{font-size:2.8rem!important;max-width:10ch}
  .film-poster-label{font-size:1rem;left:16px;bottom:14px}

  .leadership-profile figure{max-width:280px}
  .leadership-profile img{aspect-ratio:4/5}
}
/* Embedded film poster remains as a branded cover; the iframe is already present beneath it. */
.film-embed .film-poster{z-index:2;cursor:pointer;transition:opacity .35s ease,visibility .35s ease}
.film-embed .film-poster:before{content:'▶';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border:1px solid rgba(244,234,220,.82);border-radius:50%;display:grid;place-items:center;color:#f4eadc;background:rgba(7,19,29,.38);backdrop-filter:blur(3px);font-size:1.1rem;padding-left:3px;z-index:3}
.film-embed .film-poster.is-dismissed{opacity:0;visibility:hidden;pointer-events:none}
.film-embed iframe{z-index:1}

/* FINAL CHRONICLE GRID CORRECTION
   The prior two-column placement rules were still winning inside a three-column grid.
   Explicit placement below restores the intended year / narrative / archive composition. */
@media (min-width:1101px){
  .chronology-nav{display:block!important;height:auto!important;padding:44px 0 28px!important}
  .chronology-nav>.eyebrow{display:block!important;margin:0 0 22px!important}
  .chronology-nav .chronology-rail{display:block!important;position:absolute!important;left:0!important;top:73px!important;bottom:28px!important;height:auto!important;width:1px!important;margin:0!important;background:rgba(94,43,38,.20)!important}
  .chronology-nav nav{display:block!important;height:auto!important;min-height:0!important;border-left:0!important;padding:0 0 0 22px!important}
  .chronology-nav a{display:grid!important;grid-template-columns:56px 1fr!important;gap:8px!important;padding:8px 0!important;position:relative!important;white-space:normal!important}
  .chronology-nav a:before{display:block!important;left:-27px!important;top:15px!important}
  .chronology-nav a b{font-size:1.05rem!important}
  .chronology-nav a small{font-size:.56rem!important;align-self:center!important}

  .chronicle-era{grid-template-columns:92px minmax(280px,.62fr) minmax(560px,1.38fr)!important;gap:30px 48px!important}
  .chronicle-date{grid-column:1!important;grid-row:1!important;padding-top:6px!important}
  .chronicle-copy{grid-column:2!important;grid-row:1 / span 2!important;max-width:500px!important}
  .chronicle-image,.chronicle-media-pair{grid-column:3!important;grid-row:1 / span 2!important;align-self:start!important;margin:0!important}
  .chronicle-image.full{grid-column:3!important;grid-row:1 / span 2!important;margin:0!important}
  .partition-era .chronicle-date{grid-column:1!important}
  .partition-era .chronicle-copy{grid-column:2!important}
  .partition-era .chronicle-image{grid-column:3!important}
}