/* 12butterflies.life's front page, the live Squarespace page's look measured on 22 Oct 2026: white, Poppins 16px, the wing film covering the
   whole screen (its own white fills the right), the words from 58 per cent across, the teal button (#9FCAD1, 10px corners) top right and the
   teal band at the foot. On a phone the film is a band above the words, so the wing and the words never sit on each other. */
:root { --paper: #FFFFFF; --ink: #000000; --teal: #9FCAD1; --teal-deep: #3F7F89; --sans: "Poppins", "Helvetica Neue", Arial, system-ui, sans-serif; color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }

.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; }
.film, .still { position: absolute; inset: 0; width: 100%; height: 100%; }
.film { object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity 1.4s ease; z-index: 0; }
.film.on { opacity: 1; }
.still { z-index: -1; background: #fff url(/assets/film/wing.jpg) 50% 50% / cover no-repeat; }

.head { position: absolute; top: 0; right: 0; z-index: 2; padding-top: calc(26px + env(safe-area-inset-top, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
/* Sign in (23 Oct 2026, Jason: "Where is the login section on the main page?"): a quiet word beside the button, as a site's header link reads */
.head { display: flex; align-items: center; gap: 28px; }
.signin { white-space: nowrap; flex: none; color: var(--ink); text-decoration: none; font-size: 16px; line-height: 1.5; padding: 16px 4px; }
.signin:hover { text-decoration: underline; }
.invite { display: inline-block; background: var(--teal); color: var(--ink); text-decoration: none; border-radius: 10px; padding: 16px 20.8px; font-size: 16px; line-height: 1.5; transition: filter .2s; }
.invite:hover { filter: brightness(.95); }

.words { position: absolute; z-index: 1; left: 58.2%; top: 40%; width: min(360px, 34vw); display: grid; gap: 0; }
.line { margin: 0; }
.sign { margin-top: calc(27vh - 72px); }
.sign h1 { margin: 0; line-height: 0; }
.sign img { width: 195px; height: auto; }
.sign p { margin: 22px 0 0; }

.foot { background: var(--teal); min-height: 87px; display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  padding-block: 20px calc(20px + env(safe-area-inset-bottom, 0px)); padding-left: max(52px, env(safe-area-inset-left, 0px)); padding-right: max(52px, env(safe-area-inset-right, 0px)); }
.foot a { color: var(--ink); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot p { margin: 0; }

@media (max-width: 760px) {
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .film, .still { position: relative; height: 56vh; min-height: 300px; }
  .still { position: absolute; top: 0; height: 56vh; min-height: 300px; }
  .film { object-position: 30% 50%; }
  .still { background-position: 30% 50%; }
  .head { position: absolute; left: 0; right: 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-top: calc(16px + env(safe-area-inset-top, 0px)); text-align: right; }
  .head { justify-content: flex-end; gap: 14px; }
  .signin { font-size: 14px; padding: 13px 2px; background: rgba(255,255,255,.85); border-radius: 10px; padding-inline: 12px; }
  .invite { font-size: 14px; padding: 13px 16px; }
  .words { position: static; width: auto; padding: 32px max(23px, env(safe-area-inset-right, 0px)) 56px max(23px, env(safe-area-inset-left, 0px)); }
  .sign { margin-top: 40px; }
  .sign img { width: min(297px, 80vw); }
  .foot { flex-direction: column; justify-content: center; text-align: center; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .film { transition: none; } }

/* the sign-in box over the front page (26 Oct 2026): a white card under the top-right links, a sheet from the top on a phone. It carries its own
   small copy of the door's form styles, so the front page does not load the door's stylesheet. */
.signpanel { position: fixed; z-index: 20; top: calc(90px + env(safe-area-inset-top, 0px)); right: max(32px, env(safe-area-inset-right, 0px)); width: min(400px, calc(100vw - 32px));
  background: var(--paper); border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.18); padding: 26px 24px 20px; display: grid; gap: 14px; }
.signpanel .shut { position: absolute; top: 8px; right: 10px; border: 0; background: none; font: inherit; font-size: 26px; line-height: 1; padding: 6px 10px; cursor: pointer; color: var(--ink); }
.sp-title { margin: 0; font-size: 22px; font-weight: 400; }
.sp-lede, .sp-foot { margin: 0; font-size: 14px; color: #5B6869; }
.sp-foot a { color: var(--ink); }
.signinbox { display: grid; gap: 12px; }
.signinbox .quick { display: grid; gap: 10px; }
.signinbox .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-size: 15px; color: var(--ink); background: var(--teal);
  border: 1px solid var(--teal); border-radius: 10px; padding: 12px 18px; cursor: pointer; text-decoration: none; }
.signinbox .btn.ghostbtn { background: var(--paper); }
.signinbox .btn.wide { width: 100%; }
.signinbox .btn[disabled] { opacity: .5; cursor: default; }
.signinbox .gmark { font-weight: 600; color: #4285F4; }
.signinbox .or { margin: 2px 0 0; font-size: 13px; color: #5B6869; text-align: center; }
.signinbox .field { display: grid; gap: 6px; }
.signinbox .lbl { font-size: 14px; font-weight: 500; }
.signinbox input { font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid #DCE6E7; border-radius: 10px; background: #F6FAFA; width: 100%; box-sizing: border-box; }
.signinbox .row { display: flex; flex-wrap: wrap; gap: 10px; }
.signinbox .msg { margin: 0; font-size: 14px; min-height: 1.2em; }
.signinbox .msg.bad { color: #A33A2B; }
.signinbox .msg.good { color: var(--teal-deep); }
@media (max-width: 760px) { .signpanel { top: calc(12px + env(safe-area-inset-top, 0px)); right: 16px; left: 16px; width: auto; } }