/* Additions to the original stylesheet (app.css) for things that were done by app.js or are new here */
/* Avenir Next (the original webfonts, now served from this site) */
@font-face{font-family:"Avenir Next";src:url(/fonts/721263/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2) format("woff2"),url(/fonts/721263/1e9892c0-6927-4412-9874-1b82801ba47a.woff) format("woff"),url(/fonts/721263/46cf1067-688d-4aab-b0f7-bd942af6efd8.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Avenir Next";src:url(/fonts/721281/14c73713-e4df-4dba-933b-057feeac8dd1.woff2) format("woff2"),url(/fonts/721281/b8e906a1-f5e8-4bf1-8e80-82c646ca4d5f.woff) format("woff"),url(/fonts/721281/890bd988-5306-43ff-bd4b-922bc5ebdeb4.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}
/* Instagram feed (LightWidget iframe in the news section) */
#section-news>div.instagram iframe{display:block;width:100%;min-height:20rem;border:0;overflow:hidden}
/* contact map: consent button, then the iframe fills the ratio box */
#body-contact #map{background:#eef0f0}
#body-contact #map>p,#body-contact #map>button,#body-contact #map>a{position:relative;z-index:2}
#body-contact #map>p{position:absolute;top:35%;left:0;right:0;text-align:center;margin:0 1rem}
#body-contact #map>button{position:absolute;top:55%;left:50%;transform:translateX(-50%);background:#aa8511;color:#fff;border:0;padding:.75em 1.5em;font:inherit;cursor:pointer}
#body-contact #map>a{position:absolute;top:70%;left:50%;transform:translateX(-50%);white-space:nowrap}
#body-contact #map iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
/* "more" links created by site.js */
div.more{clear:both;text-align:center}
div.more a{display:block;max-width:6rem}
/* mobile: the original script slid the menu out of view and pushed the page below the fixed header; do it with CSS + site.js */
@media (max-width:1023px){
  body:not(.mobile-menu-open):not(.mobile-menu-opened):not(.mobile-menu-close) #wrap>header div.nav{display:none}
}
/* mobile home: the photo fills the screen below the header (--hdr is set by site.js) */
@media (max-width:1023px){
  #body-home section{display:block;height:auto}
  #body-home section a,#body-home section picture{display:block;height:max(calc(100vh - var(--hdr,0px) - 12rem),60vw);height:max(calc(100svh - var(--hdr,0px) - 12rem),60vw)}
  #body-home section picture img{height:100%!important;object-fit:cover!important}
}
/* the location caption on the home photo is shown on touch screens (there is no hover to reveal it) */
@media (max-width:1023px),(hover:none){
  #body-home section a span{opacity:1}
}
/* mobile: the header takes its own space in the page instead of floating over it */
@media (max-width:1023px){
  #wrap>header{position:relative}
}
/* mobile: compact header. Logo and menu button share one row instead of stacking, so content starts near the top.
   (The original stacked a 25rem logo above a 3.5rem button with 2.5rem padding: about a third of the screen.) */
@media (max-width:1023px){
  #wrap>header div.header{display:flex!important;align-items:center;padding:.75rem 6%!important;border-bottom-width:.25rem}
  #wrap>header div.nav{padding-left:6%;padding-right:6%}
  #wrap>header a.logo{flex:0 0 auto;width:9.5rem;max-width:9.5rem;margin:0}
  #mobile-menu-button{flex:0 0 auto;width:2.75rem;height:2.75rem;margin:0 0 0 auto}
  /* inner pages hide the logo (as the original did) until the menu opens: keep the button centred then */
  body:not(#body-home):not(.mobile-menu-open):not(.mobile-menu-opened):not(.mobile-menu-close) #mobile-menu-button{margin:0 auto}
}
/* home intro: a short line and two buttons. Below the photo on phones, a card over its bottom-left corner on desktop. */
#body-home section .home-intro{position:static;background:#fff;padding:1.25rem 6% 1.5rem;text-align:center;line-height:1.5}
#body-home section .home-intro p{margin:0 0 1rem}
#body-home section .home-intro p.actions{margin:0}
#body-home section .home-intro a.button{position:static;display:inline-block;margin:.25rem .375rem;padding:.625rem 1.5rem;background:var(--gold-ink,#aa8511);border:.125rem solid var(--gold-ink,#aa8511);color:#fff;letter-spacing:.063em;text-transform:uppercase;font-size:.875rem;text-decoration:none}
#body-home section .home-intro a.button.alt{background:#fff;color:var(--gold-ink,#aa8511)}
#body-home section .home-intro a.button:hover,#body-home section .home-intro a.button:focus{background:#1e252c;border-color:#1e252c;color:#fff}
@media (min-width:1024px){
  #body-home section .home-intro{position:absolute;left:0;bottom:0;margin:.5rem;max-width:26rem;padding:1.25rem 1.5rem;text-align:left;z-index:2}
  #body-home section .home-intro a.button{margin:.25rem .5rem .25rem 0}
}
/* accessibility: skip link and visible keyboard focus (the original removed all outlines) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:#fff;color:#1e252c;padding:.75rem 1rem;text-decoration:underline}
.skip-link:focus{left:.5rem;top:.5rem}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:.125rem solid #1e252c!important;outline-offset:.125rem;box-shadow:0 0 0 .25rem #fff}
main:focus{outline:0}
/* contact form (markup is styled by the original #body-contact form rules) */
#body-contact form[hidden]{display:none}
#body-contact .form-headline{margin-top:3rem}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#body-contact form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#body-contact form #cf-turnstile{display:flex;justify-content:center;margin-bottom:1rem;min-height:0}
#body-contact form .note{font-size:.813rem;margin-bottom:1rem}
#body-contact form p.status{display:block;margin-top:1rem;font-style:normal}
#body-contact form p.status:empty{display:none}
#body-contact form p.error{color:#a94442}
@media (max-width:1023px){#body-contact form>div:not(:last-of-type){float:none;width:auto;padding-right:0}}
