.marcellus-page { background:var(--paper); }
.marcellus-intro { padding:7vh 8vw 8rem; }
.marcellus-intro-grid { display:grid; grid-template-columns:1fr .92fr; gap:5vw; align-items:center; max-width:1420px; margin:3rem auto 0; }
.video-frame { margin:0; background:#171915; }
.video-frame video { display:block; width:100%; height:100%; object-fit:cover; }
.video-frame-wide video { aspect-ratio:16/9; }
.hero-kicker { margin:1.4rem 0 .65rem; color:var(--sage-dark); font:500 .67rem "DM Mono",monospace; letter-spacing:.11em; text-transform:uppercase; }
.intro-copy h1 { max-width:650px; margin:0; font:500 clamp(2.15rem,3.65vw,4.6rem)/1.04 "Playfair Display",serif; letter-spacing:-.055em; }
.hero-summary { max-width:590px; margin:1.4rem 0 0; color:#5e625b; font:400 clamp(.88rem,1.05vw,1.02rem)/1.65 "DM Sans",sans-serif; }
.thesis-link { margin-left:.7rem; padding-bottom:.12rem; border-bottom:1px solid currentColor; }
.intro-tags { margin-top:1.65rem; }
.video-caption { width:100%; margin:0; padding-top:1.35rem; color:#5e625b; background:var(--paper); font:400 .82rem/1.62 "DM Sans",sans-serif; }
.marcellus-documentation { max-width:1420px; margin:0 auto; padding:0 8vw 9rem; }
.project-narrative { max-width:1120px; margin:0 auto 8rem; border-bottom:1px solid var(--line); }
.narrative-block { display:grid; grid-template-columns:minmax(170px,.42fr) minmax(0,1fr); column-gap:clamp(2.5rem,7vw,7rem); row-gap:2rem; padding:3.4rem 0 4rem; border-top:1px solid var(--line); }
.narrative-heading { display:flex; align-items:baseline; gap:1.05rem; padding-left:1rem; border-left:2px solid var(--sage); }
.narrative-heading span { color:var(--sage-dark); font:500 .78rem "DM Mono",monospace; letter-spacing:.08em; }
.narrative-heading h2 { margin:0; color:var(--ink); font:600 clamp(.9rem,1.05vw,1.05rem)/1.4 "DM Mono",monospace; letter-spacing:.07em; text-transform:uppercase; }
.overview-sidebar { align-self:start; }
.overview-meta { margin:2.15rem 0 0; padding-left:1rem; }
.overview-meta-group + .overview-meta-group { margin-top:2rem; }
.overview-meta dt { color:var(--sage-dark); font:500 .72rem/1.4 "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.overview-meta dd { margin:.55rem 0 0; color:#5e625b; font:400 .92rem/1.62 "DM Sans",sans-serif; }
.overview-meta dd span { display:block; }
.narrative-copy { max-width:760px; }
.narrative-copy p { margin:0 0 1.45rem; color:#4d514a; font:400 clamp(.94rem,1.05vw,1.06rem)/1.72 "DM Sans",sans-serif; }
.narrative-copy p:last-child { margin-bottom:0; }
.narrative-copy .narrative-question { margin-bottom:2rem; color:var(--ink); font:500 clamp(1.65rem,2.55vw,2.65rem)/1.2 "Playfair Display",serif; letter-spacing:-.025em; }
.narrative-copy .narrative-lead { margin-bottom:1.8rem; color:var(--ink); font:500 clamp(1.2rem,1.65vw,1.65rem)/1.35 "Playfair Display",serif; letter-spacing:-.015em; }
.spectatorship-block .narrative-question { margin-bottom:1.65rem; font-size:clamp(1.35rem,1.9vw,1.9rem); line-height:1.28; }
.chapter-heading { grid-column:1/-1; width:100%; margin-bottom:.5rem; padding-block:.45rem; }
.chapter-heading h2 { font-size:clamp(1.05rem,1.35vw,1.3rem); }
.narrative-subheading { display:flex; align-self:start; align-items:baseline; gap:.75rem; padding:.35rem 0 .35rem 1rem; border-left:1px solid var(--line); }
.narrative-subheading span { color:var(--muted); font:400 .62rem "DM Mono",monospace; letter-spacing:.07em; }
.narrative-subheading h3 { margin:0; color:var(--sage-dark); font:500 .72rem/1.45 "DM Mono",monospace; letter-spacing:.09em; text-transform:uppercase; }
.spectatorship-quote { grid-column:1/-1; display:grid; grid-template-columns:minmax(170px,.42fr) minmax(0,1fr); column-gap:clamp(2.5rem,7vw,7rem); align-items:start; margin:2.3rem 0 3.2rem; padding:0; border:0; text-align:left; }
.spectatorship-quote .quote-mark { justify-self:end; color:var(--sage); font:500 clamp(4.2rem,6vw,6.5rem)/.72 "Playfair Display",serif; }
.spectatorship-quote p { max-width:760px; margin:0; color:var(--ink); font:500 clamp(1.7rem,3vw,3rem)/1.2 "Playfair Display",serif; letter-spacing:-.025em; }
.documentation-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3rem; margin-bottom:7rem; }
.narrative-media { grid-column:1/-1; width:90%; justify-self:center; margin:.5rem 0 0; padding-top:.8rem; }
.documentation-pair figure,.documentation-trio figure { margin:0; }
.documentation-pair img,.documentation-trio img { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:var(--paper-deep); }
.research-media figure:first-child img { aspect-ratio:1117/376; object-fit:contain; }
.experience-media { grid-template-columns:repeat(3,minmax(0,1fr)); }
.experience-media,.spectatorship-role-media,.spectatorship-view-media { translate:1cm 0; }
.urban-landscape-media { width:min(100%,1015px); display:grid; grid-template-columns:minmax(145px,.69fr) repeat(2,minmax(0,1fr)) minmax(145px,.69fr); grid-template-rows:repeat(2,auto); gap:1rem; align-items:center; justify-self:start; translate:4cm 0; margin:.5rem 0 3.2rem; }
.urban-landscape-media figure { display:contents; margin:0; }
.urban-landscape-media img { width:100%; display:block; aspect-ratio:16/10; object-fit:cover; background:var(--paper-deep); }
.urban-landscape-media figcaption { min-height:5.5rem; display:flex; align-items:center; margin:0; padding:.8rem; border:1px dashed var(--line); color:var(--muted); font:400 .68rem/1.5 "DM Mono",monospace; }
.urban-landscape-media figure:nth-child(1) img { grid-area:1/2; }
.urban-landscape-media figure:nth-child(1) figcaption { grid-area:1/1; }
.urban-landscape-media figure:nth-child(2) img { grid-area:1/3; }
.urban-landscape-media figure:nth-child(2) figcaption { grid-area:1/4; }
.urban-landscape-media figure:nth-child(3) img { grid-area:2/2; }
.urban-landscape-media figure:nth-child(3) figcaption { grid-area:2/1; }
.urban-landscape-media figure:nth-child(4) img { grid-area:2/3; }
.urban-landscape-media figure:nth-child(4) figcaption { grid-area:2/4; }
.spectatorship-role-media { margin-bottom:1.5rem; }
.spectatorship-status-copy { grid-column:2; margin:.5rem 0 1rem; }
.spectatorship-view-media { margin-bottom:1.5rem; }
.spectatorship-video { width:min(100%,710px); justify-self:end; margin-top:.6rem; }
.spectatorship-video video { height:auto; aspect-ratio:16/9; object-fit:contain; }
.marcellus-documentation figcaption { margin-top:.85rem; color:#5e625b; font:400 .82rem/1.62 "DM Sans",sans-serif; }
.documentation-section { margin:0 0 8rem; }
.documentation-section > h2 { margin:1rem 0 2.5rem; font:500 clamp(2.15rem,3.5vw,3.9rem)/1 "Playfair Display",serif; letter-spacing:-.05em; }
.documentation-trio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem; }
.documentation-trio figcaption { text-align:center; }
.freedmen-frame { width:min(100%,710px); max-width:710px; }
.freedmen-frame video { object-fit:contain; background:#171915; }

@media (min-width:701px) and (max-width:1100px) {
  .urban-landscape-media { width:calc(100% - 2cm); translate:2cm 0; }
}

@media (max-width:700px) {
  .marcellus-intro { padding:5vh 6vw 5rem; }
  .marcellus-intro-grid { grid-template-columns:1fr; gap:2.4rem; margin-top:2.25rem; }
  .intro-copy h1 { font-size:clamp(2.2rem,10.2vw,3.25rem); }
  .marcellus-documentation { padding:0 6vw 6rem; }
  .project-narrative { margin-bottom:5rem; }
  .narrative-block { grid-template-columns:1fr; gap:1.8rem; padding:2.6rem 0 3rem; }
  .overview-block { row-gap:2.8rem; }
  .overview-meta { margin-top:2rem; }
  .narrative-copy p { font-size:.96rem; }
  .narrative-copy .narrative-question { font-size:clamp(1.55rem,7.4vw,2.15rem); }
  .narrative-subheading { padding-top:1rem; }
  .spectatorship-quote { grid-template-columns:1fr; gap:.35rem; margin:1rem 0 1.8rem; }
  .spectatorship-quote .quote-mark { justify-self:start; font-size:4rem; }
  .spectatorship-quote p { font-size:clamp(1.55rem,7.2vw,2.2rem); }
  .documentation-pair,.documentation-trio { grid-template-columns:1fr; gap:2.6rem; }
  .documentation-pair,.documentation-section { margin-bottom:5rem; }
  .narrative-media { width:100%; margin:0; padding-top:.4rem; }
  .experience-media { grid-template-columns:1fr; }
  .experience-media,.spectatorship-role-media,.spectatorship-view-media { translate:none; }
  .urban-landscape-media { width:100%; grid-template-columns:1fr; grid-template-rows:auto; gap:1.8rem; translate:none; margin-bottom:2.8rem; }
  .urban-landscape-media figure { display:grid; gap:.7rem; }
  .urban-landscape-media figure img,.urban-landscape-media figure figcaption { grid-area:auto !important; }
  .urban-landscape-media figcaption { min-height:0; }
  .spectatorship-status-copy { grid-column:1; }
  .spectatorship-video { width:100%; justify-self:stretch; }
  .documentation-section > h2 { margin-bottom:2rem; }
  .documentation-trio figcaption { text-align:left; }
}