/* Keep the original navigation on a solid black bar. */
#wrapper-navbar .navbar{background:#000!important;}
#wrapper-navbar .navbar .navbar-brand,#wrapper-navbar .navbar .nav-link,#wrapper-navbar .navbar .navpostheader{color:#fff!important;}
#wrapper-navbar .navbar .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='1' stroke-linecap='square' d='M8 11h16 M8 16h16 M8 21h16'/%3E%3C/svg%3E");}

/* Match the editorial post-number typography on landing cards. */
.home .card-title{font-family:Arial,Helvetica,sans-serif;letter-spacing:-.095em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.home .card-title .zero,.home .card-title .point{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:100;letter-spacing:-.095em}
.home .card-title .post-incr{font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:-.105em}

.home .card-title{opacity:.55}

/* Preserve the original wordmark and avoid a serif fallback while its hosted font loads. */
#wrapper-navbar .navbar-brand{font-family:HelveticaNeueW01-65Medi,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500}

/* Anchor landing-page numerals to the lower edge of each photograph. */
.home .article-meta{bottom:24px}
.home .card-title{margin-bottom:0;line-height:.85}
@media(max-width:767px){.home .article-meta{bottom:14px}}

/* Recognisable photograph-stack gallery link. */
.post-gallery-link .gallery-icon{display:flex;align-items:center;gap:10px;padding:12px 0;min-height:44px}.post-gallery-link .gallery-icon svg{display:block;flex:none;width:32px;height:28px}.post-gallery-link .gallery-icon span{font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.04em}.post-gallery-link a{display:inline-block;color:inherit}.post-gallery-link a:hover{opacity:.7}.post-gallery-link a:focus-visible{outline:1px solid currentColor;outline-offset:6px}

/* Minimal icon-only control, with an accessible label on the link. */
.post-gallery-link a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;transition:opacity .18s ease}.post-gallery-link .gallery-icon{padding:8px;gap:0}.post-gallery-link .gallery-icon svg{width:30px;height:26px}

.post-gallery-link .gallery-icon svg{width:30px;height:30px}

.post-gallery-link .gallery-icon svg{width:48px;height:48px}

/* Larger thumbnail-strip gallery control. */
.post-gallery-link .gallery-icon svg{width:64px;height:56px}

/* Let the image strip gently expand on interaction. */
.post-gallery-link .gallery-icon svg{overflow:visible}
.gallery-frame-left,.gallery-frame-right,.gallery-frame-main{transition:transform .32s cubic-bezier(.2,.7,.2,1),opacity .32s ease;transform-box:fill-box;transform-origin:center}
.gallery-frame-left,.gallery-frame-right{opacity:.65}
.post-gallery-link a:hover .gallery-frame-left,.post-gallery-link a:focus-visible .gallery-frame-left{transform:translateX(-2px);opacity:1}
.post-gallery-link a:hover .gallery-frame-right,.post-gallery-link a:focus-visible .gallery-frame-right{transform:translateX(2px);opacity:1}
.post-gallery-link a:hover .gallery-frame-main,.post-gallery-link a:focus-visible .gallery-frame-main{transform:translateY(-1px)}
.post-gallery-link a:hover{opacity:1}
@media(prefers-reduced-motion:reduce){.gallery-frame-left,.gallery-frame-right,.gallery-frame-main{transition:none!important;transform:none!important}}

/* A continuous thumbnail strip, moving by exactly one frame each cycle. */
.post-gallery-link .gallery-icon>svg{width:64px;height:56px}
.post-gallery-link .gallery-icon svg>svg{width:28px;height:24px;overflow:hidden}
.post-gallery-link a:hover .gallery-scroll-track,.post-gallery-link a:focus-visible .gallery-scroll-track{animation:gallery-scroll 1.8s cubic-bezier(.45,0,.25,1) infinite}
@keyframes gallery-scroll{0%,15%{transform:translateX(0)}75%,100%{transform:translateX(-18px)}}
@media(prefers-reduced-motion:reduce){.post-gallery-link a .gallery-scroll-track{animation:none!important}}

/* Small, gently scrolling gallery strip. */
.post-gallery-link .gallery-icon>svg{width:44px;height:38px}
.post-gallery-link a .gallery-scroll-track,.post-gallery-link a:hover .gallery-scroll-track,.post-gallery-link a:focus-visible .gallery-scroll-track{animation:gallery-scroll-slow 6s linear infinite}
@keyframes gallery-scroll-slow{from{transform:translateX(0)}to{transform:translateX(-18px)}}
@media(prefers-reduced-motion:reduce){.post-gallery-link a .gallery-scroll-track{animation:none!important}}

/* A soft selection highlight travels through the contact sheet. */
.post-gallery-link .gallery-icon>svg{width:44px;height:44px}
.gallery-contact-frame{fill:currentColor;fill-opacity:0;stroke-opacity:.6;animation:gallery-contact-cycle 12.8s linear infinite}
@keyframes gallery-contact-cycle{0%,6.25%,100%{fill-opacity:0;stroke-opacity:.6}1.25%,5%{fill-opacity:.55;stroke-opacity:1}}
@media(prefers-reduced-motion:reduce){.gallery-contact-frame{animation:none!important;fill-opacity:0;stroke-opacity:1}}

/* Playback is coordinated by the gallery-icon script. */
.gallery-icon.gallery-preview-motion .gallery-contact-frame{animation:none!important;transition:opacity .4s ease,fill-opacity .3s ease;fill-opacity:0;stroke-opacity:.6}
.gallery-icon.gallery-preview-motion .gallery-contact-frame.is-selected{fill-opacity:.55;stroke-opacity:1}
.gallery-icon.gallery-preview-motion.is-expanded .gallery-contact-frame{opacity:0}
.gallery-icon .gallery-expanding-frame{fill:currentColor;fill-opacity:.08;stroke-opacity:1;pointer-events:none}

/* Preserve the header row when the scrolled page title appears. */
#wrapper-navbar .navbar>.container{align-items:center}
#wrapper-navbar .navpostheader{min-width:0;flex:1 1 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wrapper-navbar .navbar-toggler{flex-shrink:0}

/* Keep the phone menu fixed while the wordmark changes to cb:. */
@media(max-width:767px){
 #wrapper-navbar .navbar{min-height:102px}
 #wrapper-navbar .navbar>.container{position:relative;min-height:94px;padding-right:60px}
 #wrapper-navbar .navbar-toggler{position:absolute;right:0;top:23px;margin-top:0}
 #wrapper-navbar .navbar-collapse{margin-right:-60px}
}

/* Align the mobile wordmark, page title and menu on one centre line. */
@media(max-width:767px){
 #wrapper-navbar h1.navbar-brand{padding-top:0;padding-bottom:0;margin-bottom:0}
 #wrapper-navbar a.navbar-brand{padding-top:0;padding-bottom:0}
 #wrapper-navbar .navpostheader{margin-bottom:0}
 #wrapper-navbar .navbar-toggler{top:19px}
}

/* Keep the page title close to the wordmark. */
#wrapper-navbar h1.navbar-brand{margin-right:8px}
#wrapper-navbar h1.navbar-brand a.navbar-brand{margin-right:0}
#wrapper-navbar .navbar>.container>a.navbar-brand{margin-right:8px}

/* One shared header alignment at every screen size. */
#wrapper-navbar .navbar{padding-top:8px;padding-bottom:8px;min-height:102px}
#wrapper-navbar .navbar>.container{position:relative;min-height:86px;align-items:center;padding-right:60px}
#wrapper-navbar h1.navbar-brand{padding:0;margin-bottom:0;line-height:1.2;flex-shrink:0}
#wrapper-navbar a.navbar-brand{padding-top:0;padding-bottom:0;line-height:1.2}
#wrapper-navbar .navpostheader{margin-top:0;margin-bottom:0;line-height:1.2}
#wrapper-navbar .navbar-toggler{position:absolute;right:0;top:15px;margin:0}
#wrapper-navbar .navbar-collapse{margin-right:-60px}

/* Oversized homepage project numbers. */
@media(max-width:767px){.home .card-title{font-size:clamp(110px,25vw,192px)!important}}

/* Match the adjacent page title to the wordmark size. */
#wrapper-navbar .navpostheader{font-size:1.7rem}
@media(min-width:783px){#wrapper-navbar .navpostheader{font-size:2rem}}

/* Match the visible title lettering to cb:, not just its nominal size. */
#wrapper-navbar .navpostheader{font-family:HelveticaNeueW01-65Medi,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;letter-spacing:-.02em;line-height:1.2}

/* Delicate project titles beside the wordmark. */
#wrapper-navbar .navpostheader{font-family:"Helvetica Neue LT W01_35 Thin","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:100}

/* Ultra-light titles beside cb:. */
#wrapper-navbar .navpostheader{font-family:HelveticaNeueW02-UltLt,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:100}

/* Equal visible edge insets for the wordmark and menu strokes. */
#wrapper-navbar .navbar>.container{width:100%;max-width:none;margin-left:0;margin-right:0;padding-left:24px;padding-right:84px}
#wrapper-navbar .navbar-toggler{right:12.75px}
#wrapper-navbar .navbar-collapse{margin-right:0}
@media(max-width:767px){
 #wrapper-navbar .navbar>.container{padding-left:16px;padding-right:76px}
 #wrapper-navbar .navbar-toggler{right:4.75px}
}

#wrapper-navbar .navbar{padding-left:0;padding-right:0}

/* Keep the opening photograph below the fixed header at its original proportions. */
.home #main > .article-card:first-child{margin-top:102px}

/* Open the menu below the unchanged wordmark row. */
#wrapper-navbar .navbar-collapse{position:absolute;top:100%;left:0;right:0;margin:0;background:#000}
#wrapper-navbar .navbar-collapse>div{padding:12px 24px 28px}
#wrapper-navbar #main-menu{margin:0;padding:0}
#wrapper-navbar .social-bar:empty{display:none!important}
@media(max-width:767px){#wrapper-navbar .navbar-collapse>div{padding-left:16px;padding-right:16px}}

/* A quiet, fine-line return-to-top control with a generous touch target. */
#back-to-top{width:44px;height:44px;padding:0;border:0;border-radius:0;background:rgba(0,0,0,.3);box-shadow:none;color:#fff;transition:background-color .2s ease;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#back-to-top .fa{display:none}
#back-to-top:before{content:"";position:absolute;left:17px;top:19px;width:10px;height:10px;border-top:1px solid currentColor;border-left:1px solid currentColor;transform:rotate(45deg)}
#back-to-top:hover,#back-to-top:active{background:rgba(0,0,0,.6);color:#fff;box-shadow:none}
#back-to-top:focus{box-shadow:none}
#back-to-top:focus-visible{outline:1px solid #fff;outline-offset:4px}
@media(prefers-reduced-motion:reduce){#back-to-top{transition:none}}

/* Anchor landing numerals to the image edge at every viewport width. */
.home .article-meta{left:0;right:0;width:auto}
.home .article-meta>.container{position:relative;width:100%;max-width:none;padding-left:24px;padding-right:24px}
.home .article-meta .card-title{float:none;position:absolute;right:24px;bottom:0;margin:0;text-align:right}
@media(max-width:767px){.home .article-meta>.container{padding-left:16px;padding-right:16px}.home .article-meta .card-title{right:16px}}