/* Global Card Grid Layouts */
.skill-cards,
.talk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* Shared Card Style */
.card {
  background: #f9f9f9;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  text-align: left;
}

.card:hover {
  transform: scale(1.03);
  background-color: #f0f8ff;
}

/* Specific to talks: slightly smaller shadow, no image */
.talk-grid .card {
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Optional: bold title line */
.card strong {
  font-size: 1.1rem;
  display: block;
  margin-bottom: 0.25rem;
}

/* Talk titles are <h2>s (for the page outline and screen readers), styled to
   match the bold title line above. The #quarto-content ID lifts this above
   Quarto's "#quarto-content section:first-of-type h2:first-of-type" rule,
   which would otherwise add a top margin to every card's title. */
#quarto-content .talk-grid .card h2.talk-title {
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
  color: inherit;
  /* 0.25rem plus one 1.5-line-height blank line: the old bold title was
     followed by a <br> that left an empty line before the description. */
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0;
}

.workshop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.workshop-item {
  text-align: center;
}

.workshop-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.workshop-item img:hover {
  transform: scale(1.10);
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
}

.book-card {
  background: #f9f9f9;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
  text-align: center;
}

.book-card:hover {
  transform: scale(1.03);
  background-color: #f0f8ff;
}

.book-cover {
  max-width: 200px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
  margin-bottom: 0.75rem;
}

.book-text {
  text-align: left;
}

.about-photo {
  float: left;
  width: 300px;
  margin: 0 1.5rem 1rem 0;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.two-col {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}
.two-col > div {
  flex: 1 1 47%;
  min-width: 360px;
}
img.rounded {
  border-radius: 50%;
  max-width: 100%;
  height: auto;
}

/* ── Home page hero ── */
.home-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
  justify-content: space-between;
  margin-top: 1rem;
}
.home-intro { flex: 1 1 50%; min-width: 340px; }
.home-roles {
  flex: 1 1 42%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Clean circular headshot, constrained so it never dominates on mobile */
.home-photo {
  width: 240px;
  height: 240px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  margin-bottom: 1rem;
}

.home-name {
  font-size: 2.4rem;
  line-height: 1.15;
  margin: 0.25rem 0 0.35rem;
}

.home-tagline {
  color: #0C6B57;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
  margin-bottom: 1.25rem;
}

/* Primary call-to-action button */
.btn-cta {
  display: inline-block;
  background: #0C6B57;
  color: #fff !important;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none !important;
  margin-top: 0.75rem;
  transition: background 0.18s ease, transform 0.18s ease;
}
.btn-cta:hover { background: #0a5546; transform: translateY(-1px); }

/* Role navigation cards */
.role-card {
  display: block;
  background: #f9f9f9;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-left: 3px solid #23A882;
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.role-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  background: #f0f8f5;
}
/* The role titles are real <h2>s, so they show up in the page outline and
   screen readers can jump between them. Reset Quarto's h2 size, weight,
   margins, and underline so the cards look as they did. */
.role-card h2.role-title {
  display: block;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.5;
  color: #0C6B57;
  margin: 0 0 0.3rem;
  padding: 0;
  border: 0;
}
.role-desc {
  display: block;
  color: #333;
  font-size: 0.92rem;
  line-height: 1.55;
}
.role-more {
  display: inline-block;
  margin-top: 0.6rem;
  color: #0C6B57;
  font-weight: 500;
  font-size: 0.88rem;
}
.role-card:hover .role-more { text-decoration: underline; }

/* ── Readable line length ──
   Pages with page-layout: full stretch text up to 1135px, over 110 characters
   a line. Cap running text near 70 characters instead. In 17px Roboto, 56ch
   measures about 72 characters a line, because "0" (the glyph ch is based on)
   is wider than the average letter. */
main.content p,
main.content li,
#title-block-header .description {
  max-width: 56ch;
}
/* About: make each paragraph its own block formatting context, so its box sits
   entirely beside the floated photo instead of running underneath it. Without
   this, lines that wrap below the photo span the full paragraph box. Only on
   wider screens: on a narrow one the box beside the 300px photo is a sliver,
   and flow-root would keep the whole paragraph in it. */
@media (min-width: 768px) {
  main.content p:has(> .about-photo) ~ p {
    display: flow-root;
  }
}

@media (max-width: 600px) {
  .home-photo {
    width: 180px;
    height: 180px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .home-name { font-size: 1.95rem; text-align: center; }
  .home-tagline { text-align: center; }
}

/* Cookie notice as a compact corner card. Quarto's "simple" style is the
   smallest it offers, but the consent library sizes it at max-width 50% with
   3rem padding and a 24px title, so on desktop it covered the bottom of the
   right half of the home page. The doubled class outranks the library's
   rules, which it injects at runtime after this file. Both buttons keep the
   same size and color, since consent is express. */
.termsfeed-com---nb.termsfeed-com---nb-simple {
  max-width: min(22rem, calc(100% - 2rem));
  right: 1rem;
  bottom: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
.termsfeed-com---nb.termsfeed-com---nb-simple .cc-nb-main-container {
  padding: 1rem 1.25rem;
}
.termsfeed-com---nb.termsfeed-com---nb-simple .cc-nb-title {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}
.termsfeed-com---nb.termsfeed-com---nb-simple .cc-nb-text {
  font-size: 0.85rem;
  line-height: 1.45;
  margin-bottom: 0.75rem;
}
.termsfeed-com---nb.termsfeed-com---nb-simple .cc-nb-okagree,
.termsfeed-com---nb.termsfeed-com---nb-simple .cc-nb-reject,
.termsfeed-com---nb.termsfeed-com---nb-simple .cc-nb-changep {
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
}
.termsfeed-com---nb.termsfeed-com---nb-simple .cc-nb-okagree,
.termsfeed-com---nb.termsfeed-com---nb-simple .cc-nb-reject {
  background-color: #0C6B57;
}