/* V22 unified site shell — final overrides, based on Amara-LIIVE.zip master */
:root{--site-paper:#f3eadc;--site-paper-light:#f8f1e7;--site-ink:#241d1a}

html,body{overflow-x:hidden}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body,
body.home-v15-page,
body.gallery-v22,
body.stories-l2-v21,
body.story-surface{
  margin:0;
  color:var(--site-ink);
  background-color:var(--site-paper);
  background-image:
    linear-gradient(rgba(247,240,230,.72),rgba(247,240,230,.72)),
    url('/assets/textures/paper-fiber.jpg');
  background-repeat:repeat,repeat;
  background-size:auto,700px 700px;
}

/* Canonical navigation copied from the Stories page and used everywhere. */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:
    linear-gradient(rgba(248,241,231,.96),rgba(248,241,231,.96)),
    url('/assets/textures/paper-fiber.jpg');
  background-size:auto,700px 700px;
  border-bottom:1px solid rgba(73,47,34,.14);
  backdrop-filter:none;
}
.header-inner{
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.brand-logo{line-height:0;display:block;flex:0 0 auto}
.brand-logo img{
  display:block;
  width:245px;
  height:auto;
  max-width:38vw;
}
.nav{
  display:flex;
  gap:28px;
  font:13px/1.2 Arial,sans-serif;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.nav a{color:inherit;text-decoration:none;padding:4px 0}
.nav a:hover,.nav a[aria-current="page"]{border-bottom:1px solid var(--site-ink)}

/* Footer uses the same butterfly wordmark in a light-on-dark color variant. */
.footer-logo img{width:245px;max-width:70vw}
.site-footer{background:#111;color:#eee}
.site-footer .small{color:#c9c0b8}

/* Homepage: same paper environment as the other pages; no separate purple/brown browser surround. */
.home-v15-shell{
  max-width:1180px;
  margin:0 auto;
  background:transparent!important;
  box-shadow:none!important;
}
.home-v15-header{display:none!important}
.home-v15-header:before,
.home-paper:before,
.process-v15:before,
.between-v15:before,
.night-signup-v15:before,
.home-v15-footer:before,
.home-v15-hero:before{display:none!important}
.home-v15-hero{overflow:hidden!important;background:#111}
.home-v15-hero img{display:block;width:100%;height:auto}
.home-v15-footer{display:none!important}
.home-paper,.process-v15{
  background:
    linear-gradient(rgba(247,239,228,.94),rgba(247,239,228,.94)),
    url('/assets/textures/paper-fiber.jpg')!important;
  background-size:auto,700px 700px!important;
}

/* Homepage video decoration is a real image layer, never a CSS background that can be covered. */
.between-v15{
  position:relative;
  min-height:0!important;
  background:none!important;
  overflow:hidden;
  line-height:0;
}
.between-v15 .between-bg-art{
  display:block;
  width:100%;
  height:auto;
  position:relative;
  z-index:1;
}
.between-v15 .video-holder{
  position:absolute;
  z-index:3;
  left:33.9%;
  top:5.7%;
  width:32.2%;
  height:87.2%;
  box-sizing:border-box;
  background:#17120f;
  border:6px solid rgba(246,235,219,.88);
  box-shadow:0 7px 22px rgba(55,35,25,.17);
}
.between-v15 .video-holder video{width:100%;height:100%;object-fit:cover;display:block;background:#111}
.between-v15 .between-link{
  z-index:4;
  left:3.5%;
  top:52%;
  width:25%;
  height:34%;
}

/* Stories intro: smaller bowling image floated beside the intro paragraph. */
.stories-opening-copy{max-width:900px!important}
.story-photo-before{
  float:left;
  width:230px;
  height:170px;
  margin:2px 26px 10px 0;
  padding:6px;
  background:#fffaf3;
  box-shadow:0 5px 14px rgba(52,33,23,.12);
  transform:rotate(-.6deg);
}
.story-photo-before img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 56%}
.stories-lede{max-width:none!important}

/* First Crossing: bowling image at top; no flower decorations anywhere on this page. */
body.story-v18 .flower-sprig{display:none!important}
.story-v18 .story-hero .hero-sheet:before{
  background-image:url('/assets/images/amara-bowling-top.jpg')!important;
  background-position:center 58%!important;
}

/* Utility pages retain the same paper surface and width. */
.page-hero,.prose,.contact-grid{max-width:1180px}

/* responsive canonical header */
@media(max-width:900px){
  .header-inner{height:78px}
  .brand-logo img{width:215px;max-width:42vw}
  .nav{gap:16px;font-size:11px}
  .footer-logo img{width:220px}
}
@media(max-width:620px){
  .header-inner{
    height:auto;
    min-height:82px;
    padding:8px 0 10px;
    align-items:center;
    gap:12px;
  }
  .brand-logo img{width:185px;max-width:48vw}
  .nav{gap:10px;justify-content:flex-end;flex-wrap:wrap;font-size:10px}
  .story-photo-before{
    float:none;
    width:min(230px,78vw);
    height:165px;
    margin:0 auto 18px;
  }
  .between-v15 .video-holder{
    left:33.9%;
    top:5.7%;
    width:32.2%;
    height:87.2%;
    border-width:3px;
  }
}

/* V23 alignment fix: page hero itself must not be width-capped.
   Its inner .wrap controls alignment with the site header. */
.page-hero{
  width:100%;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}