/* Landing page: full-screen photo; logo top-left; sign-in + caption bottom-left; copyright bottom-right.
   Backward compatible: plain fallbacks are declared before modern values. */
body.landing{background:#2f2c2a;color:#fbf8f2;margin:0}
html{scroll-behavior:smooth}
.bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;background-color:#3a3530;
  background-repeat:no-repeat;background-size:cover;background-position:50% 58%;
  /* fallback: single progressive JPEG */
  background-image:url("/assets/photo/calvert-hills-1920.jpg");
  /* progressive JPEG on top, tiny blurred placeholder (inline, shows instantly) underneath, solid colour last */
  background-image:url("/assets/photo/calvert-hills-1920.jpg"),url("data:image/jpeg;base64,/9j/2wBDAA4ODg4PDhASEhAXGBYYFyEfHBwfITIkJyQnJDJNMDgwMDgwTURSQz5DUkR6X1VVX3qMdnB2jKqYmKrWy9b/////2wBDAQ4ODg4PDhASEhAXGBYYFyEfHBwfITIkJyQnJDJNMDgwMDgwTURSQz5DUkR6X1VVX3qMdnB2jKqYmKrWy9b/////wgARCAAYACADASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQCBQYD/8QAFwEBAQEBAAAAAAAAAAAAAAAAAAMBAv/aAAwDAQACEAMQAAAAF1ocUfucHf4znEKzWdA//8QAJxAAAgEDAQYHAAAAAAAAAAAAAQIEAAMRIQUSEyIxQRQVMkJRYrH/2gAIAQEAAT8Ai3EdOG5OSKlrbsWiG9W9yn5BrZ0g3CWK8ufypD8ZALSn7Y7VHvRElhXf2nUnSpu1Izx3RQjHpmoE91OGZe9eaJw7SGTugnUKteHDHTepoyAHGaEd89RQsqqqCxNf/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERIQL/2gAIAQIBAT8AaVxk7TwhD//EABkRAAIDAQAAAAAAAAAAAAAAAAEhAAISEP/aAAgBAwEBPwDSc1Uh9//Z")}
/* Photo tier by PHYSICAL width (CSS px x DPR). Default (above) = 1920. Later rules win. */
@media (max-width:1280px) and (max-resolution:1dppx){
  .bg{background-image:url("/assets/photo/calvert-hills-1280.jpg");background-image:url("/assets/photo/calvert-hills-1280.jpg"),url("data:image/jpeg;base64,/9j/2wBDAA4ODg4PDhASEhAXGBYYFyEfHBwfITIkJyQnJDJNMDgwMDgwTURSQz5DUkR6X1VVX3qMdnB2jKqYmKrWy9b/////2wBDAQ4ODg4PDhASEhAXGBYYFyEfHBwfITIkJyQnJDJNMDgwMDgwTURSQz5DUkR6X1VVX3qMdnB2jKqYmKrWy9b/////wgARCAAYACADASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQCBQYD/8QAFwEBAQEBAAAAAAAAAAAAAAAAAAMBAv/aAAwDAQACEAMQAAAAF1ocUfucHf4znEKzWdA//8QAJxAAAgEDAQYHAAAAAAAAAAAAAQIEAAMRIQUSEyIxQRQVMkJRYrH/2gAIAQEAAT8Ai3EdOG5OSKlrbsWiG9W9yn5BrZ0g3CWK8ufypD8ZALSn7Y7VHvRElhXf2nUnSpu1Izx3RQjHpmoE91OGZe9eaJw7SGTugnUKteHDHTepoyAHGaEd89RQsqqqCxNf/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERIQL/2gAIAQIBAT8AaVxk7TwhD//EABkRAAIDAQAAAAAAAAAAAAAAAAEhAAISEP/aAAgBAwEBPwDSc1Uh9//Z")}}
@media (min-width:1921px), (min-width:1537px) and (min-resolution:1.25dppx), (min-width:1537px) and (-webkit-min-device-pixel-ratio:1.25), (min-width:1281px) and (min-resolution:1.5dppx), (min-width:1281px) and (-webkit-min-device-pixel-ratio:1.5), (min-width:961px) and (min-resolution:2dppx), (min-width:961px) and (-webkit-min-device-pixel-ratio:2), (orientation:portrait) and (min-resolution:2dppx), (orientation:portrait) and (-webkit-min-device-pixel-ratio:2){
  .bg{background-image:url("/assets/photo/calvert-hills-2560.jpg");background-image:url("/assets/photo/calvert-hills-2560.jpg"),url("data:image/jpeg;base64,/9j/2wBDAA4ODg4PDhASEhAXGBYYFyEfHBwfITIkJyQnJDJNMDgwMDgwTURSQz5DUkR6X1VVX3qMdnB2jKqYmKrWy9b/////2wBDAQ4ODg4PDhASEhAXGBYYFyEfHBwfITIkJyQnJDJNMDgwMDgwTURSQz5DUkR6X1VVX3qMdnB2jKqYmKrWy9b/////wgARCAAYACADASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQCBQYD/8QAFwEBAQEBAAAAAAAAAAAAAAAAAAMBAv/aAAwDAQACEAMQAAAAF1ocUfucHf4znEKzWdA//8QAJxAAAgEDAQYHAAAAAAAAAAAAAQIEAAMRIQUSEyIxQRQVMkJRYrH/2gAIAQEAAT8Ai3EdOG5OSKlrbsWiG9W9yn5BrZ0g3CWK8ufypD8ZALSn7Y7VHvRElhXf2nUnSpu1Izx3RQjHpmoE91OGZe9eaJw7SGTugnUKteHDHTepoyAHGaEd89RQsqqqCxNf/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERIQL/2gAIAQIBAT8AaVxk7TwhD//EABkRAAIDAQAAAAAAAAAAAAAAAAEhAAISEP/aAAgBAwEBPwDSc1Uh9//Z")}}
@media (min-width:1441px), (min-width:2561px), (min-width:2049px) and (min-resolution:1.25dppx), (min-width:2049px) and (-webkit-min-device-pixel-ratio:1.25), (min-width:1708px) and (min-resolution:1.5dppx), (min-width:1708px) and (-webkit-min-device-pixel-ratio:1.5), (min-width:1281px) and (min-resolution:2dppx), (min-width:1281px) and (-webkit-min-device-pixel-ratio:2){
  .bg{background-image:url("/assets/photo/calvert-hills-4032.jpg");background-image:url("/assets/photo/calvert-hills-4032.jpg"),url("data:image/jpeg;base64,/9j/2wBDAA4ODg4PDhASEhAXGBYYFyEfHBwfITIkJyQnJDJNMDgwMDgwTURSQz5DUkR6X1VVX3qMdnB2jKqYmKrWy9b/////2wBDAQ4ODg4PDhASEhAXGBYYFyEfHBwfITIkJyQnJDJNMDgwMDgwTURSQz5DUkR6X1VVX3qMdnB2jKqYmKrWy9b/////wgARCAAYACADASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQCBQYD/8QAFwEBAQEBAAAAAAAAAAAAAAAAAAMBAv/aAAwDAQACEAMQAAAAF1ocUfucHf4znEKzWdA//8QAJxAAAgEDAQYHAAAAAAAAAAAAAQIEAAMRIQUSEyIxQRQVMkJRYrH/2gAIAQEAAT8Ai3EdOG5OSKlrbsWiG9W9yn5BrZ0g3CWK8ufypD8ZALSn7Y7VHvRElhXf2nUnSpu1Izx3RQjHpmoE91OGZe9eaJw7SGTugnUKteHDHTepoyAHGaEd89RQsqqqCxNf/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERIQL/2gAIAQIBAT8AaVxk7TwhD//EABkRAAIDAQAAAAAAAAAAAAAAAAEhAAISEP/aAAgBAwEBPwDSc1Uh9//Z")}}
@media (orientation:portrait){.bg{background-position:45% 50%}}
/* (dark bottom vignette removed: it sat behind the sign-in panel and darkened it) */

/* page frame: one shared left edge for logo and sign-in */
.page{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;
  min-height:100vh;min-height:100svh;box-sizing:border-box;
  padding:28px 32px 18px;padding:clamp(18px,3.2vw,44px) clamp(18px,3.2vw,48px) clamp(14px,2vw,24px)}
.spacer{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;min-height:40px}

.corner-logo{display:inline-block;line-height:0}
.corner-logo img{display:block;width:240px;width:clamp(150px,19vw,290px);height:auto}

.bottom{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  -webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}
.bottom-left{max-width:300px;width:100%}
/* nearly clear panel: no fill, no blur, no shadow; a fine light edge; legibility from text-shadow */
.panel{text-align:left;padding:.95rem 1.1rem .6rem;border-radius:2px;box-sizing:border-box;
  background:transparent;background:rgba(28,25,23,.03);border:1px solid rgba(255,255,255,.3)}
body.landing .wordmark{margin:0;color:#fbf8f2;font-size:.86rem;letter-spacing:.24em;text-align:left;text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 12px rgba(0,0,0,.45)}
/* reserved, intentionally empty space for a future tagline */
.tagline{min-height:1.15em;margin:.2rem 0 .1rem;font-style:italic;color:#f3eee5;font-size:.85rem}
body.landing .tag{margin:0 0 .6rem;font-size:.85rem;text-align:left;color:#fbf8f2;color:rgba(251,248,242,.92);text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 10px rgba(0,0,0,.45)}
body.landing form.signin{max-width:none;gap:.5rem}
body.landing input[type=email]{font-size:.88rem;padding:.55rem .75rem}
body.landing button{font-size:.76rem;letter-spacing:.18em;padding:.55rem .75rem}
body.landing .hint{font-size:.75rem;min-height:1.1em;margin-top:.1rem}
body.landing input[type=email]{text-align:left;background:#fffdf8;background:rgba(255,253,248,.92);border-color:rgba(255,255,255,.6)}
body.landing button{background:#2f2c2a;background:rgba(47,44,42,.88);border-color:rgba(47,44,42,.9)}
body.landing button:hover{background:#2a2725}
body.landing .hint{text-align:left;color:#fbf8f2;text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 10px rgba(0,0,0,.5)}

.caption,.copy{margin:0;font-size:.74rem;letter-spacing:.06em;color:#fbf8f2;color:rgba(251,248,242,.9);text-shadow:0 1px 4px rgba(0,0,0,.65)}
.caption,.copy{font-style:italic}
.caption{white-space:nowrap}

/* first screen: "client sign in" rectangle, bottom-left, exactly the logo's width; clear inside, gray pinstripe perimeter only (two thin lines), plain gray centered text */
.bubble-row{text-align:left;line-height:1}
a.bubble{display:block;box-sizing:border-box;width:240px;width:clamp(150px,19vw,290px);
  font-size:.62rem;letter-spacing:.14em;line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap;font-weight:bold;
  padding:.32rem .5rem;border-radius:2px;color:#535353;background:transparent;
  border:1px solid #535353;text-shadow:none}
a.bubble:hover,a.bubble:focus{color:#2f2c2a;border-color:#2f2c2a}
@media (max-width:600px){a.bubble{width:150px}}

/* sign-in panel just below the first screen */
.signin-zone{padding:0 32px 40px;padding:0 clamp(18px,3.2vw,48px) 40px}
.signin-zone .bottom-left{position:relative}
/* anchor sits (one screen minus 32px) above the panel's bottom: following #signin puts the panel near the bottom of the screen */
.signin-anchor{position:absolute;left:0;width:1px;height:1px;top:-600px;
  top:calc(100% + 32px - 100vh);top:calc(100% + 32px - 100svh)}

/* scroll space: one full screen of photo only (px fallback first), then the footer, then five blank text rows */
.photo-gap{height:729px;height:calc(100vh - 10.65rem);height:calc(100lvh - 10.65rem)}
footer.site-foot{margin:0;text-align:left;letter-spacing:normal;color:#fbf8f2;
  display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  -webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;
  font-size:.74rem;line-height:1.6;
  padding:0 32px 8em;padding:0 clamp(18px,3.2vw,48px) 8em}
.copy{text-align:right;white-space:nowrap;margin-left:1.5rem}

@media (max-width:600px){
  .corner-logo img{width:150px}
  .bottom{display:block}
  .bottom-left{max-width:300px}
  .panel{padding:1.1rem 1.1rem .8rem}
  body.landing .wordmark{font-size:.84rem;letter-spacing:.22em}
  .caption,.copy{font-size:.7rem}
  footer.site-foot{display:block;font-size:.7rem}
  .caption{white-space:normal}
  .copy{text-align:left;margin:.3rem 0 0}
}
.bottom,.bottom-left,.caption{text-align:left}
@media (max-width:600px){
  .panel{padding:.95rem 1rem .5rem}
  body.landing .tag{margin-bottom:.6rem}
  body.landing input[type=email],body.landing button{padding:.55rem .75rem}
  form.signin{gap:.5rem}
  .tagline{min-height:1.2em;margin:.2rem 0 .1rem}
}

/* align sign-in panel and "client sign in" button to the logo's VISIBLE artwork edges (the CH art is inset 2.754% each side inside the SVG box) */
.signin-zone .bottom-left,a.bubble{box-sizing:border-box;max-width:none;width:227px;margin-left:7px;
  width:calc(clamp(150px,19vw,290px) * .94492);margin-left:calc(clamp(150px,19vw,290px) * .02754)}
@media (max-width:600px){.signin-zone .bottom-left,a.bubble{width:142px;margin-left:4px;width:calc(150px * .94492);margin-left:calc(150px * .02754)}}
/* optical nudge (Gregory 2026-11-02): "client sign in" button starts 5px right of the C's outermost point; right edge unchanged */
a.bubble{width:222px;margin-left:12px;width:calc(clamp(150px,19vw,290px) * .94492 - 5px);margin-left:calc(clamp(150px,19vw,290px) * .02754 + 5px)}
@media (max-width:600px){a.bubble{width:137px;margin-left:9px;width:calc(150px * .94492 - 5px);margin-left:calc(150px * .02754 + 5px)}}
/* optical nudge (Gregory 2026-11-02): raise the button by half its height (24px tall, so 12px); width unchanged */
a.bubble{position:relative;top:-12px}
/* optical nudge 2 (Gregory 2026-11-02): button 10px right of the C in total, width unchanged; sign-in panel starts at the button's left edge with the button's width, and is raised 12px like the button */
a.bubble{margin-left:17px;margin-left:calc(clamp(150px,19vw,290px) * .02754 + 10px)}
@media (max-width:600px){a.bubble{margin-left:14px;margin-left:calc(150px * .02754 + 10px)}}
.signin-zone .bottom-left{width:222px;margin-left:17px;width:calc(clamp(150px,19vw,290px) * .94492 - 5px);margin-left:calc(clamp(150px,19vw,290px) * .02754 + 10px)}
@media (max-width:600px){.signin-zone .bottom-left{width:137px;margin-left:14px;width:calc(150px * .94492 - 5px);margin-left:calc(150px * .02754 + 10px)}}
.signin-zone .panel{position:relative;top:-12px}
/* optical nudge 3: button and panel 15px right of the C in total, widths unchanged */
a.bubble,.signin-zone .bottom-left{margin-left:22px;margin-left:calc(clamp(150px,19vw,290px) * .02754 + 15px)}
@media (max-width:600px){a.bubble,.signin-zone .bottom-left{margin-left:19px;margin-left:calc(150px * .02754 + 15px)}}
/* portrait screens: button pinned in the photo, vertically centered between the front walkway (above) and the yellow curb top (below), at the button's left edge.
   Photo-fitted midpoint line (1920px image space): y = 1225.1 - 0.029x; bg is cover, 45% 50% in portrait. Old browsers keep the in-flow position above. */
@supports (top:calc(1vh + 1vw)){
@media (orientation:portrait){
  .page{position:relative}
  .bubble-row{min-height:calc(1.384rem + 2px)}
  a.bubble{position:absolute;top:calc(83.336vh + 1.305vw - .029 * (clamp(18px,3.2vw,48px) + clamp(150px,19vw,290px) * .02754 + 15px) - .692rem - 1px)}
}
@media (orientation:portrait) and (max-width:600px){
  a.bubble{top:calc(83.336vh + 1.305vw - .029 * (clamp(18px,3.2vw,48px) + 150px * .02754 + 15px) - .692rem - 1px)}
}}
/* larger label, same box: height locked to the old box (1.384rem + 2px border), text centered by line-height */
a.bubble{font-size:.75rem;height:24px;height:calc(1.384rem + 2px);padding-top:0;padding-bottom:0;line-height:22px;line-height:1.384rem;overflow:hidden}
/* login box wide enough for "Chesapeake Historic" on one line; never narrower than the button; left edge unchanged */
.signin-zone .bottom-left{width:264px;width:max(16.5rem, calc(clamp(150px,19vw,290px) * .94492 - 5px))}
@media (max-width:600px){.signin-zone .bottom-left{width:264px;width:16.5rem}}
body.landing .wordmark{white-space:nowrap}
/* portrait: button sits a fixed 12px above the curb top (curb line in 1920px image space: y = 1209 + 0.1x), walkway ignored */
@supports (top:calc(1vh + 1vw)){
@media (orientation:portrait){
  a.bubble{top:calc(89.958vh - 4.5vw + .1 * (clamp(18px,3.2vw,48px) + clamp(150px,19vw,290px) * .02754 + 15px) - 14px - 1.384rem)}
}
@media (orientation:portrait) and (max-width:600px){
  a.bubble{top:calc(89.958vh - 4.5vw + .1 * (clamp(18px,3.2vw,48px) + 150px * .02754 + 15px) - 14px - 1.384rem)}
}}
/* portrait: button bottom exactly 50px above the curb top at its left edge (curb: y = 1209 + 0.1x in 1920px image space) */
@supports (top:calc(1vh + 1vw)){
@media (orientation:portrait){
  a.bubble{top:calc(89.958vh - 4.5vw + .1 * (clamp(18px,3.2vw,48px) + clamp(150px,19vw,290px) * .02754 + 15px) - 52px - 1.384rem)}
}
@media (orientation:portrait) and (max-width:600px){
  a.bubble{top:calc(89.958vh - 4.5vw + .1 * (clamp(18px,3.2vw,48px) + 150px * .02754 + 15px) - 52px - 1.384rem)}
}}
/* more room between the button and the login box: whole sign-in zone (box + its scroll anchor) moves down 48px */
.signin-zone{margin-top:48px}
/* button label regular weight */
a.bubble{font-weight:normal}
/* CLIENTS button: wordmark font (Georgia, regular, upright, uppercase, .86rem / .24em; .84rem / .22em on phones), white; logo gray at 50% fill; size and position unchanged */
a.bubble,a.bubble:hover,a.bubble:focus{font-family:Georgia,"Times New Roman",serif;font-weight:normal;font-style:normal;font-variant:normal;text-transform:uppercase;
  font-size:.86rem;letter-spacing:.24em;color:#fff;background:#535353;background:rgba(83,83,83,.5);text-shadow:none}
@media (max-width:600px){a.bubble,a.bubble:hover,a.bubble:focus{font-size:.84rem;letter-spacing:.22em}}
/* CLIENTS text black */
a.bubble,a.bubble:hover,a.bubble:focus{color:#000}
/* duplicate caption: one row above the foot of the first screen, left edge on the CLIENTS button's left edge */
.page{position:relative}
.page .caption-dup{position:absolute;right:auto;text-align:left;white-space:nowrap;max-width:none;
  left:42px;left:calc(clamp(18px,3.2vw,48px) + clamp(150px,19vw,290px) * .02754 + 15px);
  bottom:36px;bottom:calc(clamp(14px,2vw,24px) + 18px)}
@media (max-width:600px){.page .caption-dup{left:37px;left:calc(clamp(18px,3.2vw,48px) + 150px * .02754 + 15px)}}
/* landscape: one row up would hit the button, which sits at the bottom there, so it sits 4px under the button instead */
@media (orientation:landscape){.page .caption-dup{bottom:13px;bottom:calc(clamp(14px,2vw,24px) - 11px)}}
/* CLIENTS button: logo gray at 75% opacity */
a.bubble,a.bubble:hover,a.bubble:focus{background:#535353;background:rgba(83,83,83,.75)}
/* on click: button slides up 40px (no fade) */
a.bubble{-webkit-transition:-webkit-transform .5s ease;transition:transform .5s ease}
body.clients-open a.bubble{-webkit-transform:translateY(-40px);-ms-transform:translateY(-40px);transform:translateY(-40px)}
/* CLIENTS button: logo gray at 85% opacity */
a.bubble,a.bubble:hover,a.bubble:focus{background:#535353;background:rgba(83,83,83,.85)}
/* duplicate caption, portrait: placed from the same vh formula as the CLIENTS button (button top + button height + 12px),
   so they can't drift apart on iOS, where the page height (svh) and vh differ */
@supports (top:calc(1vh + 1vw)){
@media (orientation:portrait){ .page .caption-dup{bottom:auto;top:calc(89.958vh - 4.5vw + .1 * (clamp(18px,3.2vw,48px) + clamp(150px,19vw,290px) * .02754 + 15px) - 52px + 2px + 12px)} }
@media (orientation:portrait) and (max-width:600px){ .page .caption-dup{top:calc(89.958vh - 4.5vw + .1 * (clamp(18px,3.2vw,48px) + 150px * .02754 + 15px) - 52px + 2px + 12px)} }}
/* Android only: CLIENTS button raised by its own height (24.1px); iPhone, tablet and desktop unchanged */
html.is-android a.bubble{margin-top:-24px;margin-top:calc(-1.384rem - 2px)}
/* Android only: duplicate caption down one full row (18px); button not moved */
html.is-android .page .caption-dup{-webkit-transform:translateY(18px);-ms-transform:translateY(18px);transform:translateY(18px)}
/* footer: original caption and copyright share the left edge of the duplicate caption (= CLIENTS button's left edge) */
footer.site-foot{padding-left:37px;padding-left:calc(clamp(18px,3.2vw,48px) + clamp(150px,19vw,290px) * .02754 + 15px);display:block}
@media (max-width:600px){footer.site-foot{padding-left:37px;padding-left:calc(clamp(18px,3.2vw,48px) + 150px * .02754 + 15px)}}
footer.site-foot .copy{text-align:left;margin:.3rem 0 0}
/* desktop only: copyright back at the far right, as before v55 (footer caption keeps the shared left edge) */
@media (min-width:1025px) and (orientation:landscape){
  html:not(.is-android) footer.site-foot{display:-webkit-box;display:-ms-flexbox;display:flex}
  html:not(.is-android) footer.site-foot .copy{text-align:right;margin:0 0 0 1.5rem}
}
