/* ---------------------------------------------------------------------------
   Press tiles: the article itself, as it was published.

   The page used to be a list of mastheads and titles, which asked a reader to
   take the coverage on trust. Each entry is now a clipping of the article --
   masthead, headline, byline and lead picture -- captured at phone width, with
   the publication's own mark and a line from the piece underneath. It follows
   the shape of the reviews page on theoaks.uk, where the coverage is shown
   rather than described.

   Every quote is verbatim from the article it is attributed to. Where one sits
   behind a paywall and could not be read, the tile carries no quote rather
   than a paraphrase -- hence .ch-press__card--bare, which is less a styling
   variant than an honesty one.
   --------------------------------------------------------------------------- */

.ch-press {
  margin-top: 2.5rem;
  text-align: left;
}

/* The two filters on the combined page: which woodland, and which kind of
   coverage. They reuse .ch-feed__btn so the buttons match what the old feed
   had. The bar sits in its own band above both sections, because the kind
   filter hides a section whole and a control cannot hide itself.

   Hiding is by the hidden attribute, set by js/press-filter.js. A section is
   display:block from the page framework and a grid item is a grid cell, so
   both need saying explicitly or a hidden one leaves a gap behind.

   The band gets its space from padding rather than margin, because it has no
   padding of its own and a margin would collapse out through it, showing a
   strip of the page behind. */
.ch-press__filters {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 3.5rem 0 0;
}

.ch-press__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  margin: 0;
}

/* Naming the group on the page keeps the buttons to a word each, which is
   what makes the row fit a phone. It also gives the group its accessible
   name, so what is read out and what is seen are the same words. */
.ch-press__filter-label {
  margin-right: .125rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  opacity: .6;
}

.ch-press__grid > li[hidden],
.ch-vid-grid > li[hidden],
.ch-awards__grid > li[hidden],
.ch-awards__group[hidden],
section[data-kind][hidden] {
  display: none !important;
}

.ch-press__grid {
  /* Four across on a wide screen, and never fewer than two, so the tiles stay
     portrait clippings rather than growing into banners. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 2rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ch-press__card {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  height: 100%;
  margin: 0;
  /* No frame around the card: the clipping already has the publication's own
     white page behind it, and a second border around that reads as a box in a
     box. The Oaks page lets the clippings sit on the background too. */
  background: none;
  border: 0;
  color: var(--accent, #3b4126);
}

/* The article as it was published, standing in for the card. */
.ch-press__clip {
  display: block;
  aspect-ratio: 412 / 740;
  overflow: hidden;
  border-radius: var(--radius--16, 1rem);
  background-color: #fff;
  box-shadow: 0 .5rem 1.5rem rgba(16, 19, 7, .16);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}

.ch-press__clip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.ch-press__clip:hover,
.ch-press__clip:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 .875rem 2rem rgba(16, 19, 7, .24);
}

.ch-press__clip:focus-visible {
  outline: 2px solid var(--accent, #3b4126);
  outline-offset: 3px;
}

.ch-press__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .5rem;
  padding: 0;
}

/* Mastheads are drawn as a mask over a colour rather than as an <img>, which
   is how the site draws its other single-colour marks, and here it is the only
   thing that works: these files were built to sit inside the awards marquee,
   where surrounding CSS coloured them. Standing alone they fail in two
   different ways -- logo-the-times.svg has fill="none" on the root and no fill
   on its paths, so it renders as nothing, and logo-evening-standard.svg has
   its paths filled #F1ECDB, cream on a cream card. A mask ignores whatever is
   inside the file and paints the silhouette in our own ink, so every masthead
   comes out the same weight and colour whatever it was drawn as.

   mask-size: contain with a left origin lets each one keep its proportions
   inside a common height, so a square roundel and a long wordmark both sit on
   the same baseline without being stretched to match. */
.ch-press__logo {
  display: block;
  width: 100%;
  max-width: 8rem;
  height: 1.125rem;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.ch-press__pub {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}

.ch-press__headline {
  margin: 0;
  font-family: var(--font-family--heading, Crimsonpro), serif;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.ch-press__headline a {
  color: inherit;
  text-decoration: none;
}

.ch-press__headline a:hover,
.ch-press__headline a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* The quote carries the weight on this page, so it is set as running text
   rather than shrunk into a caption. The rule marks it as quoted material
   without the cost of a full pull-quote treatment on every card. */
/* The year under the masthead: quiet, so it dates the cutting without
   competing with the quote beneath it. */
.ch-press__year {
  margin: .35rem 0 0;
  font-size: .875rem;
  letter-spacing: .04em;
  opacity: .6;
}

.ch-press__quote {
  margin: 0;
  padding-left: .75rem;
  border-left: 2px solid currentColor;
  opacity: .999; /* keeps the rule below from bleeding the border into the text */
}

.ch-press__quote p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.ch-press__link {
  margin-top: auto;
  padding-top: .25rem;
  color: inherit;
  font-size: 1.125rem;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.ch-press__link:hover,
.ch-press__link:focus-visible {
  text-decoration-thickness: 2px;
}

/* Said plainly on the card, so a reader is not left wondering why some have a
   quote and some do not. */
.ch-press__note {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  font-style: italic;
  opacity: .65;
}

@media screen and (max-width: 767px) {
  /* Two across rather than one: a clipping blown up to full phone width is a
     screenshot of a webpage the size of a webpage, which helps nobody. */
  .ch-press__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }

  .ch-press__headline {
    font-size: 1.25rem;
  }

  .ch-press__logo {
    max-width: 6rem;
    height: 1rem;
  }
}


/* The Dorset half sits on the moss band. Until the tiles lost their cream
   backing this did not matter -- the ink was moss on cream inside each card.
   With the clippings sitting straight on the band, moss ink lands on a moss
   ground and disappears, so everything under a clipping flips to cream here.
   The masthead follows because its mask is painted in currentColor. */
.ch-section--accent .ch-press__card {
  color: var(--brand, #efeed5);
}

.ch-section--accent .ch-press__quote {
  border-left-color: rgba(239, 238, 213, .4);
}

/* ===========================================================================
   Awards and accreditations.

   The badges are other organisations' official marks, so a card gives one a
   white ground to sit on -- the same ground the clippings have -- and leaves
   it otherwise alone: contained, never cropped, never recoloured. The four
   RIBA awards have no mark we hold, so those cards lead with the words and
   keep the same shape, rather than borrowing a badge that is not theirs.

   Groups carry data-location, so the woodland filter takes a heading away
   with its cards and never leaves one standing over nothing.
   =========================================================================== */

.ch-awards {
  margin-top: 2.5rem;
  text-align: left;
}

.ch-awards__group + .ch-awards__group {
  margin-top: 3.5rem;
}

.ch-awards__title {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  line-height: 1.25;
  text-align: center;
}

/* The name several of these were won under, kept beside the current one. */
.ch-awards__formerly {
  display: inline-block;
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  opacity: .7;
}

.ch-awards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ch-awards__item {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  height: 100%;
  margin: 0;
  /* No frame, for the same reason the clippings have none: these marks
     already carry their own edges, and a box around a box reads as one. */
  background: none;
  border: 0;
  color: var(--accent, #3b4126);
}

/* A band of fixed height for the mark, so the words start on the same line
   across a row. Two of the RIBA awards have no mark we hold -- their band
   is empty rather than borrowing a badge that names the wrong year. */
.ch-awards__badge {
  display: flex;
  align-items: flex-end;
  min-height: 10.5rem;
  margin: 0;
}

/* Height sets the size for the upright marks -- the plaques, the ribbons,
   the Green Tourism oval. The two wide ones, RIBA and the Beautiful South,
   would read as much larger at the same height simply for being wide, so a
   width cap brings them back to roughly the same weight on the page. */
.ch-awards__badge img {
  width: auto;
  max-width: 13rem;
  max-height: 10.5rem;
}

.ch-awards__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .375rem;
}

.ch-awards__kind {
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: .6;
}

.ch-awards__org {
  margin: .125rem 0 0;
  font-size: 1.125rem;
  line-height: 1.25;
}

.ch-awards__name,
.ch-awards__distinction,
.ch-awards__note,
.ch-awards__recipient,
.ch-awards__architect,
.ch-awards__source {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.45;
}

.ch-awards__distinction {
  font-weight: 600;
}

.ch-awards__note {
  opacity: .8;
}

/* What was recognised, which is not always the whole woodland. */
.ch-awards__recipient {
  font-style: italic;
  opacity: .8;
}

/* Who designed it, on the architecture awards. */
.ch-awards__architect {
  opacity: .8;
}

/* Pushed to the foot so the source lines sit level across a row. */
.ch-awards__source {
  margin-top: auto;
  padding-top: .75rem;
  font-size: .875rem;
}

.ch-awards__source a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.ch-awards__source a:hover,
.ch-awards__source a:focus-visible {
  text-decoration-thickness: 2px;
}
/* ===========================================================================
   Television and film: a still with a play button, not an iframe.

   js/press-video.js swaps the button for the player on click. Until then the
   page has asked YouTube for nothing at all -- the still is ours, served from
   images/press-video/. See that file for why.
   =========================================================================== */

.ch-vid-wrap {
  margin-top: 2.5rem;
  text-align: left;
}

.ch-vid-grid {
  /* Two across, not as many as fit. The lightbox was written because a still
     in a 240px feed column made an unwatchable player; the point of this
     section is to give each video half the container instead, which at 80rem
     is about 600px wide -- enough to watch in place. */
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 48rem) {
  /* Landscapes take as many columns as fit, so three sit on one line and
     two spread to fill it. Portraits are capped below, so their columns
     are fixed and centred rather than stretched. */
  /* Two across, not three: keeps the players watchable and puts the two
     broadcast pieces together on the first row. */
  .ch-vid-grid.is-landscapes {
    grid-template-columns: repeat(2, 1fr);
  }

  .ch-vid-grid.is-portraits {
    grid-template-columns: repeat(auto-fit, 16rem);
    justify-content: center;
  }
}

/* Two grids in one section: close the gap so they read as one run of
   tiles rather than two blocks. */
.ch-vid-grid + .ch-vid-grid {
  margin-top: 2.5rem;
}

/* The player that replaces the still on click. It keeps the still's box, so
   nothing on the page moves when it loads. A 4:3 film pillarboxes itself
   inside this 16:9 frame rather than being cropped to fill it. */
.ch-vid__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius--16, 1rem);
  background-color: #000;
}

/* A 9:16 Short at the full column width would be over 800px tall and tower
   over the landscape tiles beside it. Capped and centred, it stands about
   as tall as a 16:9 tile is wide, which keeps the row readable. The meta
   underneath stays centred on the media rather than the column. */
/* Only a portrait film needs its own shape. Every YouTube still is 16:9,
   so a landscape tile stays 16:9 and shows its still uncropped; a 1.365
   film in a 1.365 box would have the sides of its 16:9 still trimmed off.
   A Short is different: its still is the 9:16 frame padded out with a
   blurred copy, so cropping back to 9:16 recovers the real picture. */
.ch-vid.is-portrait .ch-vid__play,
.ch-vid.is-portrait .ch-vid__frame {
  aspect-ratio: var(--ch-vid-ar, 9 / 16);
}

.ch-vid.is-portrait .ch-vid__play,
.ch-vid.is-portrait .ch-vid__frame,
.ch-vid.is-portrait .ch-vid__meta,
.ch-vid.is-portrait .ch-vid__link {
  max-width: 16rem;
  margin-inline: auto;
}

.ch-vid {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  height: 100%;
}

/* The still, the frame that replaces it and the button all share one box, so
   nothing shifts when the player loads. */
.ch-vid__play {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius--16, 1rem);
  background-color: rgba(16, 19, 7, .35);
}

.ch-vid__play {
  position: relative;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}

/* The blocked-embed variant is an <a>, and an anchor is inline by default,
   so without this it would collapse and ignore the aspect-ratio above. */
a.ch-vid__play {
  display: block;
  text-decoration: none;
}

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

.ch-vid__play:hover,
.ch-vid__play:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 .75rem 1.75rem rgba(16, 19, 7, .22);
}

.ch-vid__play:focus-visible {
  outline: 2px solid var(--accent, #3b4126);
  outline-offset: 3px;
}

.ch-vid__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.25rem;
  height: 3rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* YouTube's own red only on hover; at rest the mark sits back in our palette
   so a row of stills does not read as a row of adverts. */
.ch-vid__icon-bg {
  fill: rgba(16, 19, 7, .72);
  transition: fill .2s ease;
}

.ch-vid__play:hover .ch-vid__icon-bg,
.ch-vid__play:focus-visible .ch-vid__icon-bg {
  fill: #f00;
}

.ch-vid__meta {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  margin: 0;
}

.ch-vid__title {
  font-family: var(--font-family--heading, Crimsonpro), serif;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* The masthead, drawn as a mask exactly as the article cards draw theirs,
   so a broadcaster sits in our ink rather than bringing its own brand
   colour into the row. SVG where we have one, a trimmed alpha PNG where
   the supplied logo was raster. */
/* A tile can carry two marks: the broadcaster beside the programme. */
.ch-vid__logos {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .25rem;
}

.ch-vid.is-portrait .ch-vid__logos {
  justify-content: center;
}

/* Taller than an article masthead: these marks include two-line lock-ups
   such as Married at First Sight, unreadable at the 1.125rem the cards
   use, and no quote competes with them here. The span carries no content,
   so its width has to come from the mark's own ratio or it collapses. */
.ch-vid__logo {
  display: block;
  flex: 0 0 auto;
  height: 1.75rem;
  width: auto;
  aspect-ratio: var(--ch-logo-ar, 4 / 1);
  max-width: 9rem;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* The year the programme went out. Quieter than the episode line above it,
   so the tile reads title, channel, episode, year. */
.ch-vid__year {
  font-size: .875rem;
  letter-spacing: .04em;
  opacity: .6;
}

.ch-vid__detail {
  font-size: 1rem;
  opacity: .7;
}

.ch-vid__source {
  font-size: 1rem;
  opacity: .7;
}

.ch-vid__link {
  margin-top: auto;
  color: inherit;
  font-size: 1.125rem;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.ch-vid__link:hover,
.ch-vid__link:focus-visible {
  text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ch-vid__play {
    transition: none;
  }

  .ch-vid__play:hover {
    transform: none;
  }
}

/* On the location pages the television section sits on the moss band, where
   the inherited text colour is rgb(93,92,75) -- a dark olive on a dark green,
   measured at 1.57:1, which is unreadable. Nothing in the cascade claimed
   these, so they claim themselves. The combined page keeps its cream ground
   and is unaffected. */
.ch-section--accent .ch-vid {
  color: var(--brand, #efeed5);
}

/* ===========================================================================
   The combined feed: both woodlands, articles and film together, newest first.

   Split sections made a reader hold two orders in their head at once -- which
   woodland, and which kind of coverage -- before they could see what had come
   out recently. One list in date order answers that, and the filter narrows it
   without reordering anything.
   =========================================================================== */

.ch-feed {
  margin-top: 2rem;
  text-align: left;
}

.ch-feed__filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .625rem;
  margin-bottom: .875rem;
}

.ch-feed__btn {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .5625rem 1.125rem;
  border: 1px solid rgba(59, 65, 38, .35);
  border-radius: 50em;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.ch-feed__btn:hover {
  border-color: currentColor;
}

.ch-feed__btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* aria-pressed is the state, so the styling hangs off it rather than a class
   that could drift out of step with what a screen reader is told. */
.ch-feed__btn[aria-pressed="true"] {
  background-color: var(--accent, #3b4126);
  border-color: var(--accent, #3b4126);
  color: #f1ecdb;
}

.ch-feed__count {
  font-size: 1rem;
  opacity: .65;
}

.ch-feed__btn[aria-pressed="true"] .ch-feed__count {
  opacity: .8;
}

.ch-feed__status {
  margin: 0 0 1.75rem;
  font-size: 1rem;
  text-align: center;
  opacity: .7;
}

.ch-feed__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 2rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ch-feed__item {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin: 0;
}

.ch-feed__item[hidden] {
  display: none;
}

/* Both kinds of card sit in the same portrait box so a mixed row lines up.
   The video still fills it rather than sitting letterboxed in the middle:
   contain left most of a tall card empty, which read as a broken image next to
   a clipping that fills its frame. These stills are centre-composed, so a
   centre crop keeps the subject. The player that replaces the still on click
   keeps its own 16:9, since a cropped video would be worse than a short one. */
.ch-feed__item .ch-press__clip,
.ch-feed__item .ch-vid__play {
  /* wins over --ch-vid-ar: in the mixed feed every tile is this shape */
  aspect-ratio: 412 / 740;
}

.ch-feed__item .ch-vid__play img {
  object-fit: cover;
  object-position: center;
}

.ch-feed__item .ch-vid {
  gap: .625rem;
  height: 100%;
}

/* Without this the link is pushed to the bottom of a stretched card, leaving
   a hole between the title and it. */
.ch-feed__item .ch-vid__link {
  margin-top: .125rem;
}

.ch-feed__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .375rem .5rem;
  margin: -.125rem 0 0;
  font-size: 1rem;
  line-height: 1.4;
  opacity: .7;
}

.ch-feed__where::before {
  content: "\00b7";
  margin-right: .4375rem;
}

@media screen and (max-width: 767px) {
  .ch-feed__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }

  .ch-feed__btn {
    padding: .5rem .875rem;
    font-size: 1.125rem;
  }
}

/* Two across on a phone, like the clippings above them, with a rule under
   each entry. Side by side the text sets narrow and ragged, and without the
   rule one entry's source line runs straight into the next one's label. */
@media screen and (max-width: 767px) {
  /* minmax(0, 1fr) rather than 1fr: a grid track will not go below its
     content, and the widest mark is wider than half a phone, so 1fr lets
     the second column push off the edge of the screen. */
  .ch-awards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
  }

  .ch-awards__item {
    gap: .625rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(59, 65, 38, .2);
  }

  /* The marks come down with the column: at full size one would stand taller
     than the words it belongs to. The width cap is what balances them against
     each other -- a wide mark and an upright one at the same height are not
     the same size on the page, and half a phone is too narrow for that
     difference to pass. The height cap is the looser of the two, so the
     upright marks keep a little more size than the wide ones.

     Centred rather than ranged left: the marks are all different widths, and
     lined up on their left edges the narrow ones looked adrift in the
     column. */
  .ch-awards__badge {
    justify-content: center;
    min-height: 7.25rem;
  }

  .ch-awards__badge img {
    max-width: 7.5rem;
    max-height: 7.25rem;
  }

  .ch-awards__org {
    font-size: 1rem;
  }

  .ch-awards__name,
  .ch-awards__distinction,
  .ch-awards__note,
  .ch-awards__recipient,
  .ch-awards__architect,
  .ch-awards__source {
    font-size: .875rem;
  }

  .ch-awards__title {
    font-size: 1.25rem;
  }
}

/* On a phone the group name takes its own line and the counts come off the
   buttons, which is what lets four of them sit on one row at full size. The
   counts are the first thing to go rather than the label or the type size:
   they are a nicety, where the label is what tells you which control you are
   looking at, and the type size is what keeps the pills tappable. */
@media screen and (max-width: 479px) {
  .ch-press__filter-label {
    flex-basis: 100%;
    margin: 0 0 .125rem;
    text-align: center;
  }

  .ch-press__filter {
    gap: .5rem;
  }

  .ch-feed__btn {
    padding: .5rem .8125rem;
    font-size: 1rem;
  }

  .ch-press__filter .ch-feed__count {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ch-feed__btn {
    transition: none;
  }
}


/* ===========================================================================
   The video lightbox.

   Playing in place was unwatchable: the stills sit in a grid column about
   240px wide, so the player came out around 240x135. This gives it the window
   instead, capped so it never outgrows a 16:9 frame on a tall screen.
   =========================================================================== */

.ch-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background-color: rgba(16, 19, 7, .88);
  opacity: 0;
  transition: opacity .25s ease;
}

.ch-lightbox.is-open {
  opacity: 1;
}

.ch-lightbox[hidden] {
  display: none;
}

.ch-lightbox__inner {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  width: 100%;
  /* whichever runs out first: the window's width, or the height once the
     caption has taken its share */
  max-width: min(72rem, calc((100dvh - 9rem) * 16 / 9));
}

.ch-lightbox__stage {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius--16, 1rem);
  background-color: #000;
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .5);
}

.ch-lightbox__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.ch-lightbox__caption {
  margin: 0;
  color: #f1ecdb;
  font-size: 1.125rem;
  line-height: 1.4;
  text-align: center;
  opacity: .85;
}

.ch-lightbox__close {
  position: absolute;
  top: clamp(.75rem, 2.5vw, 1.5rem);
  right: clamp(.75rem, 2.5vw, 1.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: .625rem;
  border: 0;
  border-radius: 100%;
  background-color: rgba(241, 236, 219, .12);
  color: #f1ecdb;
  cursor: pointer;
  transition: background-color .2s ease;
}

.ch-lightbox__close:hover {
  background-color: rgba(241, 236, 219, .24);
}

.ch-lightbox__close:focus-visible {
  outline: 2px solid #f1ecdb;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ch-lightbox,
  .ch-lightbox__close {
    transition: none;
  }
}

/* Two filter rows on the combined page, one on a location page. */
.ch-feed__filters {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: .875rem;
}

.ch-feed__filters .ch-feed__filter {
  margin-bottom: 0;
}

.ch-feed__empty {
  margin: 2rem 0 0;
  font-size: 1.125rem;
  text-align: center;
  opacity: .75;
}

.ch-feed__empty[hidden] {
  display: none;
}

/* Below this two columns plus the gap overshoot the screen, and a clipping
   gets too small to read anyway. */
@media screen and (max-width: 359px) {
  .ch-press__grid,
  .ch-feed__grid {
    grid-template-columns: 1fr;
  }
}