/* Hallmark · genre: editorial · macrostructure: Long Document · design-system: design.md · designed-as-app
 * Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 */

/* ---------- long-document rhythm ---------- */
main section .wrap{max-width:calc(66ch + 80px)}
main .contact-grid{grid-template-columns:1fr}
section{padding:var(--space-3xl) 0;position:relative}
.section-flush{padding-top:0}
main p{line-height:1.7}

/* section heads set inline in the flow — short bold phrases, no eyebrow tags */
.doc-head{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-lg);line-height:1.15;letter-spacing:0;
  color:var(--color-ink);margin-bottom:var(--space-lg);
}
.doc-head .r{color:var(--color-accent)}

/* ---------- document title block (quiet page opening) ---------- */
.guide-head{padding:calc(var(--space-3xl) + var(--space-2xl)) 0 var(--space-2xl)}
.guide-head h1{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(var(--text-xl),4vw + .5rem,var(--text-3xl));
  line-height:1.15;letter-spacing:0;color:var(--color-ink);
}
.guide-head h1 .r{color:var(--color-accent)}
.guide-head .lead{max-width:62ch;color:var(--color-muted);font-size:var(--text-base);margin-top:var(--space-md);line-height:1.7}

/* ---------- generic data tables (container-query stacked-card pattern) ---------- */
.table-wrapper{overflow:auto;max-inline-size:100%;container-type:inline-size}
table.g{width:100%;border-collapse:collapse;border-top:1px solid var(--color-rule-strong)}
table.g th{
  font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;
  color:var(--color-muted);text-align:left;padding:var(--space-xs) var(--space-sm);
  border-bottom:1px solid var(--color-rule-strong);
}
table.g td{padding:var(--space-sm);border-bottom:1px solid var(--color-rule);font-size:var(--text-sm);line-height:1.65;vertical-align:top}
table.g tr:last-child td{border-bottom:none}
table.g td:first-child{font-weight:600;white-space:nowrap}
table.g td.num{font-weight:700;color:var(--color-accent);white-space:nowrap;font-variant-numeric:tabular-nums}
table.g tbody tr{transition:background-color var(--dur-short) var(--ease-out)}
table.g tbody tr:hover{background:var(--color-paper-2)}

@container (width < 600px){
  table.g, table.g tbody, table.g tr, table.g td{display:block}
  table.g thead{display:none}
  table.g{border-top:none}
  table.g tr{margin-block-end:var(--space-sm);border:1px solid var(--color-rule);background:var(--color-surface)}
  table.g td{border-bottom:none;padding:var(--space-2xs) var(--space-sm);white-space:normal}
  table.g td:first-child{font-size:var(--text-base);padding-top:var(--space-sm)}
  table.g td[data-h]::before{
    content:attr(data-h) ": " / attr(data-h);
    display:block;font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;
    color:var(--color-muted);margin-bottom:var(--space-3xs);
  }
  table.g td:last-child{padding-bottom:var(--space-sm)}
}

.sched-cap{margin-top:var(--space-sm);color:var(--color-muted);font-size:var(--text-sm)}

/* ---------- memo entries: levels ledger + registration steps ---------- */
.steps{border-top:1px solid var(--color-rule-strong)}
.step{
  display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:var(--space-sm) var(--space-lg);
  align-items:baseline;padding:var(--space-lg) 0;border-bottom:1px solid var(--color-rule);
}
.step .no{
  font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;
  color:var(--color-muted);font-variant-numeric:tabular-nums;
}
.step h3{font-family:var(--font-display);font-weight:700;font-size:var(--text-md);line-height:1.15;margin-bottom:var(--space-3xs)}
.step p{color:var(--color-muted);font-size:var(--text-sm)}

/* level meta: age / team-size lines stay red */
.lvl-meta{
  font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;
  color:var(--color-accent);font-variant-numeric:tabular-nums;
  margin:0 0 var(--space-2xs);
}

/* ---------- dash-led notes list ---------- */
.notes{list-style:none;border-top:1px solid var(--color-rule-strong)}
.notes li{
  position:relative;padding:var(--space-sm) 0 var(--space-sm) var(--space-lg);
  border-bottom:1px solid var(--color-rule);
  color:var(--color-muted);font-size:var(--text-sm);line-height:1.7;
}
.notes li::before{content:"—";position:absolute;left:0;top:var(--space-sm);color:var(--color-accent);font-size:var(--text-sm)}

/* ---------- closing CTA band (registration is the decisive action) ---------- */
.g-cta{
  background:linear-gradient(160deg,var(--color-accent),var(--color-accent-deep));
  padding:var(--space-2xl) var(--space-xl);text-align:center;color:var(--color-accent-ink);
}
.g-cta h2{
  font-family:var(--font-display);font-weight:900;
  font-size:var(--text-2xl);line-height:1.15;letter-spacing:0;color:var(--color-accent-ink);
}
.g-cta p{color:oklch(from var(--color-accent-ink) l c h / 0.9);max-width:52ch;margin:var(--space-sm) auto var(--space-lg)}
.btn-light{background:var(--color-accent-ink);color:var(--color-accent)}
.btn-light:hover{background:transparent;border-color:var(--color-accent-ink);color:var(--color-accent-ink)}
.g-cta .note{font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;color:oklch(from var(--color-accent-ink) l c h / 0.8);margin-top:var(--space-md)}
.g-cta .note a{color:var(--color-accent-ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- organizer logos + official doc banner ---------- */
.org-logos{display:flex;align-items:center;gap:var(--space-xl);flex-wrap:wrap}
.org-logos img{height:56px;width:auto;object-fit:contain}
.doc-band{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-lg);flex-wrap:wrap;
  border:1px solid var(--color-rule-strong);padding:var(--space-lg);background:var(--color-surface);
  margin-top:var(--space-xl);
}
.doc-band h3{font-family:var(--font-display);font-weight:700;font-size:var(--text-md);line-height:1.15;margin-bottom:var(--space-2xs)}
.doc-band p{color:var(--color-muted);font-size:var(--text-sm);max-width:56ch}

@media(max-width:640px){
  section{padding:var(--space-2xl) 0}
  .guide-head{padding:calc(var(--space-2xl) + var(--space-xl)) 0 var(--space-xl)}
  .step{grid-template-columns:1fr;gap:var(--space-2xs);padding:var(--space-md) 0}
  .g-cta{padding:var(--space-xl) var(--space-md)}
  .org-logos{gap:var(--space-md)}
  .org-logos img{height:44px}
  .doc-band{padding:var(--space-md)}
}