/* ── Directions page ── */
/* Read one-handed, standing in a lobby, on a phone. Every choice here favours
   that over the desktop view: big photos, short lines, nothing to hunt for. */
body.directions-page {
  background: #f5f1eb;
  min-height: 100vh;
  margin: 0;
}

.dir-wrap {
  max-width: 620px;
  margin: 3rem auto 4rem;
  background: white;
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  padding: 2.5rem 2.5rem 3rem;
}

/* ── Address ── */
.dir-address {
  text-align: center;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #eee;
}

.dir-address-line {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--green-dark);
}

.dir-building {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-top: 0.6rem;
}

.dir-map {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--green-dark);
  text-decoration: none;
  border: 1px solid rgba(27,67,50,0.35);
  border-radius: 99px;
  padding: 0.6rem 1.4rem;
  transition: background 0.15s, color 0.15s;
}
.dir-map:hover { background: var(--green-dark); color: white; }

.dir-intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: #555;
  text-align: center;
  margin: 1.75rem 0 0.5rem;
}

/* ── Steps ── */
.dir-steps {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dir-step {
  padding: 2rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.dir-step--last { border-bottom: none; padding-bottom: 0.5rem; }

/* The number and the instruction ride together, so the text wraps in a column
   beside the number rather than under it. */
.dir-step-head {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.dir-num {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--green-dark);
  color: white;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Optical centring: the digit sits high in its own line box. */
  line-height: 1;
  padding-top: 0.05rem;
}

.dir-text {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: #1a1a1a;
  /* Aligns the first line of text with the middle of the number beside it. */
  padding-top: 0.2rem;
}

.dir-text strong { font-weight: 600; color: var(--green-dark); }

.dir-figure { margin: 0; }

/* Most of these are portrait, and a portrait photo at full column width runs
   taller than the phone screen it is being read on. Capping the height keeps
   one step to roughly one screen, so scrolling tracks walking. */
.dir-figure img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 3px;
  /* A photo that has not loaded still holds its place and reads as a gap in the
     directions rather than as a broken page. */
  background: #ece7de;
  min-height: 4rem;
}

/* ── Link to the other route ── */
/* The two walks share their first three steps and part at the gym, so each page
   ends by pointing at the other rather than leaving it to be searched for. */
.dir-crosslink {
  display: block;
  margin-top: 2.5rem;
  padding: 1.75rem;
  background: #f8f4ec;
  border: 1px solid rgba(201,168,76,0.4);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.dir-crosslink:hover { background: #f4eddc; border-color: rgba(201,168,76,0.75); }

.dir-crosslink-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  font-weight: 600;
  color: #a8862f;
  margin-bottom: 0.45rem;
}

.dir-crosslink-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--green-dark);
  line-height: 1.15;
  margin-bottom: 0.4rem;
}

.dir-crosslink-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #6a6a6a;
}

.dir-foot {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: #777;
  text-align: center;
  margin-top: 2.5rem;
}

/* ── Responsive ── */
@media (max-width: 560px) {
  /* Edge to edge on a phone: the photos are the page, and a card inset just
     shrinks them. */
  .dir-wrap {
    margin: -1rem 0 3rem;
    border-radius: 0;
    padding: 2rem 1.25rem 2.5rem;
  }
  .dir-address-line { font-size: 1.3rem; }
  .dir-crosslink { padding: 1.5rem 1.25rem; }
  .dir-step { padding: 1.5rem 0; }
}