/* templates.css -- GENERATED, do not edit.
   generated-by:: projects-tools-studio-engine-workbench-powershell-build-templates-css@3
   source:: this studio's components\ -- edit a template's own {block}.css there
   One sheet concatenated from every template's own {block}.css.
   Re-run after adding, removing or restyling a template. */

/* components/wpm-cards-section-alpha */
/* --- four cards: the detail slide behind a chapter slide ---
   Two by two rather than a row of four, because a card here carries two or
   three sentences and a quarter-width column would set them in a column of
   four words. No colour is set: the card tokens and the section's background
   class own that. --- */
.wpm-cards-section-alpha {
  min-block-size: 100svh;
  display: grid;
  align-items: center;
}
.wpm-cards-section-alpha__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
.wpm-cards-section-alpha__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.wpm-cards-section-alpha__lead {
  max-inline-size: var(--text-l-max-width);
  font-size: var(--text-l);
}
.wpm-cards-section-alpha__grid {
  display: grid;
  grid-template-columns: var(--grid-auto-2);
  gap: var(--grid-gap);
  /* ACSS ?list-none recipe body -- 4.x answers lists with a RECIPE rather than
     a utility class, so this is the framework rule applied to our own block */
  list-style: none;
  padding-inline-start: 0;
  margin-block: 0;
}
/* No filled surface. A pale card on a dark slide fought the text instead of
   supporting it, so the cards are separated by a rule and by space -- which
   also keeps them readable when the projector flattens everything. */
.wpm-cards-section-alpha__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-inline-start: var(--space-s);
  border-inline-start: var(--border-width) solid currentColor;
}
/* The card title carries no rule at all: it is an h3, and the element defaults
   already size, weight and space it. Writing font-size here is what made it
   smaller than the text underneath. */
.wpm-cards-section-alpha__card-text {
  font-size: var(--text-m);
}

/* components/wpm-compare-section-alpha */
/* --- two markup samples, side by side ---
   The panels sit on card surfaces so the code reads as an exhibit rather than
   as part of the slide. The code is allowed to scroll sideways: wrapping a
   class attribute makes the comparison unreadable, which is the opposite of
   the point. Font size is deliberately below the slide scale -- this is meant
   to be pointed at, not read from the back row. --- */
.wpm-compare-section-alpha__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.wpm-compare-section-alpha__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.wpm-compare-section-alpha__lead {
  max-inline-size: var(--text-l-max-width);
  font-size: var(--text-l);
}
.wpm-compare-section-alpha__grid {
  display: grid;
  grid-template-columns: var(--grid-auto-2);
  gap: var(--grid-gap);
  align-items: start;
}
/* Outlined, not filled: a light panel inside a bg--dark section inherits the
   section's light text and the code disappears. The border does the same job. */
.wpm-compare-section-alpha__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--card-padding);
  border: var(--border-width) solid currentColor;
  border-radius: var(--card-radius);
  margin: 0;
}
.wpm-compare-section-alpha__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.7;
}
.wpm-compare-section-alpha__code {
  overflow-x: auto;
  font-size: var(--text-s);
  margin: 0;
}
.wpm-compare-section-alpha__note {
  max-inline-size: var(--text-l-max-width);
  font-size: var(--text-l);
  line-height: 1.4;
  border-inline-start: var(--border-width) solid currentColor;
  padding-inline-start: var(--space-s);
}

/* components/wpm-link-item-alpha */
/* --- one source, ready to be opened live ---
   Label and reason sit on separate lines, so the link stays a big target on a
   beamer and the note does not compete with it. Colour comes from the section's
   background class, not from here. --- */
.wpm-link-item-alpha {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-xs) / 2);
  padding-block: var(--space-xs);
  border-block-end: var(--border-width) solid currentColor;
}
.wpm-link-item-alpha__link {
  font-size: var(--text-l);
}
.wpm-link-item-alpha__note {
  font-size: var(--text-s);
  opacity: 0.7;
}

/* components/wpm-links-section-alpha */
/* --- the sources slide ---
   Two columns when there is room, because a list of a dozen links in one column
   scrolls off a projected slide. No fixed height: this is the one section in
   the deck that may be longer than the screen. --- */
.wpm-links-section-alpha__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.wpm-links-section-alpha__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.wpm-links-section-alpha__lead {
  max-inline-size: var(--text-l-max-width);
  font-size: var(--text-l);
}
/* no marker: every entry already begins with a link that carries the eye */
.wpm-links-section-alpha__list {
  display: grid;
  grid-template-columns: var(--grid-auto-2);
  gap: var(--space-s) var(--grid-gap);
  /* ACSS ?list-none recipe body -- 4.x answers lists with a RECIPE rather than
     a utility class, so this is the framework rule applied to our own block */
  list-style: none;
  padding-inline-start: 0;
  margin-block: 0;
}

/* components/wpm-point-item-alpha */
/* --- one point on a slide ---
   The marker is drawn rather than a list-style, so it keeps its size and its
   distance from the text when the slide is projected large. currentColor, so
   it follows whatever background class the section carries. --- */
.wpm-point-item-alpha {
  position: relative;
  font-size: var(--text-m);
  padding-inline-start: var(--space-m);
}
.wpm-point-item-alpha::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  inline-size: var(--space-xs);
  block-size: var(--space-xs);
  background: currentColor;
  opacity: 0.55;
}

/* components/wpm-quote-section-alpha */
/* --- quote slide: one sentence, nothing else on the screen ---
   The blockquote itself is NOT styled here. The framework already gives it its
   flex column, its gap, its padding, its left accent bar and the type of the
   paragraph and the footer inside it -- all through --blockquote-* tokens in
   base-tokens\17-blockquotes.css, which is where this project's quote design
   lives. Re-selecting the element here would fork that.
   What remains is the one thing no token covers: how wide the column may get,
   and that the whole thing sits centred in the band. --- */
.wpm-quote-section-alpha {
  position: relative;
  overflow: hidden;
  min-block-size: 100svh;
  display: grid;
  align-items: center;
}
/* Same decoration as the slide, quieter: a quote is one sentence on an empty
   screen, so the pattern may be felt rather than seen. Named per page in the
   content file, so the same eleven files serve both components. */
.wpm-quote-section-alpha__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0.07;
  pointer-events: none;
}
.wpm-quote-section-alpha::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in oklch, var(--bg-ultra-dark) 76%, transparent);
  pointer-events: none;
}
.wpm-quote-section-alpha__container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.wpm-quote-section-alpha__quote {
  max-inline-size: var(--text-xxl-max-width);
}

/* components/wpm-slide-section-alpha */
/* --- talk slide: one chapter per page, sized to be read from the back row ---
   The section fills the viewport so a click lands on a full slide rather than
   half of two. No colour is set anywhere: bg--dark owns the relationship, and a
   colour written here would disable it. The points themselves are a part and
   carry their own stylesheet. --- */
.wpm-slide-section-alpha {
  position: relative;
  overflow: hidden;
  min-block-size: 100svh;
  display: grid;
  align-items: center;
}
/* Each chapter names its own pattern in its content file, so the deck varies
   without a second component and without a class per page. It is decoration:
   empty alt, hidden from assistive technology, and it never takes a click. */
.wpm-slide-section-alpha__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0.1;
  pointer-events: none;
}
/* A scrim between the pattern and the words. A projector washes out contrast
   that looks fine on a monitor, and a pattern that competes with the text wins
   every time. The colour is mixed FROM the surface token, so the veil follows
   the background class instead of introducing a colour of its own. */
.wpm-slide-section-alpha::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in oklch, var(--bg-dark) 72%, transparent);
  pointer-events: none;
}
.wpm-slide-section-alpha__container {
  position: relative;
  z-index: 2;
}
.wpm-slide-section-alpha__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.wpm-slide-section-alpha__kicker {
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.7;
}
.wpm-slide-section-alpha__lead {
  max-inline-size: var(--text-l-max-width);
  font-size: var(--text-l);
}
/* role="list" keeps the semantics that removing the marker would otherwise
   cost in Safari. The point carries its own drawn marker. */
.wpm-slide-section-alpha__points {
  max-inline-size: var(--text-m-max-width);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-block-start: var(--space-xs);
  /* ACSS ?list-none recipe body -- 4.x answers lists with a RECIPE rather than
     a utility class, so this is the framework rule applied to our own block */
  list-style: none;
  padding-inline-start: 0;
  margin-block: 0;
}
/* the line to remember -- set off by a rule rather than by a colour, so it
   survives every theme and both backgrounds */
.wpm-slide-section-alpha__note {
  max-inline-size: var(--text-l-max-width);
  font-size: var(--text-l);
  border-inline-start: var(--border-width) solid currentColor;
  padding-inline-start: var(--space-s);
  margin-block-start: var(--space-xs);
}

/* components/wpm-stecker-section-alpha */
/* --- the plug, drawn ---
   Three assistants on the left, the agreed protocol in the middle, the site on
   the right. The row wraps on a narrow screen, so the same markup survives a
   laptop screen and a beamer. The logo files carry their own brand colours,
   which is why the tiles are card-coloured and nothing is recoloured here. --- */
.wpm-stecker-section-alpha {
  min-block-size: 100svh;
  display: grid;
  align-items: center;
}
.wpm-stecker-section-alpha__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
.wpm-stecker-section-alpha__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.wpm-stecker-section-alpha__lead {
  max-inline-size: var(--text-l-max-width);
  font-size: var(--text-l);
}
.wpm-stecker-section-alpha__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
}
.wpm-stecker-section-alpha__models {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  /* ACSS ?list-none recipe body -- 4.x answers lists with a RECIPE rather than
     a utility class, so this is the framework rule applied to our own block */
  list-style: none;
  padding-inline-start: 0;
  margin-block: 0;
}
/* Outlined rather than filled. A pale tile inside a bg--dark section would get
   the section's LIGHT text colour on a near-white surface -- the flip is doing
   its job, and a fill here is what breaks it. */
.wpm-stecker-section-alpha__tile,
.wpm-stecker-section-alpha__target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--card-padding);
  border: var(--border-width) solid currentColor;
  border-radius: var(--card-radius);
  min-inline-size: 9rem;
}
.wpm-stecker-section-alpha__logo {
  block-size: var(--space-l);
  inline-size: auto;
}
/* Two of the five marks ship as black paths with no fill of their own, so on a
   dark band they are invisible. Inverting the image is the one way to recolour
   an <img>, and white-on-dark is how both are normally shown. */
.wpm-stecker-section-alpha__logo[src$="chatgpt.svg"],
.wpm-stecker-section-alpha__logo[src$="openai.svg"] {
  filter: invert(1);
}
.wpm-stecker-section-alpha__label {
  font-size: var(--text-m);
}
/* the middle piece: a labelled connector rather than an arrow glyph, so it
   reads the same in every font */
.wpm-stecker-section-alpha__plug {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-block: var(--space-xs);
  padding-inline: var(--space-s);
  border: var(--border-width) dashed currentColor;
  border-radius: var(--card-radius);
}
.wpm-stecker-section-alpha__plug-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.wpm-stecker-section-alpha__caption {
  max-inline-size: var(--text-l-max-width);
  font-size: var(--text-s);
  opacity: 0.75;
}

/* pattern: cpt-pages\home\agenda.css */
/* --- the click-through index: every chapter reachable from the title slide,
   so the talk can jump instead of running only forwards --- */
.home__agenda-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
/* the numbers are written into the markup, so the list's own numbering would
   print them twice */
.home__agenda-list {
  display: grid;
  grid-template-columns: var(--grid-auto-3);
  gap: var(--grid-gap);
  /* ACSS ?list-none recipe body -- 4.x answers lists with a RECIPE rather than
     a utility class, so this is the framework rule applied to our own block */
  list-style: none;
  padding-inline-start: 0;
  margin-block: 0;
}
.home__agenda-item {
  display: flex;
}
/* outlined like every other tile in the deck -- a filled card inside a bg--dark
   section would take the section's light text colour onto a pale surface */
.home__agenda-link {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  inline-size: 100%;
  padding: var(--card-padding);
  border: var(--border-width) solid currentColor;
  border-radius: var(--card-radius);
  text-decoration: none;
  transition: var(--transition);
}
.home__agenda-link:hover,
.home__agenda-link:focus-visible {
  transform: translateY(-2px);
}
.home__agenda-number {
  font-size: var(--text-s);
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}
.home__agenda-label {
  font-size: var(--text-m);
  line-height: 1.35;
}

/* pattern: cpt-pages\home\hero.css */
/* --- title slide: the first thing on the beamer, centred and nothing else --- */
/* the dot grid is an authored SVG in assets\media\patterns\ -- it carries its
   own colour, so this rule stays free of one and the slide keeps responding to
   its background class */
.home__hero {
  min-block-size: 100svh;
  display: grid;
  align-items: center;
  background-image: url("assets/media/patterns/brockmann-beethoven-arcs.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.home__hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-s);
}
.home__hero-event {
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.7;
}
.home__hero-subtitle {
  max-inline-size: var(--text-xl-max-width);
  font-size: var(--text-xl);
}
.home__hero-speaker {
  font-size: var(--text-s);
  opacity: 0.7;
  padding-block-start: var(--space-m);
}