/* R11.1: R11 approved horizontal axes + SFS Editorial Compact structural whitespace.
   Visible baselines measured in qa/VISIBLE_PRODUCTION.json and qa/VISIBLE_R11.json; inherited visual/type/reader rules stay intact. */
:root{
 --r11-section-factor:.4;
 --r11-focus-before:0px;--r11-focus-after:208.75px;
 --r11-brand-space:29.75px;--r11-brand-padding:40px;
 --r111-home-material-gap:8.7px;--r11-material-row:48px;
 --r11-project-padding:32px;--r11-year-nav-space:40px;
 --r11-about-space:48px;--r11-poster-space:112px;--r11-poster-padding:32px;
 --r11-project-return-space:56px;--r111-note-gap:21px;
}
/* One outer content axis. Mobile retains its existing comfortable page gutters. */
@media(min-width:768px){
 html body[data-type-b][data-visual-review] .page{width:100%;max-width:none;padding-inline:var(--r11-side);margin-inline:auto}
 html body[data-type-b] .page>header{width:100%;margin-inline:0}
}
@media(min-width:768px) and (max-width:1279px){
 :root{--r11-side:clamp(24px,calc(24px + (100vw - 768px)*.28125),168px);--r11-header-base:56px}
 /* Preserve the existing tablet header's available width and breakpoint behavior. */
 html body[data-type-b] .page>header{width:calc(100% + 2*(var(--r11-side) - var(--r11-header-base)));margin-inline:calc(var(--r11-header-base) - var(--r11-side))}
}
@media(min-width:768px) and (max-width:800px){:root{--r11-header-base:24px}}
@media(min-width:1280px){
 :root{--r11-side:168px}
 /* Logo dimensions and nav metrics are unchanged; reserve enough width when necessary. */
 html body[data-type-b] .page>header{width:max(100%,1000px);margin-inline:calc((100% - max(100%,1000px))/2)}
}
@media(min-width:1500px){
 /* Original standard gutter = 70px + the centered 1680px-container outside space.
    At the tested 1920px frame: (70 + 105)*3 = 525px per side.
    Beyond tested widths keep at least 800px of content instead of letting it disappear. */
 :root{--r11-side:min(calc((70px + max(0px,(100% - 1680px)/2))*3),calc((100% - 800px)/2))}
}
/* HOME: only the whitespace between modules/rows, not card internals or HERO controls. */
html body[data-type-b].home-page #in-focus{margin-top:calc(var(--r11-focus-before)*var(--r11-section-factor));margin-bottom:calc(var(--r11-focus-after)*var(--r11-section-factor))}
html body[data-type-b].home-page #material{padding-bottom:calc(44px*var(--r11-section-factor))}
html body[data-type-b].home-page .home-brand-introduction{margin-block:calc(var(--r11-brand-space)*var(--r11-section-factor));padding-block:calc(var(--r11-brand-padding)*var(--r11-section-factor))}
html body[data-type-b].home-page .home-material-list{row-gap:var(--r111-home-material-gap)}
/* PROJECTS: between year groups and between whole works; inside each work is untouched. */
html body[data-type-b][data-projects-index] .year-navigation{margin-bottom:7px}
html body[data-type-b][data-projects-index] .year-section{margin-bottom:calc(48px*var(--r11-section-factor))}
html body[data-type-b][data-projects-index] .year-section:last-child{margin-bottom:0}
html body[data-type-b][data-projects-index] .production{padding-block:calc(var(--r11-project-padding)*var(--r11-section-factor))}
/* Adjacent block margins collapse: compact both exterior edges, not credit rows. */
html body[data-type-b] .directors-note{margin-top:var(--r111-note-gap)}
html body[data-type-b] .r10-project-detail .detail-credits{margin-bottom:var(--r111-note-gap)}
html body[data-type-b] .project-return{margin-top:calc(var(--r11-project-return-space)*var(--r11-section-factor))}
/* MATERIAL cards: compact inter-row spacing, preserve the header/card/paragraph structures. */
html body[data-type-b] .material-index .material-list{row-gap:calc(var(--r11-material-row)*var(--r11-section-factor))}
/* ABOUT: paired section paddings form the whitespace between the introduction/profile/contact. */
html body[data-type-b][data-about-page] #about{padding-bottom:9px}
html body[data-type-b][data-about-page] #sifan-shao{padding-top:9px;padding-bottom:12.1px}
html body[data-type-b][data-about-page] #about-contact{padding-top:calc(24px*var(--r11-section-factor))}
/* CONTACT: only the gap to the poster section, never form-field or poster-item spacing. */
html body[data-type-b][data-contact-page] .r9-poster-section{margin-top:calc(var(--r11-poster-space)*var(--r11-section-factor));padding-top:calc(var(--r11-poster-padding)*var(--r11-section-factor))}
@media(max-width:1200px){:root{--r11-material-row:40px}}
@media(max-width:1100px){:root{--r11-project-padding:28px;--r11-poster-space:88px}}
@media(max-width:900px){:root{--r111-home-material-gap:5.5px}}
@media(max-width:700px){
 :root{--r11-focus-before:0px;--r11-focus-after:48px;--r11-brand-space:32px;--r11-brand-padding:32px;--r11-about-space:32px;--r11-poster-space:72px;--r11-poster-padding:24px;--r11-project-return-space:48px;--r11-year-nav-space:32px;--r111-note-gap:24px}
}

/* R11.1: remove only the empty header track below the unchanged navigation.
   Search-open and multi-row navigation retain their actual internal row gaps. */
html body[data-type-b] .page>header{padding-bottom:11.2px}
@media(min-width:1251px){
 html.r3-enhanced body[data-type-b] .page>header:not(:has(.r3-search-box.is-open)){row-gap:0;padding-bottom:19.2px}
}
:root{--inner-entry-gap:41.6px}
html body[data-type-b].inner-page .page>main{padding-top:var(--inner-entry-gap)}
html body[data-type-b].inner-page .page>main.material-article:not(.focus-article){padding-top:33.2px}
html body[data-type-b] .material-index .page-title{margin-bottom:16px}
html body[data-type-b][data-projects-index] .year-section>.production:first-of-type{padding-top:1px}
html[lang=en]{--r11-focus-after:221px}
@media(min-width:1101px) and (max-width:1360px){:root{--r11-focus-after:221px}}
html body[data-type-b].home-page #hero{padding-top:10.4px}
/* Old #featured-now rules gave this zero-height compatibility anchor 160px of
   margins and a phantom grid row. Keep its hash target, remove its empty flow. */
html body[data-type-b].home-page #in-focus>.legacy-focus-anchor{position:absolute;width:0;height:0;margin:0;padding:0;overflow:hidden}
html body[data-type-b] .material-index .material-list{margin-top:16px}
html body[data-type-b][data-projects-index] .page-title{margin-bottom:7.5px}
@media(max-width:1100px){:root{--inner-entry-gap:32px;--r11-focus-after:239px}html body[data-type-b].inner-page .page>main.material-article:not(.focus-article){padding-top:23.6px}}
@media(max-width:767px){
 :root{--r11-section-factor:.5;--r11-focus-before:32px;--r11-focus-after:136px;--r111-home-material-gap:16px;--inner-entry-gap:26px}
 html.r3-enhanced body[data-type-b] .page>header:not(.menu-is-open):not(:has(.r3-search-box.is-open)){row-gap:0;padding-bottom:22px}
 html body[data-type-b].inner-page .page>main.material-article:not(.focus-article){padding-top:20px}
 html body[data-type-b][data-projects-index] .year-section>.production:first-of-type{padding-top:14px}
 html body[data-type-b][data-about-page] #about{padding-bottom:16px}
 html body[data-type-b][data-about-page] #sifan-shao{padding-block:16px}
 html body[data-type-b].home-page #hero{padding-top:14px}
 html body[data-type-b] .material-index .material-list{margin-top:24px}
}