/* Events: the hub (/events/) and each event's page (/events/<slug>/).
   Builds on the page kit and the homepage's dark .event band in site.css. */

/* ---------- sections inside the page body ---------- */
.pb-sec + .pb-sec { margin-top: 96px; }
.pb-sec .plate { margin-bottom: 32px; }
.pb-sec h2 { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.05; max-width: 18em; }
.sec-lede { margin-top: 16px; font-size: 18px; color: var(--ink-2); max-width: 34em; }
.pb-sec a:not(.link-arrow):not(.store) { color: var(--ink); text-decoration-color: var(--leaf); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* numbered notes, ruled like the homepage steps */
.notes { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.notes > li { border-top: 1.5px solid var(--ink); padding-top: 6px; }
.notes .step-n { margin: 14px 0 8px; font-size: 56px; }
.notes h3 {
  font-family: var(--display); font-weight: 600; font-variation-settings: 'opsz' 36, 'SOFT' 100;
  font-size: 25px; line-height: 1.2; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.notes p { color: var(--ink-2); max-width: 26em; }

/* ---------- the dark event band (homepage .event) on the hub ---------- */
.ev-feature { margin-top: 96px; }
.event .link-arrow { color: var(--paper); text-decoration-color: var(--leaf); }
.event .more { margin-top: 24px; }

/* ---------- past events: a blank ledger page ---------- */
.ev-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.ledger { width: 100%; border-collapse: collapse; background: var(--paper-hi); border: 1px solid #E4DACA; box-shadow: 0 18px 34px -22px rgba(70, 52, 20, 0.35); }
.ledger th {
  text-align: left; padding: 16px 20px 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1.5px solid rgba(198, 40, 40, 0.45);
}
.ledger td { padding: 18px 20px; border-bottom: 1px dashed var(--rule); height: 60px; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger-empty td {
  font-family: var(--display); font-style: italic; font-weight: 400; font-variation-settings: 'opsz' 14, 'SOFT' 100;
  font-size: 17px; line-height: 1.45; color: var(--ink-2);
}

/* ---------- slips ---------- */
.ev-slips { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.ev-slip { background: var(--paper-hi); border: 1px solid var(--rule); padding: 26px 28px 28px; }
.ev-slip h3 { font-family: var(--display); font-weight: 600; font-variation-settings: 'opsz' 36, 'SOFT' 100; font-size: 22px; }
.ev-slip p { margin-top: 10px; color: var(--ink-2); }
.ev-slip strong { color: var(--ink); font-weight: 600; }

.ev-notice { margin-top: 88px; max-width: 52rem; }
.ev-notice strong { font-weight: 600; }

/* ==========================================================================
   An event's own page
   ========================================================================== */
.eh-head { background: var(--evergreen); color: var(--paper); border-bottom: 0; padding: 40px 0 92px; }
.eh-head .crumbs ol, .eh-head .crumbs a { color: rgba(251, 248, 241, 0.78); }
.eh-head .crumbs li + li::before { color: rgba(251, 248, 241, 0.4); }
.eh-head .plate { margin-top: 28px; }
.eh-head h1 { color: var(--paper); max-width: 10em; }
.eh-head .event-dates { margin-top: 14px; }
.eh-head .lede { color: rgba(251, 248, 241, 0.9); max-width: 26em; }
.eh-head-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.eh-head .event-art { margin-top: 8px; }

/* key facts, ruled across the page */
.eh-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); }
.eh-facts > div { padding: 18px 20px 20px 0; }
.eh-facts > div + div { padding-left: 22px; border-left: 1px solid var(--rule); }
.eh-facts dt { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.eh-facts dd { margin-top: 6px; font-family: var(--display); font-weight: 560; font-variation-settings: 'opsz' 36, 'SOFT' 100; font-size: 22px; line-height: 1.2; }
.eh-facts dd span { display: block; margin-top: 4px; font-family: var(--ui); font-weight: 400; font-size: 14px; line-height: 1.4; color: var(--ink-2); }

/* the three quests as taped cards */
.eh-quests { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
.eh-quest {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper-hi); border: 1px solid #E4DACA;
  padding: 30px 26px 22px;
  box-shadow: 0 20px 36px -22px rgba(70, 52, 20, 0.45);
  transform: rotate(var(--t, 0deg));
}
.eh-quest::before {
  content: ''; position: absolute; left: 50%; top: -12px; width: 92px; height: 24px; margin-left: -46px;
  background: rgba(232, 220, 200, 0.85); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); transform: rotate(-2deg);
}
.eh-quest:nth-child(1) { --t: -1.2deg; }
.eh-quest:nth-child(2) { --t: 0.8deg; }
.eh-quest:nth-child(3) { --t: -0.5deg; }
.eh-q-name { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); }
.eh-q-goal { margin-top: 10px; font-family: var(--display); font-weight: 560; font-variation-settings: 'opsz' 36, 'SOFT' 100; font-size: 24px; line-height: 1.15; }
.eh-q-n {
  display: block; margin-bottom: 4px;
  font-style: italic; font-weight: 400; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  font-size: 92px; line-height: 0.9; color: var(--evergreen);
}
.eh-q-note { margin-top: 12px; margin-bottom: 20px; font-size: 15.5px; color: var(--ink-2); }
.eh-q-reward { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; align-items: baseline; gap: 10px; }
.eh-q-reward b { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.eh-q-reward span { font-weight: 600; font-size: 16px; }
.eh-facts + .pb-sec { margin-top: 80px; }
.eh-total { margin-top: 40px; max-width: 46em; font-size: 17px; color: var(--ink-2); padding-left: 16px; border-left: 2px solid var(--leaf); }
.eh-total strong { color: var(--ink); font-weight: 600; }

/* how you get it: the glossary beside a sketch of the Weekly tab */
.eh-get { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; }
.eh-get .glossary > div { grid-template-columns: 200px 1fr; }
.eh-get .after { margin-top: 20px; color: var(--ink-2); max-width: 36em; }
.eh-get .quest-card { width: auto; max-width: 380px; margin: 24px 0 0 auto; transform: rotate(1.5deg); }
.eh-get .quest-card .qc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.qc-tab { font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--forest); }
.qc-left { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.q .qc-left em { margin-left: 0; }
.eh-get figcaption { margin-top: 18px; text-align: right; }

/* which catches count */
.eh-counts { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: stretch; }
.eh-yes, .eh-no { padding: 26px 28px 28px; }
.eh-yes { background: var(--paper-hi); border: 1.5px solid var(--ink); box-shadow: 8px 8px 0 0 var(--sand); }
.eh-no { border: 1.5px dashed #BFB29A; }
.eh-counts h3 { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.eh-yes h3 { color: var(--forest); }
.eh-no h3 { color: var(--ink-2); }
.eh-counts p { margin-top: 12px; font-size: 18px; line-height: 1.55; }
.eh-no p { color: var(--ink-2); font-size: 17px; }
.eh-names { margin-top: 36px; max-width: 46em; color: var(--ink-2); }
.eh-names + .eh-names { margin-top: 14px; }

/* where to look */
.eh-tips { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.eh-tips > li { border-top: 1.5px solid var(--ink); padding-top: 16px; }
.eh-tips .fig { display: block; color: var(--forest); margin-bottom: 8px; }
.eh-tips h3 { font-family: var(--display); font-weight: 600; font-variation-settings: 'opsz' 36, 'SOFT' 100; font-size: 23px; line-height: 1.2; }
.eh-tips p { margin-top: 8px; color: var(--ink-2); }

/* FAQ uses the homepage's .faq-grid; the heading stays in view beside a long list */
.pb-sec .faq-head h2 { font-size: clamp(32px, 3.2vw, 46px); }
@media (min-width: 981px) { .pb-sec .faq-head { position: sticky; top: 24px; align-self: start; } }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .notes { grid-template-columns: 1fr; gap: 36px; }
  .ev-split, .eh-get, .eh-counts { grid-template-columns: 1fr; gap: 36px; }
  .ev-slips { grid-template-columns: 1fr; }
  .eh-head-grid { grid-template-columns: 1fr; gap: 44px; }
  .eh-facts { grid-template-columns: 1fr 1fr; }
  .eh-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .eh-facts > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .eh-quests { grid-template-columns: 1fr; gap: 40px; max-width: 520px; }
  .eh-get .quest-card { margin: 8px auto 0 8px; }
  .eh-get figcaption { text-align: left; }
  .eh-tips { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pb-sec + .pb-sec, .eh-facts + .pb-sec { margin-top: 72px; }
  .pb-sec h2 { font-size: 32px; }
  .notes .step-n { font-size: 48px; }
  .ev-feature { margin-top: 72px; }
  .ledger th, .ledger td { padding-left: 14px; padding-right: 14px; }
  .ev-slip { padding: 22px 20px 24px; }
  .ev-notice { margin-top: 64px; }

  .eh-head { padding: 32px 0 72px; }
  .eh-head h1 { font-size: 44px; }
  .eh-head .date-stamp { right: -4px; }
  .eh-facts { grid-template-columns: 1fr; }
  .eh-facts > div, .eh-facts > div + div { padding: 14px 0 16px; border-left: 0; }
  .eh-facts > div + div { border-top: 1px solid var(--rule); }
  .eh-q-n { font-size: 80px; }
  .eh-quest { padding: 28px 22px 20px; }
  .eh-get .glossary > div { grid-template-columns: 1fr; }
  .eh-get .quest-card { margin: 8px 4px 0 6px; }
  .eh-yes, .eh-no { padding: 22px 20px 24px; }
  .eh-yes { box-shadow: 6px 6px 0 0 var(--sand); margin-right: 6px; }
  .eh-counts p { font-size: 17px; }
  .eh-tips { grid-template-columns: 1fr; gap: 28px; }
}