/* Guidance: editorial rows. guidance.js picks one of three layouts.
   Base (no JS, narrow desktops, reduced motion on small screens): every row shows its copy and
   a static inline photo.
   Lane (.guidance--lane: fine pointer, >=1100px): labels move right and one photo frame fills
   the lane between copy and labels. .guidance--live (motion allowed) adds the reading line: the
   row at it becomes active and its photo wipes in; the frame rides the line (sticky).
   Stack (.guidance--stack: <=760px or coarse pointer, motion allowed): rows become sticky cards
   that slide over one another; the covered card shrinks and dims (--cover, scrubbed). */

.guidance-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.guidance-row {
  position: relative;
  display: grid;
  cursor: pointer;   /* the stretched link makes the whole row the target */
  grid-template-columns: clamp(44px, 6vw, 96px) minmax(0, 1fr) clamp(200px, 26vw, 380px);
  grid-template-areas:
    "num tag media"
    "num title media"
    "num body media"
    "num go media";
  grid-template-rows: auto auto auto 1fr;
  column-gap: clamp(20px, 3.4vw, 56px);
  padding: clamp(30px, 3.6vw, 52px) 0;
  border-bottom: 1px solid var(--line);
}

/* Clay rule that draws along the active row's baseline. */
.guidance-row::before {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  content: "";
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s var(--ease);
}

.guidance-row__num {
  grid-area: num;
  padding-top: .9em;
  color: var(--clay);
  font: 400 11px/1 var(--mono);
  letter-spacing: .1em;
}

.guidance-row__tag {
  grid-area: tag;
  margin-bottom: 14px;
  color: var(--muted);
}

.guidance-row__title {
  grid-area: title;
  max-width: 17ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(38px, 5.1vw, 84px);
  letter-spacing: -.04em;
  line-height: .96;
  transition: color .5s var(--ease);
}

.guidance-row__title a {
  display: block;        /* a clean rectangle for the focus ring, not a stepped inline box */
  width: fit-content;
  color: inherit;
  text-decoration: none;
}

/* Never transform the h3 or link: either would become the containing block for the
   stretched ::after and shrink the hit area. */
.guidance-row__title span {
  display: inline-block;
  text-wrap: balance;
}

/* Stretched link: the whole row is the target; the title stays the accessible name. */
.guidance-row__title a::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
}

/* Focus: the link carries the site-wide 2px clay ring, so it never depends on :has() and
   reads the same as every other link. */
.guidance-row__title a:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 6px;
}

.guidance-row__body {
  grid-area: body;
}

.guidance-row__body p {
  max-width: 520px;
  margin: 0;
  padding-top: clamp(16px, 1.6vw, 24px);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.72;
}

.guidance-row__go {
  display: inline-flex;
  align-items: center;
  align-self: end;
  gap: 10px;
  grid-area: go;
  justify-self: start;
  padding-top: 22px;
  color: var(--forest);
  font: 400 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.guidance-row__go i {
  font-style: normal;
  transition: transform .6s var(--ease);
}

.guidance-row__media {
  position: relative;
  grid-area: media;
  align-self: start;
  margin: 0;
  overflow: hidden;
  background: var(--cream-deep);
  aspect-ratio: 4 / 3;
}

.guidance-row__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guidance-row__media figcaption,
.guidance-lane__shot figcaption {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 6px 8px 5px;
  color: var(--white);
  background: rgba(14, 36, 31, .62);
  font: 400 11px/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* Hover/focus on hover-capable devices: a quiet state, no movement. Live lane mode overrides it. */
@media (hover: hover) {
  .guidance-row:hover .guidance-row__title,
  .guidance-row:focus-within .guidance-row__title {
    color: var(--forest);
  }

  .guidance-row:hover::before,
  .guidance-row:focus-within::before {
    transform: scaleX(1);
  }
}

.guidance-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px 32px;
  padding-top: clamp(28px, 3vw, 40px);
}

.guidance-foot p {
  margin: 0;
  color: var(--muted);
  font: 400 11px/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.guidance-foot__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
  color: var(--forest);
  border-bottom: 1px solid currentColor;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  transition: color .3s var(--ease), gap .5s var(--ease);
}

.guidance-foot__cta:hover {
  gap: 18px;
  color: var(--clay-dark);
}

/* ---------- Lane mode ---------- */

.guidance--lane .guidance-row {
  grid-template-columns: clamp(44px, 6vw, 96px) minmax(0, 1fr) minmax(150px, .3fr);
  grid-template-areas:
    "num title tag"
    "num body go";
  grid-template-rows: auto 1fr;
}

.guidance--lane .guidance-row__tag {
  justify-self: end;
  margin: .9em 0 0;
  text-align: right;
}

.guidance--lane .guidance-row__go {
  justify-self: end;
}

/* The in-row figures stay in the accessibility tree, in reading order, with their alt text and
   captions; the lane shows aria-hidden copies. */
.guidance--lane .guidance-row__media {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Geometry comes from guidance.js (--lane-x/-w/-h, measured against the copy and labels). */
.guidance-lane {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--lane-x, 58%);
  width: var(--lane-w, 280px);
  padding: clamp(30px, 3.6vw, 52px) 0;
  pointer-events: none;
  list-style: none;
}

.guidance-lane__frame {
  position: relative;
  height: var(--lane-h, 350px);
  overflow: hidden;
  background: var(--cream-deep);
}

/* The frame's centre rides the reading line (55%, READING_LINE in guidance.js). */
.guidance--live .guidance-lane__frame {
  position: sticky;
  top: max(calc(var(--header-h) + 24px), calc(55vh - var(--lane-h, 350px) / 2));
}

/* Arrives with the first row's reveal rather than ahead of it. */
@supports selector(:has(*)) {
  .js .guidance-lane {
    opacity: 0;
    transition: opacity .8s var(--ease) .1s;
  }

  .js .guidance-list:has(> .guidance-row.is-visible) .guidance-lane {
    opacity: 1;
  }
}

.guidance-lane__shot {
  position: absolute;
  inset: 0;
}

.guidance-lane__shot picture,
.guidance-lane__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Photo swap: the incoming shot wipes in over the ones already shown, rising when the reader
   moves down the list and falling when they move back up. guidance.js stacks shown shots by
   recency (inline z-index) and hides the lower ones only once the top one is whole, so an
   interrupted wipe never uncovers the empty frame. Hidden shots change edge instantly. */
.guidance-lane__shot:not(.is-shown) {
  clip-path: inset(100% 0 0 0);
}

.guidance-lane__frame[data-dir="up"] .guidance-lane__shot:not(.is-shown) {
  clip-path: inset(0 0 100% 0);
}

.guidance-lane__shot.is-shown {
  clip-path: inset(0);
  transition: clip-path .7s var(--ease);
}

.guidance-lane__shot img {
  transform: scale(1.06);
}

.guidance-lane__shot.is-shown img {
  transform: scale(1);
  transition: transform 1s var(--ease);
}

/* Reading-line emphasis. Quiet rows stay at 3.6:1 (large text); the active row gets the forest
   title, the clay rule and its link label. No horizontal shift: every title keeps one edge. */
.guidance--live .guidance-row:not(.is-active) .guidance-row__title {
  color: rgba(32, 37, 32, .56);
}

.guidance--live .guidance-row.is-active .guidance-row__title {
  color: var(--forest);
}

.guidance--live .guidance-row:not(.is-active)::before {
  transform: scaleX(0);
}

.guidance--live .guidance-row.is-active::before {
  transform: scaleX(1);
}

.guidance--live .guidance-row__go {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}

.guidance--live .guidance-row.is-active .guidance-row__go {
  opacity: 1;
  transform: none;
}

.guidance--live .guidance-row.is-active .guidance-row__go i {
  transform: translateX(4px);
}

/* ---------- Narrow screens (static list) ---------- */

@media (max-width: 760px) {
  .guidance-row {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas:
      "num tag"
      "title title"
      "body body"
      "media media"
      "go go";
    grid-template-rows: none;
    column-gap: 12px;
    padding: 34px 0 30px;
  }

  .guidance-row__num {
    padding-top: .2em;
  }

  .guidance-row__title {
    max-width: none;
    font-size: clamp(34px, 9.4vw, 46px);
  }

  .guidance-row__media {
    margin-top: 24px;
    aspect-ratio: 16 / 10;
  }

  .guidance-row__go {
    padding-top: 18px;
  }

  .guidance-foot {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---------- Stack mode (sticky cards) ---------- */

/* One track height for every card: when the list releases, the covered cards sit exactly
   behind the last one instead of peeking out above it. */
.guidance--stack .guidance-list {
  display: grid;
  grid-auto-rows: 1fr;
  border-top: 0;
}

.guidance--stack .guidance-row {
  position: sticky;
  top: calc(var(--header-h) + 12px + var(--stack-i, 0) * 10px);
  background-color: var(--paper);
  background-image: var(--grain-ink);
  background-size: 180px 180px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  box-shadow: 0 -18px 28px -24px rgba(14, 36, 31, .42);
  transform-origin: 50% 0;
  scale: calc(1 - var(--cover, 0) * .05);
}

.guidance--stack .guidance-row:nth-child(2) {
  --stack-i: 1;
}

.guidance--stack .guidance-row:nth-child(3) {
  --stack-i: 2;
}

.guidance--stack .guidance-row:last-child {
  border-bottom: 1px solid var(--line);
}

/* Dimming. The paper darkens toward forest while the copy darkens toward ink (and the clay
   numeral toward clay-dark), so exposed text only gains contrast as a card is covered: muted
   copy starts at 4.6:1 and climbs. Browsers without color-mix keep the scale alone. */
@supports (background-color: color-mix(in srgb, red, blue)) {
  .guidance--stack .guidance-row {
    background-color: color-mix(in srgb, var(--paper), var(--forest) calc(var(--cover, 0) * 14%));
  }

  .guidance--stack .guidance-row__tag,
  .guidance--stack .guidance-row__body p {
    color: color-mix(in srgb, var(--muted), var(--ink) calc(var(--cover, 0) * 100%));
  }

  .guidance--stack .guidance-row__num {
    color: color-mix(in srgb, var(--clay), var(--clay-dark) calc(var(--cover, 0) * 100%));
  }
}

/* The photo gets its own veil, under its caption; taps pass through to the card's link. */
.guidance--stack .guidance-row__media::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: var(--forest);
  opacity: calc(var(--cover, 0) * .22);
}

.guidance--stack .guidance-row__media figcaption {
  z-index: 1;
  pointer-events: none; /* taps fall through to the row's stretched link */
}

/* A touch tighter than the static list so a whole card fits under the header and above the
   apply bar on 375x667 and 320x640 screens (guidance.js checks the fit and falls back). */
@media (max-width: 760px) {
  .guidance--stack .guidance-row {
    grid-template-rows: auto auto 1fr auto auto; /* spare height goes under the copy */
    padding: 26px 0 22px;
  }

  .guidance--stack .guidance-row__media {
    aspect-ratio: 16 / 9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guidance-row::before,
  .guidance-row__title,
  .guidance-row__go,
  .guidance-row__go i,
  .guidance-lane,
  .guidance-lane__shot,
  .guidance-lane__shot img,
  .guidance-foot__cta {
    transition: none;
  }
}