.tfj {
  --tfj-paper: #f2eee4;
  --tfj-ink: #1d3029;
  --tfj-muted: #485650;
  --tfj-accent: #365a4d;
  --tfj-rule: #cbc9bc;
  background: var(--tfj-paper);
  color: var(--tfj-ink);
  font-family: "Tide Sans", system-ui, sans-serif;
  padding: clamp(3.75rem, 10vw, 9.5rem) 0 clamp(3.5rem, 8vw, 7.5rem);
}

.tfj__inner {
  margin-inline: auto;
  width: min(1280px, calc(100% - 2 * clamp(1.125rem, 5.3vw, 6rem)));
}

.tfj__intro {
  align-items: end;
  display: grid;
  gap: clamp(1.25rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  margin: 0 0 clamp(1.75rem, 4vw, 3.4rem);
}

.tfj__eyebrow {
  color: var(--tfj-accent);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .15em;
  line-height: 1.45;
  margin: 0 0 1.15rem;
  text-transform: uppercase;
}

.tfj h2 {
  font-family: "Tide Serif", Georgia, serif;
  font-size: clamp(2.6rem, 6.25vw, 6.7rem);
  font-weight: 400;
  letter-spacing: -.052em;
  line-height: .93;
  margin: 0;
  text-wrap: balance;
}

.tfj h2 em {
  color: var(--tfj-accent);
  font-weight: inherit;
}

.tfj__lead {
  color: var(--tfj-muted);
  font-size: clamp(.99rem, 1.33vw, 1.2rem);
  line-height: 1.65;
  margin: 0;
  max-width: 30ch;
  padding-block-end: .12em;
}

.tfj__plate { margin: 0; }

.tfj__media {
  aspect-ratio: 2.36;
  background: #264e4e;
  border-radius: clamp(.7rem, 1.4vw, 1.15rem);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.tfj__media img {
  display: block;
  height: 116%;
  inset: -8% 0;
  max-width: none;
  object-fit: cover;
  object-position: 52% 54%;
  position: absolute;
  width: 100%;
}

.tfj__notes {
  border-block-start: 1px solid var(--tfj-rule);
  display: grid;
  gap: clamp(1rem, 4.8vw, 5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block-start: clamp(2.5rem, 5.25vw, 5rem);
  padding-block-start: clamp(1.35rem, 2.6vw, 2.5rem);
}

.tfj__index {
  color: var(--tfj-accent);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: .12em;
}

.tfj h3 {
  font-family: "Tide Serif", Georgia, serif;
  font-size: clamp(1.64rem, 2.65vw, 2.65rem);
  font-weight: 400;
  letter-spacing: -.033em;
  line-height: 1.05;
  margin: .65rem 0 .6rem;
}

.tfj__note p {
  color: var(--tfj-muted);
  font-size: .98rem;
  line-height: 1.57;
  margin: 0;
  max-width: 34ch;
}

.tfj__link {
  align-items: center;
  color: var(--tfj-accent);
  display: inline-flex;
  font-size: .88rem;
  font-weight: 650;
  gap: .65rem;
  margin-top: .42rem;
  min-height: 44px;
  text-decoration-thickness: 1px;
  text-underline-offset: .27em;
}

.tfj__link:hover { color: var(--tfj-ink); }
.tfj__link:focus-visible { outline: 2px solid var(--tfj-accent); outline-offset: .22rem; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tfj__media { view-timeline-name: --tfj-aerial; }
    .tfj__media img {
      animation: tfj-drift 1ms linear both;
      animation-timeline: --tfj-aerial;
      animation-range: entry 0% exit 100%;
    }
    @keyframes tfj-drift {
      from { transform: translate3d(0, -4.25%, 0); }
      to { transform: translate3d(0, 4.25%, 0); }
    }
  }
}

@media (max-width: 760px) {
  .tfj__intro { align-items: start; grid-template-columns: minmax(0, 1fr); }
  .tfj h2 { font-size: clamp(2.8rem, 9vw, 4.5rem); }
  .tfj__lead { max-width: 45ch; }
  .tfj__media { aspect-ratio: 1.42; }
  .tfj__notes { gap: 0; grid-template-columns: minmax(0, 1fr); padding-block-start: 0; }
  .tfj__note { padding: 1.2rem 0 1.35rem; }
  .tfj__note + .tfj__note { border-block-start: 1px solid var(--tfj-rule); }
  .tfj__note p { max-width: 47ch; }
}