/* The public front page: a small society for nut enthusiasts. */

@font-face { font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/young-serif-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/karla-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/karla-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/karla-latin-700-normal.woff2') format('woff2'); }

:root {
  --paper: #edf0da;
  --paper-deep: #e2e7c8;
  --ink: #33241a;
  --ink-soft: #5e4a3a;
  --pecan: #8b5a2b;
  --pistachio: #93a85c;
  --pistachio-deep: #5f7434;
  --almond: #f5e6cc;
  --shell: #d3c4a2;
  --error: #a23b2a;
  --serif: 'Young Serif', Georgia, serif;
  --sans: 'Karla', system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--pistachio-deep); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--pistachio-deep); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { width: min(1080px, 100%); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---------- top bar ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 22px; padding-bottom: 22px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand svg { width: 28px; height: 40px; flex: none; }
.brand span { font-family: var(--serif); font-size: 24px; line-height: 1; white-space: nowrap; }
.top nav { display: flex; gap: 22px; font-weight: 500; }
.top nav a { color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.top nav a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 640px) {
  .top nav a:not(.members-link) { display: none; }
  .brand span { font-size: 21px; }
  .brand svg { width: 22px; height: 32px; }
  .wrap { padding-left: 18px; padding-right: 18px; }
}

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 40px;
  padding-top: 28px;
  padding-bottom: 56px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  max-width: 13ch;
}
.hero p { margin: 0 0 14px; max-width: 46ch; color: var(--ink-soft); font-size: 19px; }
.hero .aside { font-size: 16px; color: var(--pecan); }
.still-life { width: 100%; height: auto; display: block; }
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 12px; padding-bottom: 36px; }
  .still-life { max-width: 520px; margin: 0 auto; }
}

/* ---------- club notes ---------- */
.notes {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-top: 40px;
  padding-bottom: 56px;
  border-top: 2px solid var(--ink);
}
.notes h2, .members h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 12px;
}
.notes p { margin: 0 0 12px; color: var(--ink-soft); }
.notes ul { margin: 0; padding: 0; list-style: none; color: var(--ink-soft); }
.notes li { padding: 8px 0; border-bottom: 1px solid var(--shell); }
.notes li:last-child { border-bottom: 0; }
.notes li b { color: var(--ink); font-weight: 700; }
.month {
  background: var(--almond);
  border-radius: 18px;
  padding: 26px 26px 20px;
  position: relative;
}
.month .kicker { font-weight: 700; color: var(--pecan); font-size: 15px; margin: 0 0 4px; }
.month svg { position: absolute; right: 18px; top: -26px; width: 92px; height: auto; transform: rotate(-12deg); }
@media (max-width: 900px) { .notes { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- members ---------- */
.members {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 40px;
  align-items: start;
  padding-top: 48px;
  padding-bottom: 72px;
  border-top: 2px solid var(--ink);
}
.members p { color: var(--ink-soft); margin: 0 0 12px; max-width: 44ch; }
.signin {
  background: #fbf6ea;
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 6px 6px 0 var(--pistachio);
  display: grid;
  gap: 16px;
}
.signin h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-size: 16px; }
.field input {
  font: inherit; color: var(--ink);
  background: #fff; border: 2px solid var(--shell); border-radius: 10px;
  padding: 11px 12px;
}
.field input:focus { outline: none; border-color: var(--pistachio-deep); box-shadow: 0 0 0 3px rgba(147, 168, 92, 0.35); }
.hint { font-size: 14px; color: var(--ink-soft); }
.error-text { color: var(--error); font-size: 15px; min-height: 1.4em; margin: 0; font-weight: 500; }
.notice-text {
  margin: 0; padding: 10px 12px;
  background: #eef2dc; border: 2px solid var(--pistachio); border-radius: 10px;
  font-size: 15px; line-height: 1.45; color: var(--ink);
}
.notice-text b { font-weight: 700; }
.signin button {
  font: inherit; font-weight: 700; font-size: 18px;
  color: var(--paper); background: var(--ink);
  border: 0; border-radius: 10px; padding: 13px; cursor: pointer;
  transition: background 0.15s, transform 0.08s;
}
.signin button:hover { background: #4a3626; }
.signin button:active { transform: translateY(1px); }
.signin button:disabled { opacity: 0.55; cursor: wait; }
@media (max-width: 820px) { .members { grid-template-columns: 1fr; gap: 20px; } }

footer {
  padding-top: 22px; padding-bottom: 40px;
  border-top: 1px solid var(--shell);
  font-size: 15px; color: var(--ink-soft);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}