/* LiteCMS v2.55: screen-width project gallery first, restrained title on a fade.
   Works on standalone work.php only. No homepage, admin, or popup selectors. */
:root{--v255-page:#f6f6f3;--v255-ink:#293036;--v255-muted:#777d80;--v255-rule:#d9dcd9}
body:has(.screen-gallery-project){background:var(--v255-page)}
/* Lift the site-wide max-width and 130px top offset for this page alone. */
body:has(.screen-gallery-project) .main-content{
 width:100%!important;max-width:none!important;margin:0!important;padding:0!important;
 display:block!important;overflow:visible!important;
}
.screen-gallery-project.focused-project.standalone-project-shell{
 display:block!important;position:relative;width:100%!important;max-width:none!important;
 margin:0!important;padding:0!important;color:var(--v255-ink);
}
.screen-gallery-project .standalone-project-content{
 width:100%;padding:0!important;margin:0!important;border:0!important;
 background:transparent!important;border-radius:0!important;box-shadow:none!important;
}
/* All imagery is inside the 100%-width screen-height stage. */
.screen-gallery-project .screen-gallery-hero{
 position:relative;width:100%;height:100vh;height:100svh;
 min-height:470px;isolation:isolate;overflow:hidden;background:#e3e3df;
}
.screen-gallery-project .screen-gallery-visual,
.screen-gallery-project .focused-project-gallery,
.screen-gallery-project .project-media-gallery{
 width:100%!important;height:100%!important;min-width:0!important;
 max-width:none!important;margin:0!important;padding:0!important;border:0!important;
 border-radius:0!important;box-shadow:none!important;background:transparent!important;
}
.screen-gallery-project .screen-gallery-visual{position:absolute;inset:0;z-index:0}
.screen-gallery-project .project-media-gallery{position:relative;overflow:hidden}
.screen-gallery-project .media-gallery-heading{display:none!important}
.screen-gallery-project .media-stage,
.screen-gallery-project .media-stage-item{
 width:100%;height:100%!important;min-height:0!important;
 margin:0!important;padding:0!important;aspect-ratio:auto!important;
 background:transparent!important;position:relative;
}
.screen-gallery-project .media-frame{
 display:block!important;width:100%!important;height:100%!important;min-height:0!important;
 aspect-ratio:auto!important;margin:0!important;padding:0!important;
 border:0!important;border-radius:0!important;box-shadow:none!important;
 background:#e6e6e2!important;overflow:hidden!important;
}
.screen-gallery-project .media-frame img,
.screen-gallery-project .media-frame iframe,
.screen-gallery-project .media-frame video{
 width:100%!important;height:100%!important;display:block!important;
 border:0!important;margin:0!important;max-width:none!important;
}
/* Full-bleed first impression. Image lightbox still shows the complete artwork. */
.screen-gallery-project .media-frame-image img{
 object-fit:cover!important;background:transparent!important;
 transform:none!important;transition:none!important;
}
.screen-gallery-project .media-frame-image:hover img{transform:none!important}
.screen-gallery-project .media-frame-video,
.screen-gallery-project .media-frame-html{background:#171b20!important}
.screen-gallery-project .media-frame-video iframe,
.screen-gallery-project .media-frame-html iframe{object-fit:contain!important}
/* Existing Before/After divider, clipping and handle keep their original mechanics. */
.screen-gallery-project .media-frame.media-frame-compare{
 display:block!important;position:relative;height:100%!important;
 overflow:visible!important;background:#e6e6e2!important;
}
.screen-gallery-project .media-frame-compare .media-compare-visual{
 position:relative!important;height:100%!important;min-height:0!important;
 width:100%!important;aspect-ratio:auto!important;overflow:hidden!important;
}
.screen-gallery-project .media-frame-compare .media-compare-visual>img{
 width:100%!important;height:100%!important;object-fit:contain!important;
}
.screen-gallery-project .media-compare-toolbar{
 position:absolute!important;z-index:6;left:50%;bottom:145px;
 transform:translateX(-50%);width:min(94vw,420px);
 background:rgba(250,250,247,.94);border-radius:8px;padding:8px 12px!important;
 box-shadow:0 6px 26px rgba(0,0,0,.12);backdrop-filter:blur(8px);
}
.screen-gallery-project .media-stage .media-details{display:none!important}
/* The arrows and thumbnail rail remain attached to the active gallery. */
.screen-gallery-project .media-arrow{
 position:absolute;z-index:7;top:46%!important;
 width:44px;height:44px;background:rgba(20,23,26,.64);color:#fff;
 border:1px solid rgba(255,255,255,.5);box-shadow:none;
}
.screen-gallery-project .media-prev{left:clamp(12px,2.5vw,38px)!important}
.screen-gallery-project .media-next{right:clamp(12px,2.5vw,38px)!important}
.screen-gallery-project .media-thumbs{
 position:absolute;z-index:8;bottom:16px;left:clamp(20px,5vw,76px);
 right:clamp(20px,5vw,76px);display:flex;gap:8px;align-items:center;
 margin:0!important;padding:5px 0 8px!important;overflow-x:auto;max-width:100%;
 scrollbar-width:thin;scroll-snap-type:x proximity;
}
.screen-gallery-project .media-thumb{
 flex:0 0 63px;height:43px;border-radius:2px!important;
 border:1px solid rgba(25,29,34,.18)!important;
 background:#fff!important;box-shadow:none!important;
 opacity:.72;transition:opacity .18s ease,border-color .18s ease;
}
.screen-gallery-project .media-thumb:hover,
.screen-gallery-project .media-thumb.active{opacity:1;transform:none!important;border-color:#222!important}
/* A gradient that fades the media into the page background, rather than a dark vignette. */
.screen-gallery-project .screen-gallery-fade{
 position:absolute;z-index:2;inset:auto 0 0;height:clamp(210px,38vh,410px);
 background:linear-gradient(to bottom,
 rgba(246,246,243,0) 0%,rgba(246,246,243,.24) 25%,
 rgba(246,246,243,.72) 54%,rgba(246,246,243,.96) 80%,
 var(--v255-page) 100%);
 pointer-events:none;
}
.screen-gallery-project .screen-gallery-back{
 position:absolute;z-index:10;top:92px;left:clamp(20px,5vw,76px);
 margin:0!important;display:inline-flex;padding:9px 13px!important;
 background:rgba(246,246,243,.88);border:1px solid rgba(31,39,45,.09);
 border-radius:3px;color:#28343c;font-size:13px;font-weight:650;
 text-decoration:none;backdrop-filter:blur(9px);transition:background .2s ease;
}
.screen-gallery-project .screen-gallery-back:hover{background:var(--v255-page);opacity:1}
.screen-gallery-project .screen-gallery-back:focus-visible{outline:2px solid #336a86;outline-offset:3px}
.screen-gallery-project .screen-gallery-identity{
 position:absolute;z-index:4;pointer-events:none;
 left:clamp(20px,5vw,76px);right:clamp(20px,5vw,76px);
 bottom:clamp(78px,12vh,122px);max-width:1050px;
}
.screen-gallery-project .screen-gallery-identity .focused-eyebrow{
 margin:0 0 8px;font-size:11px;font-weight:750;line-height:1.4;
 letter-spacing:.11em;text-transform:uppercase;color:#535c61;
}
.screen-gallery-project .screen-gallery-identity h1{
 margin:0!important;padding:0!important;
 font-size:clamp(34px,3.5vw,54px)!important;line-height:1.07!important;
 letter-spacing:-.039em!important;font-weight:750!important;
 color:#252d32!important;overflow-wrap:anywhere;
}
/* The information now follows the hero. No giant Overview heading. */
.screen-gallery-project .screen-gallery-below{
 width:min(1240px,calc(100% - 2*clamp(20px,5vw,76px)));
 margin:0 auto;padding:40px 0 90px;
}
.screen-gallery-project .screen-gallery-meta{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
 gap:clamp(24px,5vw,78px);align-items:start;padding:10px 0 40px;
}
.screen-gallery-project .screen-gallery-facts{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;
 margin:0;padding:0;
}
.screen-gallery-project .screen-gallery-facts>div{padding-top:14px;border-top:1px solid var(--v255-rule);min-width:0}
.screen-gallery-project .screen-gallery-facts dt{
 margin:0 0 7px;color:var(--v255-muted);font-size:11px;
 letter-spacing:.1em;text-transform:uppercase;font-weight:750;
}
.screen-gallery-project .screen-gallery-facts dd{
 margin:0;color:#343c41;font-size:16px;line-height:1.5;overflow-wrap:anywhere;
}
.screen-gallery-project .focused-project-current-media{
 border-top:1px solid var(--v255-rule);padding:14px 0 0!important;
 margin:0!important;max-width:none!important;overflow-wrap:anywhere;
}
.screen-gallery-project .focused-project-current-media[hidden]{display:none!important}
.screen-gallery-project .focused-project-current-media strong{
 font-size:17px!important;font-weight:700;line-height:1.35;color:#283036;
 margin:0 0 7px;display:block;
}
.screen-gallery-project .focused-project-current-media p{
 color:#626b70;font-size:15px!important;line-height:1.58;margin:0;
}
.screen-gallery-project .focused-project-story{
 margin:18px 0 0!important;border-top:1px solid var(--v255-rule);
}
.screen-gallery-project .focused-project-answer{
 display:grid;grid-template-columns:minmax(160px,.62fr) minmax(0,1.45fr);
 gap:clamp(20px,4vw,68px);padding:34px 0 40px!important;
 border:0!important;border-bottom:1px solid var(--v255-rule)!important;
 align-items:start;
}
.screen-gallery-project .focused-project-answer h2{
 margin:0;font-size:clamp(21px,1.85vw,26px)!important;
 letter-spacing:-.028em;font-weight:750;line-height:1.2;color:#293036;
}
.screen-gallery-project .focused-project-answer h2::before{content:none!important;display:none!important}
.screen-gallery-project .focused-project-answer>div{
 margin:0!important;padding:0!important;max-width:760px;
 font-size:17px!important;line-height:1.65!important;color:#4b5358;
 overflow-wrap:anywhere;
}
.screen-gallery-project .focused-project-answer>div p{font-size:inherit;line-height:inherit;margin:0 0 1em;color:inherit}
.screen-gallery-project .focused-project-answer>div p:last-child{margin-bottom:0}
@media(max-width:760px){
 .screen-gallery-project .screen-gallery-hero{min-height:430px;height:100svh}
 /* A narrow viewport cannot use cover without severing screenshot content. */
 .screen-gallery-project .media-frame-image img{object-fit:contain!important;}
 .screen-gallery-project .screen-gallery-back{top:81px}
 .screen-gallery-project .screen-gallery-identity{bottom:105px}
 .screen-gallery-project .screen-gallery-identity h1{font-size:clamp(32px,8.8vw,43px)!important}
 .screen-gallery-project .media-thumbs{bottom:13px}
 .screen-gallery-project .media-thumb{flex-basis:54px;height:38px}
 .screen-gallery-project .media-arrow{width:38px;height:38px;top:43%!important}
 .screen-gallery-project .media-compare-toolbar{bottom:148px;width:min(92vw,390px)}
 .screen-gallery-project .screen-gallery-below{padding:24px 0 70px}
 .screen-gallery-project .screen-gallery-meta{grid-template-columns:1fr;gap:23px;padding:12px 0 30px}
 .screen-gallery-project .screen-gallery-facts{gap:15px}
 .screen-gallery-project .focused-project-answer{grid-template-columns:1fr;gap:12px;padding:26px 0!important}
 .screen-gallery-project .focused-project-answer h2{font-size:22px!important}
 .screen-gallery-project .focused-project-answer>div{font-size:16px!important}
}
@media(max-width:420px){
 .screen-gallery-project .screen-gallery-identity{bottom:89px}
 .screen-gallery-project .screen-gallery-fade{height:320px}
 .screen-gallery-project .media-arrow{top:38%!important}
 .screen-gallery-project .media-compare-toolbar{bottom:148px}
}
@media(prefers-reduced-motion:reduce){
 .screen-gallery-project .screen-gallery-back,
 .screen-gallery-project .media-thumb{transition:none!important}
}