/* ganfamily.life landing page: "Open Sky".
   Gerry's pick C, 2026-09-23 (https://claude.ai/artifact/YTbR8cf9bohNivF75NH9vw):
   a look of its own, so the landing page no longer shares Beyond Success's
   brown and gold. Linked from the landing page only, after main.css.

   Contrast, WCAG 2.1, against the darkest sky (#BFD9F2), which is the worst
   case anywhere on the page:
     navy  #12294A  10.0:1     body  #26364D  8.5:1
     muted #4A5A70   4.8:1     cobalt #2350C8  4.7:1 (6.9:1 on white)
   Gate N3 re-measures every piece of writing in a browser.

   Phones get their own compact layout; computers and tablets get the spacious
   one (Gerry's standing preference, 2026-09-13). */

:root {
  color-scheme: light;
  --band:    #BFD9F2;  /* header, the top of the sky */
  --ground:  #F7F9FC;
  --raised:  #FFFFFF;
  --rule:    #C9D7E6;
  --heading: #12294A;
  --body:    #26364D;
  --muted:   #4A5A70;
  --gold:    #2350C8;  /* the accent: links, focus ring, highlights */
  --on-gold: #FFFFFF;
  --field-bg: #FFFFFF;
  --field-soft: #FFFFFF;

  --sky:     #BFD9F2;
  --sky-mid: #D6E7F7;
  --sky-end: #EAF3FB;
  --navy:    #12294A;
  --navy-hi: #1D3A66;
  --on-navy: #D2DDEB;  /* 10.6:1 on navy */
}

.masthead { border-bottom-color: transparent; }
.foot { background: var(--ground); border-top-color: var(--rule); }

.lp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lp-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor;
          stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* A place for one of Gerry's photos. A real <img> dropped in with the same
   data-photo name takes the same box. */
.lp-photo, img[data-photo] { display: block; width: 100%; object-fit: cover; }
.lp-photo {
  background-color: #DDE8F4;
  background-image: repeating-linear-gradient(135deg, rgba(18,41,74,.05) 0 10px, rgba(18,41,74,.10) 10px 20px);
}

/* ---------- the sky: name, headline, portrait ---------- */
.lp-sky {
  position: relative; overflow: hidden;
  background-color: var(--sky);
  background-image: linear-gradient(180deg, var(--sky) 0%, var(--sky-mid) 45%, var(--sky-end) 100%);
}
.lp-sky::before, .lp-sky::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.55); filter: blur(28px); pointer-events: none;
}
.lp-sky::before { width: 420px; height: 140px; right: 8%; top: 80px; }
.lp-sky::after  { width: 520px; height: 160px; left: -8%; bottom: 40px; }
.lp-top { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; }

.lp-top .hero { padding-block: var(--s7) var(--s8); }
.lp-pre { display: flex; width: fit-content; gap: 14px; align-items: center; font-size: .8rem; font-weight: 700;
          letter-spacing: .24em; text-transform: uppercase; color: var(--navy); }
.lp-pre::after { content: ""; flex: none; width: 160px; height: 1.5px; background: var(--navy); opacity: .5; }
.lp-top .hero__name { font-weight: 700; font-size: clamp(3.6rem, 8.6vw, 7rem); line-height: .9;
                      letter-spacing: -.025em; text-transform: uppercase; color: var(--navy);
                      margin-top: var(--s3); }
/* fit-content: a label row as wide as its words, not as the column (the
   audit counts a paragraph box, and a full-width one read as 95 characters). */
.lp-roles { display: flex; width: fit-content; flex-wrap: wrap; gap: var(--s2) 18px; margin-top: var(--s4);
            font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
.lp-roles span + span::before { content: "\00B7"; margin-right: 18px; color: var(--gold); }
.lp-quote { margin-top: var(--s6); border-left: 3px solid var(--gold); padding-left: var(--s5); max-width: 24ch;
            font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 2.3vw, 1.75rem);
            line-height: 1.18; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); }
.lp-quote em { font-style: normal; color: var(--gold); }

.lp-acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.lp-sky .btn, .lp-close .btn {
  margin-top: 0; padding: 12px 22px; border-radius: 8px; gap: var(--s2);
  background: var(--navy); color: #FFFFFF; font-size: var(--t-s);
}
.lp-sky .btn:hover, .lp-sky .btn:focus-visible,
.lp-close .btn:hover, .lp-close .btn:focus-visible { background: var(--navy-hi); }
.lp-sky .btn--ghost { background: rgba(255,255,255,.7); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.lp-sky .btn--ghost:hover, .lp-sky .btn--ghost:focus-visible { background: #FFFFFF; }

.lp-fig { position: relative; align-self: end; justify-self: end; width: 100%; max-width: 440px; }
[data-photo="portrait"] { aspect-ratio: 4 / 5; border-radius: 18px 18px 0 0;
                      background-color: rgba(255,255,255,.35);
                      border: 1.5px dashed rgba(18,41,74,.3); border-bottom: 0; }
.lp-card { position: absolute; left: -40px; bottom: 36px; display: flex; gap: 10px; align-items: center;
           background: #FFFFFF; border-radius: 12px; padding: 14px 16px; white-space: nowrap;
           box-shadow: 0 14px 36px rgba(15,35,64,.16);
           font-size: var(--t-s); font-weight: 700; line-height: 1.3; color: var(--navy); }
.lp-card .lp-ico { color: var(--gold); }

/* ---------- Now: a navy strip straight under the sky ---------- */
.lp-now { background: var(--navy); color: var(--on-navy); }
.lp-now__in { display: grid; grid-template-columns: auto 1fr; gap: var(--s6); align-items: center; padding-block: var(--s5); }
.lp-now__lbl { display: flex; gap: 10px; align-items: center; padding-right: var(--s6);
               border-right: 1px solid rgba(255,255,255,.25); color: #FFFFFF;
               font-size: .82rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.lp-now__t { color: var(--on-navy); max-width: var(--measure); }

/* ---------- sections on the pale ground ---------- */
.lp-sect { background: var(--ground); padding-block: var(--s8); }
.lp-sect--after { padding-top: 0; }
.lp-h { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s5); }
.lp-h::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.lp-h__i { width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: #FFFFFF;
           display: grid; place-items: center; flex: none; }
.lp-h__i .lp-ico { width: 18px; height: 18px; }
.lp-h h2 { font-size: var(--t-l); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--navy); }

/* The two doors: a photo beside the words, side by side on a computer. */
.hub-doors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.hub-door { display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden;
            background: #FFFFFF; border: 1.5px solid var(--rule); border-radius: 14px; }
.hub-door [data-photo] { min-height: 220px; height: 100%; }
.hub-door__body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); }
.hub-door__kind { font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.hub-door__t { font-size: 1.4rem; font-weight: 700; color: var(--navy); }
.hub-door__d { color: var(--muted); font-size: .95rem; max-width: 40ch; }
.hub-door .door__link { margin-top: auto; font-size: var(--t-s); }

/* Who I am: four facets in a row with thin dividers. */
.facets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.facet { display: grid; gap: var(--s2); justify-items: start; align-content: start;
         padding: var(--s1) var(--s5); border-left: 1px solid var(--rule); }
.facet:first-child { border-left: 0; padding-left: 0; }
.facet .lp-ico { width: 30px; height: 30px; stroke-width: 1.5; color: var(--gold); }
.facet b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
           line-height: 1.2; color: var(--navy); }
.facet span { display: block; font-size: .93rem; line-height: 1.5; color: var(--muted); }

/* ---------- closing: an invitation to talk ---------- */
.lp-close { background: #FFFFFF; border-top: 1px solid var(--rule); }
.lp-close__in { display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: center; padding-block: var(--s7); }
.lp-close h2 { font-size: var(--t-xl); font-weight: 700; text-transform: uppercase; color: var(--navy); }
.lp-close h2 em { font-style: normal; color: var(--gold); }
.lp-close p { color: var(--muted); margin-top: var(--s2); max-width: var(--measure); }

/* ---------- computer and tablet: the portrait beside the name ---------- */
@media (min-width: 760px) {
  .lp-top { grid-template-columns: 1.1fr .9fr; gap: var(--s6); }
}
/* A tablet is too narrow for a photo beside the words in each door (a 156px
   sliver at 768px, review 2026-09-23): the photo goes on top, and the facets
   sit two by two. */
@media (min-width: 760px) and (max-width: 959px) {
  .hub-door { grid-template-columns: 1fr; grid-template-rows: 180px auto; }
  .hub-door [data-photo] { min-height: 0; }
  .facets { grid-template-columns: 1fr 1fr; row-gap: var(--s6); }
  .facet:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ---------- phone: its own compact layout ----------
   The portrait sits beside the name, so name, headline and both buttons fit
   on the first screen; every section says its piece in fewer rows. */
@media (max-width: 759px) {
  .lp-top { grid-template-columns: 1fr 112px; column-gap: 14px; padding-block: var(--s4) var(--s5); }
  .lp-top .hero { display: contents; }
  .lp-pre { grid-column: 1 / -1; font-size: .75rem; }
  .lp-top .hero__name { grid-column: 1; font-size: 3rem; margin-top: var(--s2); }
  .lp-fig { grid-column: 2; grid-row: 2 / span 2; align-self: start; justify-self: stretch; max-width: none; margin-top: var(--s2); }
  [data-photo="portrait"] { border-radius: 12px; border-bottom: 1.5px dashed rgba(18,41,74,.3); }
  .lp-card { display: none; }
  .lp-roles { grid-column: 1; flex-direction: column; gap: 2px; margin-top: var(--s2); font-size: .75rem; }
  .lp-roles span + span::before { content: none; }
  .lp-quote { grid-column: 1 / -1; margin-top: var(--s4); padding-left: 14px; max-width: none; font-size: 1.2rem; }
  .lp-acts { grid-column: 1 / -1; margin-top: var(--s4); gap: var(--s2); }
  .lp-sky .btn { padding: 10px 16px; }

  .lp-now__in { grid-template-columns: 1fr; gap: var(--s1); padding-block: var(--s4); }
  .lp-now__lbl { border-right: 0; padding-right: 0; font-size: .75rem; }
  .lp-now__t { font-size: .9rem; line-height: 1.5; }

  .lp-sect { padding-block: var(--s6); }
  .lp-sect--after { padding-top: 0; }
  .lp-h { margin-bottom: var(--s4); }
  .lp-h h2 { font-size: 1.1rem; }
  .lp-h__i { width: 30px; height: 30px; }

  .hub-doors { grid-template-columns: 1fr; gap: var(--s3); }
  .hub-door { grid-template-columns: 96px 1fr; border-radius: 12px; }
  .hub-door [data-photo] { min-height: 0; }
  .hub-door__body { padding: var(--s3) 14px; gap: var(--s1); }
  .hub-door__t { font-size: 1.1rem; }
  .hub-door__d { font-size: .88rem; line-height: 1.45; }

  .facets { grid-template-columns: 1fr 1fr; row-gap: var(--s5); }
  .facet { padding: 0 var(--s3); gap: var(--s1); }
  .facet:nth-child(odd) { border-left: 0; padding-left: 0; }
  .facet .lp-ico { width: 24px; height: 24px; }
  .facet b { font-size: .95rem; }
  .facet span { font-size: .85rem; line-height: 1.45; }

  .lp-close__in { grid-template-columns: 1fr; gap: var(--s3); padding-block: var(--s6); }
  .lp-close .btn { justify-self: start; }
  .lp-close h2 { font-size: 1.35rem; }
}