@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  :where(*, *::before, *::after) { box-sizing: border-box; }
  :where(body) { margin: 0; }
  :where(img) { max-inline-size: 100%; block-size: auto; }
  :where(button, input) { font: inherit; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --paper: oklch(98.2% 0.004 91);
    --surface: oklch(100% 0 0);
    --ink: oklch(26.7% 0.033 289);
    --muted: oklch(49.3% 0.032 294);
    --accent: oklch(46.2% 0.152 296);
    --tint: oklch(94% 0.022 303);
    --line: oklch(89% 0.018 303);
    --error: oklch(45.6% 0.155 26);
    --radius: 12px;
    --radius-s: 8px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --text-s: 0.875rem;
    --text-0: 1.0625rem;
    --text-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem);
    --text-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);
    --text-3: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    --wrap: 73.75rem;
    --header-offset: 5rem;
  }
}

@layer base {
  html { scroll-behavior: smooth; }
  body { font: var(--text-0)/1.6 system-ui, sans-serif; color: var(--ink); background: var(--paper); }
  a { color: var(--accent); text-underline-offset: 4px; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
  h1 { font-size: var(--text-3); line-height: 1.12; letter-spacing: -0.025em; margin-block: var(--space-4) var(--space-5); font-weight: 700; }
  h2 { font-size: var(--text-2); line-height: 1.25; margin-block: 0 var(--space-4); text-wrap: balance; }
  h3 { font-size: 1.375rem; line-height: 1.3; margin-block: var(--space-2); text-wrap: balance; }
  p { margin-block: 0 var(--space-4); }
  section { margin-block-end: var(--space-7); }
  [id] { scroll-margin-block-start: var(--header-offset); }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-s); line-height: 1.6; background: var(--surface); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-s); }
  code { overflow-wrap: anywhere; }
  details { border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--space-4); background: var(--surface); margin-block: var(--space-4); }
  summary { cursor: pointer; font-weight: 650; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
}

@layer layout {
  .wrap { max-inline-size: var(--wrap); inline-size: 92%; margin-inline: auto; }
  .site-header { background: var(--surface); }
  .header-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4) var(--space-5); flex-wrap: wrap; padding-block: var(--space-3); }
  .hero { padding-block: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); max-inline-size: 60rem; }
  .session { padding-block-start: var(--space-6); }
  .session-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-7); align-items: start; }
  @media (max-width: 50rem) { .session-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }
  footer { margin-block-start: var(--space-6); padding-block: var(--space-5) var(--space-6); font-size: var(--text-s); color: var(--muted); }
  .footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
  .footer-inner p { margin: 0; }
}

@layer components {
  .skip { position: absolute; inset-block-start: -60px; inset-inline-start: 12px; padding: var(--space-2); background: var(--surface); z-index: 10; }
  .skip:focus { inset-block-start: 12px; }
  .brand { flex: 1 1 26rem; max-inline-size: 39rem; font-size: 0.9375rem; line-height: 1.45; font-weight: 750; color: var(--ink); text-decoration: none; text-wrap: pretty; }
  .eyebrow { color: var(--accent); font-size: 0.8125rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
  .hero.session h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
  .lead { font-size: var(--text-1); line-height: 1.5; max-inline-size: 52rem; text-wrap: pretty; }
  .byline { color: var(--muted); font-size: 0.9375rem; }
  .small { font-size: var(--text-s); color: var(--muted); }
  .session-image { display: block; inline-size: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: var(--radius-s); }
  .session-picture { display: block; min-inline-size: 0; }
  .material-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-block-end: var(--space-4); }
  .material-group { display: inline-flex; align-items: center; gap: var(--space-2); }
  .material-group svg { inline-size: 1.2rem; block-size: 1.2rem; color: var(--accent); flex: none; }
  .ai-notice { display: inline-flex; padding: var(--space-1); border-radius: 50%; color: var(--muted); cursor: help; }
  .ai-notice svg { inline-size: 1rem; block-size: 1rem; color: inherit; }
  .material-links a { display: inline-block; padding-block: var(--space-1); font-weight: 600; }
  .material-links .pdf-link { font-size: 0.75rem; letter-spacing: 0.025em; padding-inline: var(--space-2); border-radius: var(--space-1); background: var(--tint); text-decoration: none; }
  .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-4); }
  .button { display: inline-block; padding: 0.625rem 1.125rem; border-radius: 7px; background: var(--accent); color: var(--surface); text-decoration: none; font-size: 0.9375rem; font-weight: 650; border: 1px solid var(--accent); cursor: pointer; }
  .button.secondary { background: var(--surface); color: var(--accent); }
  /* An empty marker string keeps the list semantics that list-style: none removes in Safari. */
  .resources { list-style-type: ""; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
  .resources li { overflow-wrap: anywhere; }
  .resources a { font-weight: 600; }
  .downloads { background: var(--tint); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-block-start: var(--space-4); }
  .downloads-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-2); }
  .downloads-label { font-weight: 650; font-size: var(--text-0); margin: 0; }
  .downloads .button { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
  .download-icon { inline-size: 1.1rem; block-size: 1.1rem; flex: none; }
  .activity { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin-block-start: var(--space-2); }
  .activity h4 { margin: 0; font-size: var(--text-0); line-height: 1.4; font-weight: 600; }
  .activity p { margin: 0; flex-basis: 100%; }
  .activity .resources { font-size: var(--text-s); }
  .tools { border-block-start: 1px solid var(--line); padding-block-start: var(--space-5); }
  .tool h3 { font-size: var(--text-0); margin-block: 0 var(--space-1); }
  .tool p { max-inline-size: 65ch; }
  .workflow li { margin-block-end: var(--space-4); padding-inline-start: var(--space-1); }
}

@layer utilities {
  .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media print {
  .skip { display: none; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.9em; }
  h2, h3 { break-after: avoid; }
  pre, table { break-inside: avoid; }
}