/* ==========================================================================
   Tribe Aura — Homepage
   --------------------------------------------------------------------------
   Hero, category tiles, product rows, product card, banner, craft story,
   journal teaser, UGC grid.

   Mobile-first; breakpoints written literally: 480 / 768 / 1024 / 1280.

   The product card lives here for now because the homepage is the only place
   that uses it. Phase 4 moves it to its own file when the shop archive and
   category pages start sharing it.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Shared section furniture
   -------------------------------------------------------------------------- */

.ta-section__head {
  margin-bottom: var(--ta-space-lg);
}

.ta-section__head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ta-space-sm);
}

.ta-section__title {
  margin-top: var(--ta-space-3xs);
  font-size: var(--ta-text-2xl);
}

/* Alternate the ground between bands so sections read as distinct without
   needing rules or boxes. */
.ta-home > .ta-section:nth-of-type(even) {
  background-color: var(--ta-color-surface);
}


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.ta-hero {
  position: relative;
  background-color: var(--ta-color-bg-alt);
  overflow: hidden;
}

/* A real scroller, not a flex row inside overflow: hidden.
   scroll-snap does the whole job natively: every slide is reachable by swipe,
   trackpad and keyboard with no script running, and the buttons the script
   adds just call scrollTo on top of it. */
.ta-hero__track {
  display: flex;
}

.ta-hero--carousel .ta-hero__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* The scrollbar would sit across the bottom of a full-bleed photograph. */
  scrollbar-width: none;
}

.ta-hero--carousel .ta-hero__track::-webkit-scrollbar {
  display: none;
}

.ta-hero--carousel .ta-hero__slide {
  scroll-snap-align: start;
}

/* The track is focusable so a keyboard can drive it; it needs to say so. */
.ta-hero--carousel .ta-hero__track:focus-visible {
  outline: var(--ta-border-width-thick) solid var(--ta-color-text-invert);
  outline-offset: calc(var(--ta-border-width-thick) * -2);
}

@media (prefers-reduced-motion: reduce) {
  .ta-hero--carousel .ta-hero__track {
    scroll-behavior: auto;
  }
}

.ta-hero__slide {
  position: relative;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  min-height: 26rem;
  padding-block: var(--ta-section-y-loose);
}

@media (min-width: 768px) {
  .ta-hero__slide { min-height: 32rem; }
}

@media (min-width: 1024px) {
  .ta-hero__slide { min-height: 38rem; }
}

.ta-hero__media {
  position: absolute;
  inset: 0;
}

.ta-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim only when there is a photograph behind the text — on the typographic
   hero it would just muddy the ground. */
.ta-hero__slide--media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--ta-color-overlay) 0%,
    transparent 70%
  );
}

.ta-hero__inner {
  position: relative;
  z-index: var(--ta-z-base);
  width: 100%;
}

.ta-hero__content {
  max-width: 34rem;
}

.ta-hero__slide--media .ta-hero__content {
  color: var(--ta-color-text-invert);
}

.ta-hero__slide--media .ta-hero__title,
.ta-hero__slide--media .ta-hero__eyebrow {
  color: var(--ta-color-text-invert);
}

.ta-hero__title {
  font-size: var(--ta-text-4xl);
  font-weight: var(--ta-weight-light);
  line-height: var(--ta-leading-tight);
  letter-spacing: var(--ta-tracking-tight);
}

.ta-hero__text {
  margin-top: var(--ta-space-sm);
  font-size: var(--ta-text-md);
  line-height: var(--ta-leading-relaxed);
  color: var(--ta-color-text-muted);
  max-width: var(--ta-measure-narrow);
}

.ta-hero__slide--media .ta-hero__text {
  color: var(--ta-color-text-invert);
}

/* The secondary CTA is an outline button in ink — legible on the typographic
   hero, near-invisible once a photograph sits behind it. Invert it on media
   slides only, the same way the title, eyebrow and body copy already are. */
.ta-hero__slide--media .ta-btn--secondary {
  background-color: transparent;
  color: var(--ta-color-text-invert);
  border-color: var(--ta-color-text-invert);
}

.ta-hero__slide--media .ta-btn--secondary:hover {
  background-color: var(--ta-color-text-invert);
  color: var(--ta-color-text);
}

.ta-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ta-space-2xs);
  margin-top: var(--ta-space-lg);
}


/* --------------------------------------------------------------------------
   Category tiles
   -------------------------------------------------------------------------- */

.ta-cats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ta-gap-md);
}

@media (min-width: 640px) {
  .ta-cats__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ta-cats__grid { grid-template-columns: repeat(3, 1fr); }
}

.ta-cats__item { margin: 0; }

/* --------------------------------------------------------------------------
   Category tiles
   --------------------------------------------------------------------------
   Portrait photograph with the category name set BENEATH it, not over it.

   They used to be landscape blocks with the name, a piece count and a "View
   Collection" link laid over the image behind a scrim. The client asked for the
   shape used by the product cards instead, and for the count and the link to go:
   the whole tile is a link, so the call to action restated what the cursor
   already says, and "4 pieces" makes a young catalogue read as empty.

   Setting the name outside the image also removes the scrim, so the photograph
   is seen at full strength rather than through a dark wash.
   -------------------------------------------------------------------------- */

.ta-cat {
  display: flex;
  flex-direction: column;
  gap: var(--ta-space-2xs);
  text-decoration: none;
}

.ta-cat__media {
  position: relative;
  display: block;
  /* The same portrait frame as a product card, so the two rows agree. */
  aspect-ratio: var(--ta-ratio-product);
  overflow: hidden;
  background-color: var(--ta-color-bg-alt);
  border-radius: var(--ta-radius-card);
}

.ta-cat__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ta-duration-slow, 400ms) var(--ta-ease-out);
}

.ta-cat:hover .ta-cat__img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .ta-cat__img,
  .ta-cat:hover .ta-cat__img {
    transition: none;
    transform: none;
  }
}

.ta-cat__body {
  display: block;
}

.ta-cat__name {
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-lg);
  line-height: var(--ta-leading-snug);
  color: var(--ta-color-heading);
}

.ta-cat:hover .ta-cat__name {
  color: var(--ta-color-accent-text);
}

/* A tile whose category has no photograph yet keeps the frame, so the row does
   not go ragged while imagery is still being added. */
.ta-cat:not(.ta-cat--media) .ta-cat__media {
  border: var(--ta-border-width) solid var(--ta-color-border-strong);
}

/* "Browse the collection" — asked for in bold. Scoped to this section so the
   eyebrow on every other section keeps its lighter weight. */
.ta-cats .ta-eyebrow {
  font-weight: var(--ta-weight-semibold);
  color: var(--ta-color-text);
}


/* --------------------------------------------------------------------------
   Product row (scroll-snap carousel)
   -------------------------------------------------------------------------- */

.ta-row__controls {
  display: flex;
  align-items: center;
  gap: var(--ta-space-sm);
}

.ta-row__arrows {
  display: flex;
  gap: var(--ta-space-3xs);
}

.ta-row__arrow {
  min-height: 2.5rem;
  min-width: 2.5rem;
  padding: 0;
  background: transparent;
  color: var(--ta-color-text);
  border: var(--ta-border-width) solid var(--ta-color-border-strong);
  border-radius: var(--ta-radius-circle);
}

.ta-row__arrow:hover {
  background-color: var(--ta-color-text);
  color: var(--ta-color-text-invert);
  border-color: var(--ta-color-text);
}

.ta-row__arrow:disabled {
  opacity: 0.35;
  background: transparent;
  color: var(--ta-color-text);
  border-color: var(--ta-color-border-strong);
}

[data-ta-row-prev] .ta-icon {
  transform: rotate(180deg);
}

.ta-row__track {
  display: grid;
  grid-auto-flow: column;

  /*
   * Card width comes from the ROW'S RHYTHM, never from how many cards there are.
   *
   * `1fr` shares the free space between however many items exist, so a row with
   * one related product stretched that single card across the full 1185px — a
   * poster, not a carousel — and two cards filled half the page each. The width
   * a card should be does not depend on how many the shop happens to have, so
   * it is stated as a share of the row instead, and a short row simply leaves
   * space to its right.
   */
  grid-auto-columns: 74%;
  gap: var(--ta-gap-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;

  /* Room for the focus ring and card hover lift, which would otherwise be
     clipped by the scroll container. */
  padding: var(--ta-space-3xs);
  margin: calc(var(--ta-space-3xs) * -1);

  /* Hide the scrollbar but keep the element scrollable — the arrows and
     touch/keyboard scrolling remain. */
  scrollbar-width: none;
}

.ta-row__track::-webkit-scrollbar {
  display: none;
}

/* Two up, then three, then four — the same step at every width. */
@media (min-width: 480px) {
  .ta-row__track { grid-auto-columns: calc((100% - var(--ta-gap-md)) / 2); }
}

@media (min-width: 768px) {
  .ta-row__track { grid-auto-columns: calc((100% - 2 * var(--ta-gap-md)) / 3); }
}

@media (min-width: 1024px) {
  .ta-row__track { grid-auto-columns: calc((100% - 3 * var(--ta-gap-md)) / 4); }
}

.ta-row__track > * {
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
  .ta-row__track { scroll-behavior: auto; }
}


/* --------------------------------------------------------------------------
   Product card
   -------------------------------------------------------------------------- */

.ta-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ta-card__media {
  position: relative;
  display: block;
  aspect-ratio: var(--ta-ratio-product);
  background-color: var(--ta-color-bg-alt);
  border-radius: var(--ta-radius-image);
  overflow: hidden;
}

.ta-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ta-duration-slow) var(--ta-ease-out);
}

.ta-card:hover .ta-card__img {
  transform: scale(1.03);
}

/* Stand-in until product photography exists: the initial of the piece, set in
   the display face. Reads as a considered placeholder rather than a missing
   image. */
.ta-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ta-color-bg-alt);
}

.ta-card__placeholder-mark {
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-4xl);
  font-weight: var(--ta-weight-light);
  color: var(--ta-color-border-strong);
  line-height: 1;
  user-select: none;
}

.ta-card__badge {
  position: absolute;
  top: var(--ta-space-2xs);
  left: var(--ta-space-2xs);
  padding: var(--ta-space-3xs) var(--ta-space-2xs);
  background-color: var(--ta-color-sale);
  color: var(--ta-palette-white);
  border-radius: var(--ta-radius-xs);
  font-size: var(--ta-text-3xs);
  font-weight: var(--ta-weight-semibold);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  line-height: 1.4;
}

.ta-card__badge--muted {
  background-color: var(--ta-color-text-subtle);
}

.ta-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ta-space-3xs);
  padding-top: var(--ta-space-sm);
}

.ta-card__title {
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-lg);
  font-weight: var(--ta-weight-medium);
  line-height: var(--ta-leading-snug);
}

/*
 * 24px minimum target (WCAG 2.2 AA, 2.5.8). inline-flex keeps the target only
 * as wide as its own text — a block link would stretch the container and make
 * adjacent targets ambiguous. See the note on .ta-footer__links a: the whole
 * family of small text links was missed on the first sweep because the audit
 * over-applied 2.5.8's "inline in a sentence" exemption to any link in a list.
 */
.ta-card__link {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  color: var(--ta-color-heading);
  text-decoration: none;
}

.ta-card__link:hover {
  color: var(--ta-color-link-hover);
}

.ta-card__price {
  margin: 0;
  max-width: none;
  font-size: var(--ta-text-sm);
  color: var(--ta-color-text);
}

/* Targets Woo's own class rather than a custom one — see the note in
   template-parts/product-card.php about why the class is not overridden. */
.ta-card .button {
  align-self: flex-start;
  margin-top: var(--ta-space-2xs);
}




/* --------------------------------------------------------------------------
   Featured banner
   -------------------------------------------------------------------------- */

.ta-banner__inner {
  display: grid;
  gap: var(--ta-space-lg);
  align-items: center;
  padding: var(--ta-space-xl) var(--ta-space-md);
  background-color: var(--ta-color-bg-alt);
  border-radius: var(--ta-radius-card);
}

@media (min-width: 768px) {
  .ta-banner__inner { padding: var(--ta-space-2xl) var(--ta-space-xl); }

  .ta-banner--media .ta-banner__inner {
    grid-template-columns: 1fr 1fr;
    padding: 0;
    overflow: hidden;
  }

  .ta-banner--media .ta-banner__body { padding: var(--ta-space-2xl); }
}

.ta-banner__media {
  height: 100%;
}

.ta-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ta-banner__title {
  margin-top: var(--ta-space-3xs);
  font-size: var(--ta-text-2xl);
}

.ta-banner__text {
  margin-top: var(--ta-space-sm);
  margin-bottom: var(--ta-space-lg);
  color: var(--ta-color-text-muted);
  max-width: var(--ta-measure-narrow);
}


/* --------------------------------------------------------------------------
   Craft story
   -------------------------------------------------------------------------- */

.ta-story__inner {
  max-width: var(--ta-measure);
}

.ta-story__title {
  margin-top: var(--ta-space-3xs);
  font-size: var(--ta-text-2xl);
}

.ta-story__text {
  margin-top: var(--ta-space-sm);
  color: var(--ta-color-text-muted);
  line-height: var(--ta-leading-relaxed);
}

.ta-story__actions {
  margin-top: var(--ta-space-lg);
}

.ta-story__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ta-space-md);
  margin-top: var(--ta-space-xl);
  padding-top: var(--ta-space-lg);
  border-top: var(--ta-border-width) solid var(--ta-color-border-strong);
}

@media (min-width: 640px) {
  .ta-story__stats { grid-template-columns: repeat(3, 1fr); }
}

.ta-story__stat {
  display: flex;
  flex-direction: column;
  gap: var(--ta-space-3xs);
  margin: 0;
}

.ta-story__stat-value {
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-lg);
  font-weight: var(--ta-weight-medium);
  color: var(--ta-color-accent-text);
}

.ta-story__stat-label {
  font-size: var(--ta-text-2xs);
  color: var(--ta-color-text-muted);
}


/* --------------------------------------------------------------------------
   Journal teaser
   -------------------------------------------------------------------------- */

.ta-journal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ta-gap-lg);
}

@media (min-width: 640px) {
  .ta-journal__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ta-journal__grid { grid-template-columns: repeat(3, 1fr); }
}

.ta-journal__item { margin: 0; }

.ta-post__media {
  display: block;
  aspect-ratio: var(--ta-ratio-wide);
  background-color: var(--ta-color-bg-alt);
  border-radius: var(--ta-radius-image);
  overflow: hidden;
}

.ta-post__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ta-post__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--ta-color-bg-alt);
}

.ta-post__body {
  padding-top: var(--ta-space-sm);
}

.ta-post__meta {
  margin: 0;
  max-width: none;
  font-size: var(--ta-text-2xs);
  letter-spacing: var(--ta-tracking-wide);
  text-transform: uppercase;
  color: var(--ta-color-text-subtle);
}

.ta-post__title {
  margin-top: var(--ta-space-3xs);
  font-family: var(--ta-font-display);
  font-size: var(--ta-text-lg);
  line-height: var(--ta-leading-snug);
}

.ta-post__title a {
  color: var(--ta-color-heading);
  text-decoration: none;
}

.ta-post__title a:hover {
  color: var(--ta-color-link-hover);
}

.ta-post__excerpt {
  margin-top: var(--ta-space-2xs);
  font-size: var(--ta-text-sm);
  color: var(--ta-color-text-muted);
}


/* --------------------------------------------------------------------------
   UGC grid
   -------------------------------------------------------------------------- */

.ta-ugc__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ta-gap-sm);
}

@media (min-width: 640px) {
  .ta-ugc__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .ta-ugc__grid { grid-template-columns: repeat(6, 1fr); }
}

.ta-ugc__item {
  margin: 0;
  aspect-ratio: var(--ta-ratio-square);
  background-color: var(--ta-color-bg-alt);
  border-radius: var(--ta-radius-image);
  overflow: hidden;
}

.ta-ugc__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ta-duration-slow) var(--ta-ease-out);
}

.ta-ugc__item:hover .ta-ugc__img {
  transform: scale(1.05);
}

.ta-ugc__cta {
  margin-top: var(--ta-space-lg);
  text-align: center;
}


/* --------------------------------------------------------------------------
   Hero carousel — clickable slides and controls
   -------------------------------------------------------------------------- */

/* One link per slide, stretched over the panel.
   The anchor stays a normal, focusable button in the flow; the pseudo-element
   is what makes the whole slide clickable. Anything that must stay clickable
   in its own right needs a higher z-index than this. */
.ta-hero__slide--link .ta-hero__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Lifted above the stretched link, or it would be unclickable. */
.ta-hero__cta-alt {
  position: relative;
  z-index: 2;
}

/* A whole-panel target should say so on hover, not only under the button. */
.ta-hero__slide--link:hover .ta-hero__img {
  transform: scale(1.02);
}

.ta-hero__img {
  transition: transform var(--ta-duration-slow) var(--ta-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .ta-hero__slide--link:hover .ta-hero__img {
    transform: none;
  }
}

/*
 * The arrows sit at the two edges of the hero, vertically centred; the dots
 * stay at the bottom. They used to be grouped together in the bottom-right
 * corner, which put the "next" control a long way from the edge it moves
 * toward.
 *
 * display:contents dissolves this wrapper so its three children position
 * themselves against the hero itself rather than against a small box in the
 * corner. Without it they would resolve against this element and land back
 * where they started.
 */
.ta-hero__ui {
  display: contents;
}

.ta-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--ta-border-width) solid var(--ta-color-text-invert);
  border-radius: 50%;
  background-color: transparent;
  color: var(--ta-color-text-invert);
  cursor: pointer;
  transition: background-color var(--ta-duration) var(--ta-ease-out),
              color var(--ta-duration) var(--ta-ease-out);
}

.ta-hero__nav:hover,
.ta-hero__nav:focus-visible {
  background-color: var(--ta-color-text-invert);
  color: var(--ta-color-text);
}

/* Chevrons drawn rather than shipped, to avoid a request for two arrows. */
.ta-hero__nav::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.ta-hero__nav--prev {
  left: var(--ta-space-md);
}

.ta-hero__nav--next {
  right: var(--ta-space-md);
}

/* No optical nudge. The half-a-chevron offset was meant to balance the shape
   inside the circle and read as simply off-centre. */
.ta-hero__nav--prev::before {
  transform: rotate(-135deg) translate(-1px, -1px);
}

.ta-hero__nav--next::before {
  transform: rotate(45deg) translate(-1px, -1px);
}

.ta-hero__dots {
  position: absolute;
  left: 50%;
  bottom: var(--ta-space-md);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--ta-space-3xs);
}

.ta-hero__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--ta-color-text-invert);
  opacity: 0.45;
  cursor: pointer;
  transition: opacity var(--ta-duration) var(--ta-ease-out);
}

.ta-hero__dot[aria-current="true"] {
  opacity: 1;
}

/* The dot itself is an 8px target. The button around it is not: the padding
   below carries it to the 44px floor without changing how it looks. */
.ta-hero__dot {
  box-sizing: content-box;
  padding: 1.1rem 0.55rem;
  background-clip: content-box;
}

@media (max-width: 767px) {
  .ta-hero__ui {
    right: 50%;
    transform: translateX(50%);
    bottom: var(--ta-space-xs);
  }

  /* Arrows are redundant on a touch device that can already swipe, and they
     crowd the panel at this width. */
  .ta-hero__nav {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   Craft story — optional photography
   --------------------------------------------------------------------------
   Everything here is scoped to `.ta-story--media`. With no images set the band
   is the single centred column it has always been, and this whole block is
   inert — the empty state and the filled state are two intentional designs
   rather than one design missing its pictures.
   -------------------------------------------------------------------------- */

.ta-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ta-space-xl);
}

/* The text column keeps its reading measure whatever the grid does around it.
   Left alone, a 1fr column on a wide container stretches the line length well
   past comfortable. */
.ta-story--media .ta-story__inner {
  max-width: var(--ta-measure);
}

@media (min-width: 900px) {
  .ta-story--media .ta-story__grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--ta-space-2xl);
  }
}

.ta-story__media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ta-space-sm);
  align-items: start;
}

.ta-story__figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--ta-radius-image);
  background-color: var(--ta-color-bg-alt);
}

.ta-story__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A pair of equal rectangles reads as a grid of thumbnails. Offsetting the
   second and giving the two different heights makes it read as a composition,
   which is what an editorial band wants. */
.ta-story__figure--1 {
  aspect-ratio: 3 / 4;
}

.ta-story__figure--2 {
  aspect-ratio: 1 / 1;
  margin-top: var(--ta-space-2xl);
}

/* One image on its own should not sit in half a grid. */
.ta-story__media:has(.ta-story__figure:only-child) {
  grid-template-columns: 1fr;
}

.ta-story__figure:only-child {
  aspect-ratio: 4 / 3;
  margin-top: 0;
}

@media (max-width: 599px) {
  /* Two portrait crops side by side get too narrow to read on a phone. */
  .ta-story__media {
    grid-template-columns: 1fr;
  }

  .ta-story__figure--1,
  .ta-story__figure--2 {
    aspect-ratio: 4 / 3;
    margin-top: 0;
  }
}