/* Hallmark · route: custom (bespoke) · structure: Handbill Column
 *   — one centred 44rem column, nothing set side-by-side, hairline-ruled blocks,
 *     the client's banner carrying the title so the page itself stays quiet.
 * idea: "a notice, not a landing page — read it top to bottom in one pass"
 * theme: custom · vibe: "pale pink notice, navy ink, institutional"
 * paper: oklch(97.7% 0.009 0) · accent: oklch(38.4% 0.157 263)
 * type: Zen Kaku Gothic New, one family site-wide
 * axes: light / roman-serif / cool ~263
 * nav: edge-aligned minimal (wordmark + one CTA, no link row) · footer: inline single rule
 * contrast: pass (40–41, verified by OKLCH→sRGB WCAG computation)
 * gates: all-pass · studied: no · context: user-provided
 */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 */

/* ============================================================
   Base
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + var(--space-md));
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.8;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

h1, h2, h3, p, ul, ol, dl, dd, dt, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

/* Component display rules must not out-specify the hidden attribute. */
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  min-width: 0;
}

a { color: inherit; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: var(--rule-thick) solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--color-tint-2);
  color: var(--color-ink);
}

.tnum { font-variant-numeric: tabular-nums; }
.sep { color: var(--color-muted); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A placeholder must look like a placeholder — never like a settled decision. */
.todo {
  display: inline-block;
  padding: 0.1em 0.5em;
  border: var(--rule-hair) dashed var(--color-tint-2);
  border-radius: var(--radius-xs);
  background: var(--color-tint-1);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ============================================================
   The single column · every block sits inside it
   ============================================================ */

.column {
  width: 100%;
  max-width: var(--column);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* ============================================================
   Buttons · rectangular, compact, no adornment on the secondary
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}
.btn--outline {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
  font-weight: 500;
}
.btn--small {
  min-height: 40px;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
}
.btn--wide { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
  .btn--outline:hover { background: var(--color-tint-1); }
}
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

@media (pointer: coarse) {
  .btn { min-height: 48px; }
}

.btn__arrow { font-size: 0.9em; }

.link {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-thickness: 2px; }
}

/* ============================================================
   Nav · edge-aligned minimal — wordmark, one action, nothing between
   ============================================================ */

.bar {
  position: sticky;
  top: 0;
  inset-inline: 0;
  z-index: var(--z-sticky-nav);
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  padding-block: var(--space-xs);
  background: color-mix(in oklch, var(--color-paper) 90%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}
.bar__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.bar__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.8125rem, calc(2.2vw + 0.45rem), 1.25rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
  /* Mobile: wrap to 2 lines so the CTA stays beside the title. */
  white-space: normal;
  text-decoration: none;
  color: var(--color-accent);
}
.bar .btn {
  flex: none;
  align-self: center;
}
@media (min-width: 40rem) {
  .bar__inner { gap: var(--space-md); }
  .bar__name { white-space: nowrap; }
}

/* ============================================================
   Hero · the client's banner does the shouting; the page whispers
   ============================================================ */

.hero { padding-block: var(--space-lg) var(--space-2xl); }

.hero__title { margin: 0; }
.hero__banner {
  width: 100%;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
}

/* Facts at a glance — one row per item on phones, one line from 40rem up.
   Stacking below 40rem avoids a separator glyph dangling at a line end. */
.facts {
  display: grid;
  gap: var(--space-3xs);
  font-weight: 500;
}
.facts > span { white-space: nowrap; }
.facts .sep { display: none; }

@media (min-width: 40rem) {
  .facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-sm);
  }
  .facts .sep { display: inline; }
}

.hero__facts {
  margin-block-start: var(--space-lg);
  padding-block: var(--space-sm);
  border-block: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-md);
}
.hero__when { font-weight: 700; }

.hero__lede {
  margin-block-start: var(--space-lg);
  max-width: var(--measure);
  color: var(--color-ink-2);
}

.hero__actions {
  margin-block-start: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.hero__note {
  margin-block-start: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ============================================================
   Blocks · heading directly above its content, one column, hairline top
   ============================================================ */

.block {
  padding-block: var(--space-xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.block__title {
  font-size: var(--text-xl);
  color: var(--color-accent);
}
.block__lede {
  margin-block-start: var(--space-sm);
  max-width: var(--measure);
  color: var(--color-ink-2);
  font-size: var(--text-base);
}

/* ---- Overview · label above value, stacked at every width ---- */

.spec { margin-block-start: var(--space-lg); }
.spec__row {
  padding-block: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
}
.spec__row:first-child { border-block-start: 0; }
.spec__key {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}
.spec__val {
  margin-block-start: var(--space-2xs);
  max-width: var(--measure);
  font-size: var(--text-md);
}
.spec__note {
  display: block;
  margin-block-start: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.spec__list {
  margin-block-start: var(--space-xs);
  padding-inline-start: 1.25em;
  list-style: disc;
}
.spec__list li {
  padding-block: 0.1em;
}
.spec__free {
  font-weight: 700;
  color: var(--color-accent);
}

/* ---- Program · talk title, then who gives it ---- */

.prog { margin-block-start: var(--space-lg); }
.prog__item {
  padding-block: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
}
.prog__item:first-child { border-block-start: 0; }
.prog__title { font-size: var(--text-lg); }
.prog__who {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-accent);
}
.prog__affil {
  display: block;
  font-weight: 400;
  color: var(--color-muted);
}
.prog__note {
  margin-block-start: var(--space-2xs);
  max-width: var(--measure);
  font-size: var(--text-base);
  color: var(--color-ink-2);
}

/* ---- Speakers · stacked one column; photo beside bio within each row ---- */

.speakers {
  margin-block-start: var(--space-lg);
  display: grid;
  gap: 0;
}
.speaker {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding-block: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
}
.speaker:first-child { border-block-start: 0; }
.speaker__photo {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-tint-1);
}
.speaker__affil {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.6;
}
.speaker__name {
  margin-block: var(--space-2xs) var(--space-xs);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.35;
}
.speaker__name small {
  display: inline-block;
  margin-inline-start: 0.5em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
}
.speaker__bio {
  max-width: var(--measure);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

/* ============================================================
   Entry · the one job of the page
   ============================================================ */

.entry {
  padding-block: var(--space-xl) var(--space-2xl);
  border-block-start: var(--rule-thick) solid var(--color-accent);
  background: var(--color-tint-1);
}
.entry__title {
  font-size: var(--text-2xl);
  color: var(--color-accent);
}
.entry__lede {
  margin-block-start: var(--space-sm);
  max-width: var(--measure);
  color: var(--color-ink-2);
}
.entry__when {
  margin-block-start: var(--space-md);
  font-size: var(--text-sm);
  font-weight: 700;
}
.entry__when .sep { font-weight: 400; }

/* The one accent-fill CTA — about half the previous full-width banner. */
.entry__banner {
  margin-block-start: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: min(100%, 22rem);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}
.entry__banner-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
  overflow-wrap: anywhere;
}
.entry__banner-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: 1.3;
}
.entry__banner-note {
  font-size: var(--text-xs);
}
.entry__banner-arrow {
  flex-shrink: 0;
  font-size: var(--text-lg);
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .entry__banner:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
}
.entry__banner:active { transform: translateY(1px); }

.entry__aside {
  margin-block-start: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
#form-banner-todo { margin-block-start: var(--space-lg); }

/* ============================================================
   Footer · one ruled line of credits, no columns
   ============================================================ */

.foot {
  padding-block: var(--space-lg) var(--space-xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
/* One credit per line, so a label never wraps away from its value. */
.foot__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
}
.foot__line + .foot__line { margin-block-start: var(--space-2xs); }
.foot__line > span { white-space: nowrap; }
.foot__label {
  font-weight: 700;
  color: var(--color-muted);
}
.foot__contact { margin-block-start: var(--space-sm); }
.foot__legal {
  margin-block-start: var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .btn:active { transform: none; }
}

/* ============================================================
   Print — the notice is often forwarded internally as a PDF
   ============================================================ */

@media print {
  .bar { display: none; }
  body { background: none; }
  .entry { background: none; }
  .entry__banner { border-width: var(--rule-thick); }
  .block, .entry { break-inside: avoid; }
}