/* AI 101 course page, plus the small AI 101 band on the home page.
   Course rules are scoped to body.ai101 so linking this file from the home page changes nothing there.
   Warm paper, ink, one deep-green accent. Body is 20px+, tap targets 56px+. */

@font-face { font-family: "Boska"; src: url("/fonts/boska-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Boska"; src: url("/fonts/boska-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

body.ai101 {
  --paper: #f6f1e7; --ink: #1c1c1c; --line: #1c1c1c; --accent: #2f4f2f; --accent-ink: #f6f1e7; --tint: #e7e0cf;
  --face: "Boska", "Iowan Old Style", Georgia, serif;
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: Georgia, "Iowan Old Style", serif; font-size: 1.25rem; line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
.ai101 *, .ai101 *::before, .ai101 *::after { box-sizing: border-box; }
.ai101 main { max-width: 42rem; margin: 0 auto; padding: 0 20px 72px; }
.ai101 h1, .ai101 h2 { font-family: var(--face); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.ai101 h1 { font-size: clamp(3.5rem, 18vw, 6rem); }
.ai101 h2 { font-size: clamp(2rem, 8vw, 2.75rem); margin-bottom: 16px; }
.ai101 p, .ai101 ul, .ai101 ol, .ai101 dl, .ai101 dd { margin: 0; padding: 0; }
.ai101 p + p, .ai101 h2 + p { margin-top: 14px; }
.ai101 a { color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.ai101 a:hover { color: var(--ink); }
.ai101 a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.ai101 section, .ai101 .about { margin-top: 64px; padding-top: 32px; border-top: 2px solid var(--line); }

.ai101 .skip { position: absolute; left: 20px; top: -100px; background: var(--ink); color: var(--paper); padding: 14px 18px; z-index: 10; }
.ai101 .skip:focus { top: 10px; color: var(--paper); }

.ai101 .top { padding-top: 24px; }
.ai101 .top__home { font-family: var(--face); font-size: 1.25rem; margin-bottom: 40px; }
.ai101 .top__home a { color: var(--ink); text-decoration: none; display: inline-block; padding: 14px 0; }
.ai101 .top__promise { font-family: var(--face); font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.3; margin-top: 16px; }

.ai101 .facts { margin-top: 32px; border-top: 2px solid var(--line); }
.ai101 .facts div { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.ai101 .facts dt { font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; }
.ai101 .facts dd { font-size: 1.25rem; }

.ai101 .join { margin-top: 32px; }
.ai101 .join__button {
  display: flex; align-items: center; justify-content: center; min-height: 72px; width: 100%;
  background: var(--accent); color: var(--accent-ink); text-decoration: none;
  font-family: var(--face); font-weight: 500; font-size: 1.75rem; padding: 12px 20px; text-align: center;
}
.ai101 .join__button:hover { background: var(--ink); color: var(--paper); }
.ai101 .join__button--quiet { margin-top: 28px; background: transparent; color: var(--accent); border: 3px solid var(--accent); }
.ai101 .join__note { margin-top: 12px; font-size: 1.125rem; }
.ai101 .join--end { margin-top: 40px; }

.ai101 .timeline { margin-top: 24px; border-top: 2px solid var(--line); list-style: none; }
.ai101 .timeline li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ai101 .timeline__time { font-family: var(--face); font-size: 1.75rem; line-height: 1.1; }
.ai101 .timeline__time small { font-family: Georgia, serif; font-size: 1rem; }
.ai101 .timeline__what b { display: block; font-family: var(--face); font-weight: 500; font-size: 1.5rem; line-height: 1.2; margin-bottom: 4px; }

.ai101 .plain { list-style: none; display: grid; gap: 18px; margin-top: 20px; }
.ai101 .plain li { padding-left: 22px; border-left: 6px solid var(--accent); }
.ai101 .plain--num { counter-reset: n; }
.ai101 .plain--num li { counter-increment: n; }
.ai101 .plain--num li::before { content: counter(n) ". "; font-family: var(--face); font-weight: 500; }

.ai101 .more { display: inline-flex; align-items: center; min-height: 56px; font-weight: 700; margin-top: 8px; }

.ai101 .tools { list-style: none; margin-top: 20px; border-top: 2px solid var(--line); }
.ai101 .tools li { border-bottom: 1px solid var(--line); padding: 8px 0 16px; }
.ai101 .tools a { display: flex; align-items: center; min-height: 56px; font-family: var(--face); font-weight: 500; font-size: 1.75rem; }
.ai101 .tools span { display: block; }

.ai101 .about a[href^="mailto"], .ai101 .about p a { display: inline-block; padding: 14px 0; }

/* Home page band (home page links this file too) */
.ai-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  background: #c8c5ba; color: #1c1c1c; padding: 32px clamp(16px, 2.1vw, 30px);
}
.ai-band__kicker { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 6px; }
.ai-band__title { font-family: "Boska", Georgia, serif; font-weight: 500; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.1; margin: 0; letter-spacing: -.01em; }
.ai-band__note { margin: 8px 0 0; font-size: 1.125rem; max-width: 40ch; }
.ai-band__link {
  display: inline-flex; align-items: center; min-height: 56px; padding: 0 28px;
  background: #1c1c1c; color: #f1f1ef; text-decoration: none; font-weight: 500; font-size: 1.125rem;
}
.ai-band__link:hover { background: #3a3a3a; color: #f1f1ef; }
.ai-band__link:focus-visible { outline: 3px solid #1c1c1c; outline-offset: 3px; }