/* ingrid.fyi Home. Loads after base.css. Free in full, never degraded: only the light guest prompts.
   A narrower frame than the reading pages, four sections each opened by a thin rule and a small label. */

body.home .wrap { max-width: 46rem; }
/* the header's double rule and the footer's rule run the width of the text, not the screen */
body.home ig-header { border-bottom: 0; }
body.home ig-header .wrap, body.home ig-footer .wrap { position: relative; }
body.home ig-header .wrap::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0; border-bottom: 3px double var(--rule); }
body.home ig-footer .wrap { border-top: 0; }
body.home ig-footer .wrap::before { content: ""; position: absolute; left: 1rem; right: 1rem; top: 0; border-top: 1px solid var(--rule); }

/* the signed-in reader's name in the header (preview: ?view=member) */
ig-header .reader { display: none; font-family: var(--sans); font-size: 0.85rem; }
body.member ig-header .reader { display: inline; }
body.member .signin { display: none; }
body.member ig-signin-line { display: none; }

/* the Google box sits top right, just under the header, and scrolls away with it */
body.home ig-google-box { position: absolute; top: 4.9rem; bottom: auto; right: max(1rem, calc((100vw - 46rem) / 2 + 1rem)); left: auto; width: 15.5rem; }

ig-page[type="home"] { display: block; }
ig-home-section { display: block; margin-top: 2.1rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); }
ig-home-section + ig-home-section { margin-top: 4.5rem; }
ig-section-label, ig-family-label, ig-term-label {
  display: block; font-family: var(--serif); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
ig-home-title { display: block; margin: 1.6rem 0 0.4rem; font-size: 1.75rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
ig-home-sub { display: block; max-width: 27rem; color: var(--muted); font-size: 0.92rem; line-height: 1.45; }

/* what moved this quarter: six readings, three across, their links aligned along each row */
ig-home-note { display: block; margin-top: 0.75rem; font-style: italic; font-size: 0.68rem; color: var(--muted); }
ig-readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.2rem; row-gap: 2.1rem; margin-top: 2.2rem; }
ig-reading { display: flex; flex-direction: column; }
ig-reading > p { flex: 1; margin: 0 0 0.9rem; font-size: 1rem; line-height: 1.3; }
ig-reading-link { display: block; font-size: 0.7rem; font-weight: 700; line-height: 1.35; color: var(--teal); }

/* roles: the six families in three columns */
ig-families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.2rem; margin-top: 2.2rem; }
ig-family { display: block; margin-bottom: 1.6rem; }
ig-family ul { list-style: none; margin: 0.55rem 0 0; padding: 0; }
ig-family li { margin: 0 0 0.3rem; font-size: 0.85rem; line-height: 1.35; }
ig-maplink { display: block; margin-top: 1.2rem; font-size: 0.85rem; }
ig-maplink a { font-weight: 700; }

/* employers: four across, then the side entrance on its own */
ig-employers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.4rem; row-gap: 1.6rem; margin-top: 2.2rem; }
ig-employer { display: block; }
ig-employer-name { display: block; margin-bottom: 0.55rem; font-size: 0.95rem; font-weight: 700; line-height: 1.2; }
ig-employer > p { margin: 0; font-size: 0.72rem; line-height: 1.45; }
ig-side-entrance { display: block; max-width: 21rem; margin-top: 2.6rem; }
ig-side-label { display: block; margin-bottom: 0.6rem; font-style: italic; font-size: 0.68rem; color: var(--muted); }

/* membership: the ask on the left, what is free and what members get on the right */
ig-membership { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.6rem; }
ig-membership .button { margin-top: 1.2rem; }
ig-price, ig-signin-line { display: block; margin-top: 0.9rem; font-size: 0.72rem; color: var(--muted); }
ig-signin-line { margin-top: 0.5rem; }
ig-signin-line .signin { font-family: var(--serif); font-size: inherit; }
ig-membership-terms { display: block; padding-top: 2.1rem; }
ig-term { display: block; margin-bottom: 1rem; }
ig-term[kind="members"] ig-term-label { color: var(--teal); }
ig-term > p { margin: 0.2rem 0 0; font-size: 0.78rem; line-height: 1.45; }
ig-method-link { display: block; margin-top: 1.2rem; font-size: 0.75rem; }

body.home ig-footer { margin-top: 5.5rem; }

@media (max-width: 760px) {
  /* the header stacks: the name, the tagline, then Sign in and the button */
  body.home ig-header .wrap { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  body.home ig-header .tagline { order: 0; flex-basis: auto; }
  body.home ig-header nav { margin-top: 0.4rem; }
  body.home ig-google-box { top: 9.2rem; right: 1rem; width: 14.5rem; }
  ig-readings, ig-families, ig-membership { grid-template-columns: minmax(0, 1fr); }
  ig-readings { row-gap: 2.4rem; }
  ig-reading > p { font-size: 1.05rem; margin-bottom: 0.7rem; }
  ig-home-title { font-size: 1.6rem; }
  ig-employers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ig-membership-terms { padding-top: 1.8rem; }
  ig-term > p, ig-price, ig-signin-line { font-size: 0.8rem; }
}