/* CropNow, Blog: "Heard beyond the field".
 *
 * Coverage of CropNow, newest first, as leaves on a stem that grows down the
 * page. Nothing is boxed in.
 */

body.page-blog {
  background: var(--chalk);
}

.dot {
  color: var(--green);
}

/* -- The Blog's two parts --------------------------------------------------------------
 * Stories and Gallery, as a quiet two-way switch at the top of both pages;
 * the open one is filled in forest green.
 */
.b-tabs {
  display: inline-flex;
  gap: .25rem;
  padding: .3rem;
  border: 1px solid rgb(13 59 9 / .14);
  border-radius: 999px;
  background: rgb(255 255 255 / .7);
}

.b-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.2rem;
  border-radius: 999px;
  color: var(--forest);
  font: 600 .92rem/1 var(--font-text);
  text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease);
}

.b-tabs__tab span {
  min-width: 1.7rem;
  padding: .2rem .4rem;
  border-radius: 999px;
  background: rgb(66 146 62 / .14);
  color: var(--green);
  font-size: .75rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.b-tabs__tab:hover {
  background: rgb(66 146 62 / .1);
}

.b-tabs__tab[aria-current="page"] {
  background: var(--forest);
  color: var(--chalk);
}

.b-tabs__tab[aria-current="page"] span {
  background: rgb(248 250 247 / .18);
  color: var(--chalk);
}

/* -- Hero -----------------------------------------------------------------------
 * Text beside "the echo": CropNow's mark at the centre of rings that spread
 * outwards like sound, one for each kind of coverage and carrying the names
 * of its publishers, turning slowly. A ripple keeps leaving the centre.
 */

.b-hero {
  display: grid;
  justify-items: center;
  gap: clamp(1rem, 3vh, 2rem);
  width: min(76rem, 100vw - 2 * var(--gutter));
  margin: 0 auto;
  padding: calc(var(--header-h) + clamp(.5rem, 2vh, 1.5rem)) 0 clamp(2rem, 5vh, 3.5rem);
  text-align: center;
}

.b-hero__text {
  display: grid;
  justify-items: center;
  width: 100%;
}

.b-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  margin: 0;
  color: var(--green);
  font: 600 .8rem/1.2 var(--font-text);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.b-title {
  margin: .8rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 1rem + 7vw, 8.4rem);
  font-weight: 900;
  line-height: .88;
}

.b-lead {
  max-width: 34rem;
  margin: 1.2rem auto 0;
  color: rgb(13 59 9 / .8);
  font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem);
  line-height: 1.6;
}

.b-count {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 0;
  margin: 2rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgb(13 59 9 / .16);
}

.b-count div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 clamp(1.4rem, 4vw, 3.4rem);
}

.b-count div + div {
  border-left: 1px solid rgb(13 59 9 / .16);
}

.b-count dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.8rem + 1.6vw, 3.4rem);
  font-weight: 900;
  line-height: 1;
}

.b-count dt {
  color: rgb(13 59 9 / .7);
  font-size: .85rem;
}

.echo {
  position: relative;
  width: min(100%, 40rem, 62vh);
  justify-self: center;
}

.echo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.echo__ripple {
  fill: none;
  stroke: var(--green);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: echo-ripple 7.5s ease-out infinite;
}

.echo__ripple--2 { animation-delay: 2.5s; }
.echo__ripple--3 { animation-delay: 5s; }

@keyframes echo-ripple {
  0% { scale: 1; opacity: .5; }
  100% { scale: 4.2; opacity: 0; }
}

.echo__ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: echo-spin var(--spin) linear infinite;
}

.echo__ring.is-reverse {
  animation-direction: reverse;
}

.echo__ring:hover {
  animation-play-state: paused;
}

@keyframes echo-spin {
  to { rotate: 360deg; }
}

.echo__line {
  fill: none;
  stroke: rgb(13 59 9 / .22);
  stroke-width: 1.2;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}

.echo__text {
  fill: var(--forest);
  font: italic 400 15px Georgia, "Times New Roman", serif;
}

.echo__ring--campus .echo__text { fill: #a27718; }
.echo__ring--feature .echo__text { fill: var(--clay); }
.echo__ring--news .echo__text { fill: var(--green); }
.echo__ring--gov .echo__text { fill: #3f7d97; }

/* The key: which ring is which, in the ring's own colour. */
.echo__key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.4rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.echo__key li::before {
  content: "";
  display: inline-block;
  width: .6rem;
  height: .6rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: currentColor;
}

.echo__key--campus { color: #a27718; }
.echo__key--feature { color: var(--clay); }
.echo__key--news { color: var(--green); }
.echo__key--gov { color: #3f7d97; }

[data-motion="paused"] .echo__ring,
[data-motion="paused"] .echo__ripple {
  animation-play-state: paused;
}

/* -- Filters ------------------------------------------------------------------------ */

.b-body {
  width: min(72rem, 100vw - 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(2.5rem, 6vh, 4rem) 0 clamp(4rem, 10vh, 6rem);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.filter {
  padding: .55rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: rgb(197 209 181 / .45);
  color: var(--forest);
  font: 600 .95rem/1 var(--font-text);
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}

.filter:hover {
  background: rgb(197 209 181 / .85);
}

.filter[aria-pressed="true"] {
  background: var(--forest);
  color: var(--chalk);
}

/* -- The stem ---------------------------------------------------------------------- */

.stem {
  --x: 2.4rem; /* Where the stem runs, from the left. */
  position: relative;
  margin: clamp(2.5rem, 6vh, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.stem::before {
  content: "";
  position: absolute;
  top: .6rem;
  bottom: 2.4rem;
  left: var(--x);
  width: 3px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--green), #2c6a2c 70%, var(--clay));
}

.stem__month {
  position: relative;
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

/* Each month is a node on the stem, with its name beside it. */
.stem__date {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin: 0 0 1.4rem;
  padding-left: calc(var(--x) + 1.6rem);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
}

.stem__date::before {
  content: "";
  position: absolute;
  top: .2em;
  left: var(--x);
  width: 1.1rem;
  height: 1.1rem;
  margin-left: -.55rem;
  border: 3px solid var(--green);
  border-radius: 50%;
  background: var(--chalk);
}

.stem__date small {
  color: var(--clay);
  font-family: var(--font-text);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.stem__stories {
  display: grid;
  gap: clamp(2rem, 5vh, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A story is a leaf off the stem: a small leaf on the stem, the story beside it. */
.story {
  position: relative;
  padding-left: calc(var(--x) + 2.6rem);
}

.story::before {
  content: "";
  position: absolute;
  top: .3rem;
  left: var(--x);
  width: 1.5rem;
  height: 1rem;
  border-radius: 0 100% 0 100%;
  background: rgb(66 146 62 / .35);
  transform-origin: 0 100%;
  transition: background-color .3s var(--ease), scale .5s var(--ease);
}

.story:hover::before,
.story:focus-within::before {
  background: var(--green);
  scale: 1.15;
}

.story--gov::before { background: rgb(92 150 175 / .45); }
.story--feature::before { background: rgb(185 110 76 / .45); }
.story--campus::before { background: rgb(217 164 65 / .5); }

.story article {
  max-width: 46rem;
}

.story__meta {
  margin: 0;
  color: rgb(13 59 9 / .6);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.story__kind {
  color: var(--green);
}

.story--gov .story__kind { color: #3f7d97; }
.story--feature .story__kind { color: var(--clay); }
.story--campus .story__kind { color: #a27718; }

.story__outlet {
  margin: .5rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem);
  font-style: italic;
  line-height: 1.2;
}

.story__outlet span {
  color: rgb(13 59 9 / .65);
  font-size: .75em;
}

.story__title {
  margin: .4rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem);
  font-weight: 900;
  line-height: 1.02;
  text-wrap: balance;
}

.story__title a {
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(var(--green), var(--green)) 0 100% / 0 3px no-repeat;
  transition: background-size .4s var(--ease), color .3s var(--ease);
}

.story__title a:hover,
.story__title a:focus-visible {
  background-size: 100% 3px;
}

.story__summary {
  margin: .8rem 0 0;
  color: rgb(0 0 0 / .82);
  font-size: 1.05rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.story__quote {
  margin: 1rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--clay);
}

.story__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + .7vw, 1.8rem);
  font-weight: 900;
  line-height: 1.05;
}

.story__links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  margin: 1rem 0 0;
}

.story__read,
.story__also {
  color: var(--forest);
  font-size: .95rem;
  font-weight: 700;
  text-underline-offset: .25em;
}

.story__also {
  color: rgb(13 59 9 / .7);
  font-weight: 600;
}

.story__read:hover,
.story__also:hover {
  color: var(--green);
}

/* The stem ends in the seed it grew from. */
.stem__seed {
  position: relative;
  padding-left: calc(var(--x) + 1.6rem);
  color: var(--clay);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.stem__seed::before {
  content: "";
  position: absolute;
  top: -.1rem;
  left: var(--x);
  width: .9rem;
  height: 1.2rem;
  margin-left: -.45rem;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #e5c07b;
  box-shadow: 0 0 0 2px var(--clay);
}

/* Wide screens: the stem down the middle, stories alternating either side. */
@media (min-width: 960px) {
  .stem {
    --x: 50%;
  }

  .stem__date {
    justify-content: center;
    padding: 2.4rem 0 0;
    text-align: center;
  }

  .stem__date::before {
    top: 0;
  }

  .stem__date span {
    padding: 0 .4rem;
    background: var(--chalk);
  }

  .stem__date small {
    padding-right: .4rem;
    background: var(--chalk);
  }

  /* Two columns either side of the stem: newest on the right, the next on
   * the left a little lower, so the stories interleave down the page. */
  .stem__stories {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    column-gap: 6.8rem;
    row-gap: clamp(2.5rem, 6vh, 4rem);
  }

  .story {
    grid-column: 2;
    padding: 0;
  }

  .story::before {
    left: -3.4rem;
  }

  .stem__stories > .story:nth-child(even) {
    grid-column: 1;
    margin-top: 7rem;
    text-align: right;
  }

  .stem__stories > .story:nth-child(even)::before {
    right: -3.4rem;
    left: auto;
    border-radius: 100% 0 100% 0;
    transform-origin: 100% 100%;
  }

  .stem__stories > .story:nth-child(even) article {
    margin-left: auto;
  }

  .stem__stories > .story:nth-child(even) .story__quote {
    padding: 0 1rem 0 0;
    border-right: 3px solid var(--clay);
    border-left: 0;
  }

  .stem__stories > .story:nth-child(even) .story__links {
    justify-content: flex-end;
  }

  .stem__seed {
    padding: 2rem 0 0;
    text-align: center;
  }

  .stem__seed::before {
    top: 0;
  }
}

.b-empty {
  margin: 2rem 0 0;
  color: rgb(13 59 9 / .7);
}

/* -- Foot ---------------------------------------------------------------------------- */

.b-foot {
  margin-top: clamp(4rem, 10vh, 6rem);
}

.b-foot h2 {
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.8rem);
  font-weight: 900;
  line-height: 1;
}

.b-foot ul {
  display: grid;
  gap: 1.2rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .b-foot ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .b-foot ul {
    grid-template-columns: repeat(4, 1fr);
  }
}

.b-foot a {
  display: grid;
  gap: .2rem;
  padding-top: .8rem;
  border-top: 2px solid rgb(66 146 62 / .35);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .3s var(--ease);
}

.b-foot a:hover {
  border-top-color: var(--green);
}

.b-foot b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}

.b-foot span {
  color: rgb(13 59 9 / .75);
  font-size: .95rem;
}

.b-tip {
  margin: 2rem 0 0;
  color: rgb(13 59 9 / .75);
}

.b-tip a {
  color: var(--forest);
  font-weight: 700;
}

/* -- Reveal, and filtering ------------------------------------------------------------- */

[data-reveal].is-armed {
  transition: opacity .9s var(--ease), transform 1s var(--ease);
}

[data-reveal].is-armed:not(.is-in) {
  opacity: 0;
  transform: translateY(1.5rem);
}

[data-reveal].is-armed:not(.is-in)::before {
  scale: 0;
}

.story[hidden],
.stem__month[hidden] {
  display: none;
}

[data-motion="paused"] [data-reveal].is-armed:not(.is-in) {
  transform: none;
}