/* ==========================================================================
   Plan a float
   Reaches were a five column table of numbers. A reach is a decision, so each
   one is a card carrying the four things that decide it: how far, how long,
   how hard it falls, and what the two ends are like to use.
   ========================================================================== */

.reach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: var(--gap-card);
  margin-top: 26px;
}

.reach {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 24px 26px 22px;
  border-radius: var(--radius-card);
  background:
    linear-gradient(168deg, rgba(99, 180, 171, .085), rgba(99, 180, 171, 0) 58%),
    var(--color-pool);
  border: 1px solid rgba(99, 180, 171, .14);
}
/* The committing reaches read differently at a glance. */
.reach--flag {
  background:
    linear-gradient(168deg, rgba(200, 86, 63, .16), rgba(200, 86, 63, 0) 58%),
    var(--color-pool);
  border-color: rgba(200, 86, 63, .3);
}

.reach__head { display: flex; flex-direction: column; gap: 5px; }
.reach__title {
  font-size: 20px;
  line-height: 1.25;
  color: var(--color-stone-bright);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.reach__title a { color: inherit; text-decoration: none; }
.reach__title a:hover { color: var(--color-glacier-bright); }
.reach__title span { color: var(--color-glacier); font-size: 16px; }
.reach__rm {
  font: 400 var(--text-mono-label) var(--font-data);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-mono-faint);
}

.reach__figures {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 14px 0 2px;
  border-top: 1px solid rgba(237, 233, 224, .12);
}
.reach__figures span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 400 9px var(--font-data);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-mono-dim);
}
.reach__figures b {
  font: 700 21px var(--font-data);
  letter-spacing: -.02em;
  color: var(--color-stone-bright);
  text-transform: none;
}

.reach__character {
  align-self: flex-start;
  font: 400 10px var(--font-data);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-glacier-bright);
  border: 1px solid rgba(99, 180, 171, .45);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
}
.reach__character.is-flag { color: var(--color-flag-tint); border-color: rgba(200, 86, 63, .55); }

.reach__ends {
  margin: 0;
  padding-top: 13px;
  border-top: 1px solid rgba(237, 233, 224, .12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reach__ends div { display: flex; flex-direction: column; gap: 3px; }
.reach__ends dt {
  font: 400 9px var(--font-data);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-mono-faint);
}
.reach__ends dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-tertiary);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.reach__mob {
  font: 400 9px var(--font-data);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-flag-tint);
  border: 1px solid rgba(200, 86, 63, .4);
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
}
.reach__mob.is-ok { color: var(--color-glacier-bright); border-color: rgba(99, 180, 171, .45); }

.reach__note {
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--color-mono-faint);
}

/* ==========================================================================
   The three fork readouts under the title
   Equal thirds here, not the 1.45fr the fork pages use, because these three
   carry the same information as each other. Stacks on a phone.
   ========================================================================== */
.plan-flows {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 var(--gap-seam) var(--gap-seam);
}

/* ==========================================================================
   See the water right now
   The camera and the paragraph explaining it were two separate boxes that
   never agreed on a height. One card now: the picture is a column of that
   card rather than a thing beside it. A spacer gives the media column a 16:9
   floor from its own width, and the image is absolutely positioned inside it,
   so whichever column is taller sets the height and the picture fills it.
   The height attributes on that <img> are presentational hints and would beat
   an aspect-ratio, which is why the height here is an explicit 100%.
   ========================================================================== */
.camcard {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  border-radius: var(--radius-card);
  overflow: hidden;
  background:
    linear-gradient(200deg, rgba(99, 180, 171, .085), rgba(99, 180, 171, 0) 58%),
    var(--color-pool);
  border: 1px solid rgba(99, 180, 171, .16);
}

.camcard__media {
  position: relative;
  margin: 0;
  background: var(--color-pool-deep);
}
.camcard__media::before { content: ""; display: block; padding-top: 56.25%; }
.camcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the bank and the water sit low in this frame - crop the treetops first */
  object-position: 50% 62%;
}

.camcard__body {
  display: flex;
  flex-direction: column;
  /* the picture is the taller thing in this card, so the copy sits optically
     centred against it rather than leaving one long void under itself */
  justify-content: center;
  gap: 12px;
  padding: 28px 30px 26px;
}
.camcard__eyebrow { font-size: 10px; }
.camcard__lede {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--color-text-tertiary);
}
.camcard__note { line-height: 1.6; }
.camcard__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 6px;
}

/* ==========================================================================
   Before you launch
   Six identical panels ranked cold water the same as a link to FRA's site.
   Three levels now: the two that can hurt you lead in raised cards carrying
   the same caution tint the committing reaches use, the logistics run as a
   numbered index under a hairline, and FRA's hub closes as further reading.
   ========================================================================== */
.launch__head { margin-bottom: 24px; }

.launch-key {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--gap-card);
}
.launch-key__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 30px 26px;
  border-radius: var(--radius-card);
  background:
    linear-gradient(158deg, rgba(200, 86, 63, .2), rgba(200, 86, 63, 0) 52%),
    var(--color-pool);
  border: 1px solid rgba(200, 86, 63, .32);
}
.launch-key__mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(200, 86, 63, .16);
  border: 1px solid rgba(200, 86, 63, .34);
  color: var(--color-flag-tint-bright);
}
.launch-key__mark svg { width: 24px; height: 24px; }
.launch-key__title {
  font-size: 23px;
  line-height: 1.2;
  color: var(--color-stone-bright);
}
.launch-key__item p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
}
.launch-key__quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.launch-key__quote blockquote { margin: 0; }

/* the number the cold-water card is really about, read off the same gauges
   as the fork cards at the top of the page */
.launch-temps {
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid rgba(237, 233, 224, .14);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.launch-temps__label { letter-spacing: .13em; }
.launch-temps ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.launch-temps li { display: flex; flex-direction: column; gap: 3px; }
.launch-temps__v {
  font: 700 21px var(--font-data);
  letter-spacing: -.02em;
  color: var(--color-stone-bright);
}

.launch-list {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  /* three, or one - a two-column run leaves the third item orphaned beside
     an empty half, which is the ragged shape this section was rebuilt to lose */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 38px;
}
.launch-list > li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(159, 224, 214, .26);
}
.launch-list__n {
  font: 400 var(--text-mono-label) var(--font-data);
  letter-spacing: .2em;
  color: var(--color-glacier);
}
.launch-list h3 {
  font-size: 19px;
  line-height: 1.25;
  color: var(--color-stone-bright);
}
.launch-list p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--color-text-tertiary);
}

.launch-more {
  margin-top: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 30px;
  flex-wrap: wrap;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--color-glacier-deep);
}
.launch-more__text { display: flex; flex-direction: column; gap: 7px; max-width: 640px; }
/* a heading for structure, set as one of the page's mono labels */
.launch-more h3 { font-family: var(--font-data); font-weight: 400; }
.launch-more p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--color-text-tertiary);
}

@media (max-width: 820px) {
  .camcard { grid-template-columns: minmax(0, 1fr); }
  .camcard__body { padding: 24px 24px 22px; }
}

@media (max-width: 900px) {
  .launch-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 700px) {
  .plan-flows { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .reach-grid { grid-template-columns: 1fr; }
  .reach { padding: 20px 18px; }
  .reach__figures { gap: 18px; }
  .reach__figures b { font-size: 18px; }

  .launch-key__item { padding: 22px 20px; gap: 12px; }
  .launch-key__title { font-size: 21px; }
  .launch-key__item p { font-size: 15.5px; }
  .launch-temps ul { gap: 18px; }
  .launch-temps__v { font-size: 18px; }
  .launch-list { gap: 22px; }
  .launch-more { margin-top: 30px; padding-left: 16px; }
}