/* COLOR PALETTE: All colors must be kept in this :root block. Use var(--...) in the rules below. */
:root {
  --ink: #173e35;
  --paper: #faf8f1;
  --lime: #e1edb7;
  --muted: #435c53;
  --focus-ring: #a34a18;
  --white: white;
  --transparent: transparent;
  --line: #ccd2c5;
  --presentation-divider: #a1ad9b;
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:18px/1.6 Arial,Helvetica,sans-serif
}

a {
  color:inherit;
  text-underline-offset:.2em
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--focus-ring);
  outline-offset:4px
}

.skip {
  position:absolute;
  top:-100px;
  left:12px;
  background:var(--white);
  padding:12px
}

.skip:focus {
  top:12px;
  z-index:10
}

.page-header {
  max-width:1160px;
  margin:auto;
  padding:30px
}

.page-header h1 {
  font:42px/1.2 Georgia,serif;
  margin:25px 0 12px
}

.page-header p {
  max-width:850px
}

.toolbar {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:24px 0
}

button,.button {
  display:inline-block;
  background:var(--ink);
  color:var(--white);
  padding:12px 18px;
  border:1px solid var(--ink);
  font:700 16px/1.4 Arial;
  min-height:48px;
  text-decoration:none;
  cursor:pointer
}

.button.secondary {
  background:var(--transparent);
  color:var(--ink)
}

.deck {
  max-width:1160px;
  margin:auto
}

.slide {
  background:var(--paper);
  margin:30px 20px;
  border:1px solid var(--line);
  padding:42px 45px
}

.wordmark {
  font-weight:700;
  font-size:17px;
  margin:0 0 38px
}

.wordmark span {
  display:block;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:12px
}

.slide h2 {
  font:44px/1.2 Georgia,serif;
  margin:0 0 28px
}

.slide h3 {
  font:28px/1.3 Georgia,serif;
  margin:0 0 24px
}

.slide p {
  margin:0 0 12px
}

.slide .lead {
  font-size:24px;
  margin-bottom:35px
}

.subtitle {
  font-size:32px;
  margin:38px 0 50px!important
}

.columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  margin-top:35px
}

.columns p,.steps p {
  font-size:23px
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  margin-top:45px
}

.time {
  font-weight:700;
  font-size:20px!important
}

.slide footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:50px;
  font-size:14px
}

.dark {
  background:var(--ink);
  color:var(--paper)
}

.dark .subtitle,.dark .lead {
  color:var(--lime)
}

details {
  border-top:1px solid var(--presentation-divider);
  margin-top:25px;
  padding-top:16px;
  font-size:17px
}

summary {
  font-weight:700;
  cursor:pointer;
  min-height:44px
}

details p {
  padding-top:14px;
  overflow-wrap:anywhere
}

.present-controls {
  background:var(--ink);
  color:var(--white);
  padding:12px 20px;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap
}

.present-controls[hidden] {
  display:none
}

.present-controls button {
  border-color:var(--paper)
}

.presenting .page-header,.presenting .speaker-notes,.presenting .slide:not(.active) {
  display:none
}

.presenting .deck {
  max-width:none
}

.presenting .slide {
  margin:0;
  border:0;
  min-height:calc(100vh - 82px);
  padding:35px 5vw
}

.presenting .slide h2 {
  font-size:clamp(32px,4vw,58px)
}

.presenting .wordmark {
  margin-bottom:25px
}

.presenting .slide footer {
  margin-top:40px
}

.instructions {
  font-size:15px
}

.screen-reader-status {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}

@media(max-width:760px) {
  .page-header {
    padding:24px
  }

  .slide {
    margin:20px 12px;
    padding:28px 22px
  }

  .slide h2 {
    font-size:32px
  }

  .columns,.steps {
    grid-template-columns:1fr;
    gap:28px
  }

  .columns p,.steps p {
    font-size:20px
  }

  .slide .lead {
    font-size:21px
  }

  .slide footer {
    font-size:12px;
    flex-wrap:wrap
  }

  .presenting .slide {
    padding:28px 24px
  }

  .presenting .slide footer {
    margin-top:28px
  }

}

@media print {
  @page {
    size:landscape;
    margin:12mm
  }

  .page-header,.speaker-notes,.present-controls,.skip {
    display:none!important
  }

  .deck {
    max-width:none
  }

  .slide,.presenting .slide {
    display:block!important;
    break-after:page;
    break-inside:avoid;
    margin:0;
    border:0;
    padding:15px;
    min-height:0;
    page-break-after:always
  }

  .slide:last-child {
    break-after:auto
  }

  .slide h2 {
    font-size:32px!important
  }

  .columns p,.steps p {
    font-size:17px
  }

  .slide h3 {
    font-size:23px
  }

  .wordmark {
    margin-bottom:20px
  }

  .slide footer {
    margin-top:30px
  }

  body {
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact
  }

}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important
  }

}

[hidden]  {
  display: none !important;
}

@media print  {
  .slide[hidden]  {
    display: block !important;
  }

}