/* The photo guide.
 *
 * One layout problem shapes this file: the photographs do not exist yet. The
 * page has to be worth reading before a single one of them lands, has to stop
 * being a page of broken-image icons the moment one is missing, and has to
 * need no edit here when the real files arrive — dropping a JPEG into
 * site/assets/guide/ is the whole deployment step (guide.js swaps the box for
 * the picture, and never the other way round).
 *
 * So a shot is a figure holding both states: the <img> the person is meant to
 * see, and a dashed slot that says which photograph is missing and what it
 * must show. The dashed box is deliberately not decorative — it is a brief,
 * and it reads as one.
 */

.guide-lede { max-width: 44rem; }

/* Steps are numbered slabs down one column: the eye goes photo, words, photo,
   words, which is the order the hands work in. */
.gstep { border-top: 2px solid var(--ink); padding-top: 0.9rem; margin-top: clamp(2.2rem, 5vw, 3.4rem); }
.gstep:first-of-type { margin-top: 1.6rem; }
.gstep-head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 0.55rem; }
.gstep-num {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--seal); flex: none; padding-top: 0.35em;
}
.gstep-head h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); }
.gstep-head h2 .en { font-size: 0.52em; }
.gstep-where {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin-left: auto; flex: none;
}
.gstep-lede { margin-bottom: 1rem; }
.gstep-lede .en { display: block; color: var(--ink-3); font-size: 0.86em; margin-top: 0.25rem; }

/* Two shots side by side where a step really is two moments (the hold and the
   screen that follows it); one wide shot everywhere else. */
.shots { display: grid; gap: 1.1rem; margin: 1.2rem 0 1.3rem; }
@media (min-width: 46rem) {
  .shots.two { grid-template-columns: 1fr 1fr; }
}

.shot { margin: 0; }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); background: #fff;
}
.shot.is-missing img { display: none; }

/* The brief. Visible only in place of a photograph that is not there — and
   carrying enough for somebody to go and take it without reading this page's
   source. */
.shot-ph { display: none; }
.shot.is-missing .shot-ph {
  display: block;
  border: 2px dashed var(--rule); background: var(--paper-2);
  padding: 1.15rem 1.25rem;
}
.shot-ph-label {
  display: block; font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 0.45rem;
}
.shot-ph-what { display: block; font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); }
.shot-ph-what .en { display: block; color: var(--ink-3); font-size: 0.88em; margin-top: 0.2rem; }
.shot-ph-file {
  display: block; margin-top: 0.6rem;
  font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3);
}

.shot figcaption { font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); margin-top: 0.5rem; }
.shot figcaption .en { display: block; color: var(--ink-3); font-size: 0.9em; margin-top: 0.15rem; }

.gstep-list { padding-left: 1.35rem; margin: 0 0 1rem; }
.gstep-list li { margin-bottom: 0.6rem; }
.gstep-list li:last-child { margin-bottom: 0; }
.gstep-list li::marker { font-family: var(--mono); font-size: 0.82em; color: var(--seal); }
.gstep-list .en { display: block; color: var(--ink-3); font-size: 0.86em; margin-top: 0.15rem; }