/* The members' pages (choose your dates, my dates, letters, text terms) in the
   logo's look: Latin Modern Roman (the logo's typeface, GUST Font License),
   sage and deep sage on white, with the logo in a sage bar at the top.
   Loaded after style.css; the organizer pages don't use it. */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500&display=swap');
@font-face { font-family: 'LM Display'; src: url('/fonts/lm-display.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'LM Roman'; src: url('/fonts/lm-text.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'LM Roman'; src: url('/fonts/lm-italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }

body.member {
  --sage: #84A052; --sage-deep: #5E7A3A;
  --ground: #FFFFFF; --rule: #ECEBE6;
  --serif: 'LM Display', 'LM Roman', Georgia, serif;
  --sans: 'Work Sans', system-ui, sans-serif;
  --can: var(--sage-deep);
  background: var(--ground);
}
html:has(> body.member) { background: #FFFFFF; }

/* The sage bar with the white logo; tapping it goes to the home page. */
.brandbar { background: var(--sage); text-align: center; padding: calc(22px + env(safe-area-inset-top, 0px)) 24px 20px; }
.brandbar a { display: inline-block; color: #fff; text-decoration: none; }
.brandbar .mark { display: block; width: 132px; height: auto; }
body.member .club { display: none; }

/* Type: titles in the logo's serif, small labels spaced like "LADIES". */
body.member h1 { font-family: var(--serif); font-weight: 400; }
body.member .kicker, body.member .label { font-family: var(--serif); font-size: 12px; letter-spacing: .32em; color: var(--sage-deep); }
body.member .note, body.member em.note { font-family: 'LM Roman', Georgia, serif; }
body.member .hero { padding-top: 40px; }

/* Buttons and choices in deep sage. */
body.member .btn.solid { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
body.member .btn { border-color: var(--sage-deep); color: var(--sage-deep); }
body.member .btn.solid { color: #fff; }
body.member .choice { border-color: var(--sage-deep); }
body.member .choice.on { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
body.member .day { border-color: #C9D3B8; }
body.member .day.N { border-color: var(--rule); color: var(--muted); }
body.member .datechip { border-color: var(--sage-deep); }
body.member a { color: var(--sage-deep); }
body.member input[type=checkbox] { accent-color: var(--sage-deep); }
body.member .letter .body p { font-family: 'LM Roman', Georgia, serif; }
body.member .brandbar a { color: #FFFFFF; }