/* 使用说明 - the video guide beside the same steps in words.

   One column of episodes. Each is a cover on the left and its steps on the
   right, stacked on a phone. Colours are the site's own: the maroon of the
   navbar for headings, the reading-page cream for the cards, the logo's green
   for what can be pressed. */
.guide {
  margin: 0 auto;
  max-width: 1080px;
  padding: 0 16px 48px;
  text-align: left;
}

.guide {
  counter-reset: guide-ep;
}

.guide__head {
  padding: 18px 0 4px;
}

.guide__title {
  color: #4e0d0d;
  font-size: 1.6em;
  margin: 0;
}

.guide__lead {
  color: #5d554b;
  line-height: 1.7;
  margin: 8px 0 12px;
}

.guide__top {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
}

/* The playlist: a quiet outlined button beside the title, marked as leaving the site. */
.guide__yt {
  align-items: center;
  background: #fffdf5;
  border: 1px solid #c9d3b8;
  border-radius: 999px;
  color: #33501f;
  display: inline-flex;
  font-size: 0.95em;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 16px;
  text-decoration: none;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

.guide__yt .fa-youtube {
  color: #b3261e;
  font-size: 1.15em;
}

.guide__yt-out {
  fill: none;
  height: 0.8em;
  opacity: 0.7;
  stroke: currentColor;
  stroke-width: 1.4;
  width: 0.8em;
}

.guide__yt:hover {
  background: #f1ecd9;
  border-color: #41602a;
}

.guide__yt:focus-visible {
  outline: 2px solid #41602a;
  outline-offset: 2px;
}

/* The contents: one group per part, each episode a numbered row of its own so
   the list can be scanned down instead of read across. The numbers run through
   all the parts and match the ones on the cards below. */
.guide__jump {
  background: #fffdf5;
  border: 1px solid #e6dcc8;
  border-radius: 12px;
  counter-reset: guide-jump;
  padding: 6px 18px 12px;
}

.guide__jump-group + .guide__jump-group {
  border-top: 1px solid #eee6d4;
  margin-top: 8px;
}

.guide__jump-name {
  color: #4e0d0d;
  font-size: 0.95em;
  font-weight: 600;
  margin: 12px 0 4px;
}

.guide__jump-list {
  column-gap: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(316px, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.guide__jump-list li {
  counter-increment: guide-jump;
}

.guide__jump a {
  align-items: baseline;
  border-radius: 8px;
  color: #33501f;
  display: flex;
  gap: 0.6em;
  line-height: 1.5;
  margin: 0 -8px;
  padding: 7px 8px;
  text-decoration: none;
  transition: background-color 0.15s;
}

.guide__jump a::before {
  color: #8a6a1f;
  content: counter(guide-jump, decimal-leading-zero);
  flex: none;
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}

.guide__jump a:hover {
  background: #f1ecd9;
}

.guide__jump a:focus-visible {
  background: #f1ecd9;
  outline: 2px solid #41602a;
  outline-offset: 1px;
}

.guide__part-title {
  color: #4e0d0d;
  font-size: 1.2em;
  margin: 28px 0 4px;
}

.guide-ep {
  background: #fffdf5;
  border: 1px solid #e6dcc8;
  border-radius: 12px;
  margin: 14px 0 0;
  padding: 16px 18px 18px;
  /* a jump link lands with the title clear of the top edge */
  scroll-margin-top: 16px;
}

.guide-ep {
  counter-increment: guide-ep;
}

.guide-ep__title::before {
  color: #8a6a1f;
  content: counter(guide-ep, decimal-leading-zero);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  margin-right: 0.6em;
}

.guide-ep__title {
  color: #2f2a22;
  font-size: 1.12em;
  margin: 0 0 12px;
}

.guide-ep__body {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

/* no video yet: the steps take the whole card */
.guide-ep__body > .guide-ep__steps:only-child {
  grid-column: 1 / -1;
}

.guide-ep__video {
  aspect-ratio: 16 / 9;
  background: #2a3324;
  border-radius: 10px;
  overflow: hidden;
}

.guide-ep__video iframe,
.guide-ep__play,
.guide-ep__play img {
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

.guide-ep__play {
  background: none;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.guide-ep__play img {
  object-fit: cover;
}

/* The play mark sits in the cover's one empty corner, right of the episode
   number, so it hides none of the title; it names YouTube as where the video plays. */
.guide-ep__play-mark {
  align-items: center;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgb(60 50 20 / 25%);
  color: #2b2b2b;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 7px;
  padding: 8px 14px 8px 12px;
  position: absolute;
  right: 6%;
  top: 23%;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.guide-ep__play-mark .fa-youtube {
  color: #e02a20;
  font-size: 22px;
}

.guide-ep__play:hover .guide-ep__play-mark,
.guide-ep__play:focus-visible .guide-ep__play-mark {
  box-shadow: 0 3px 10px rgb(60 50 20 / 35%);
  transform: translateY(-1px);
}

.guide-ep__play:focus-visible {
  outline: 3px solid #b98d3c;
  outline-offset: 2px;
}

.guide-ep__steps {
  color: #3a352d;
  line-height: 1.75;
  list-style: decimal;
  margin: 0;
  padding-left: 1.4em;
}

.guide-ep__steps li {
  list-style: inherit;
}

.guide-ep__steps li + li {
  margin-top: 6px;
}

@media (max-width: 760px) {
  .guide__jump a {
    padding: 11px 8px;
  }

  .guide-ep__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-ep__play-mark {
    transition: none;
  }
}