/* Editorial team front page (Template A). Scoped to .editorial-page so the
   generic design class names cannot collide with base.css. The "How we report"
   block at the bottom keeps its original .editorial-standards styling. */

.editorial-page {
  --ef-ink: #0e1b2c;
  --ef-soft: #f2f5f7;
  --ef-line: #d6dce2;
  --ef-slate: #5b6b7c;
  --ef-accent: #0b6e8a;
  --ef-body: #2a3947;
  width: min(100% - 32px, 1240px);
  margin: 0 auto;
  padding: 28px 0 96px;
  color: var(--ink);
  font-family: var(--font-body), "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.editorial-page *,
.editorial-page *::before,
.editorial-page *::after {
  box-sizing: border-box;
}

/* Intro ---------------------------------------------------------------- */

.ef-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

.ef-intro::before {
  width: 56px;
  height: 4px;
  background: var(--brand-deep);
  content: "";
}

.ef-intro h1 {
  color: var(--ink);
  margin: 0;
  font: 500 clamp(1.5rem, 3vw, 2rem)/1.1 Georgia, "Times New Roman", serif;
  letter-spacing: -.02em;
}

.ef-count {
  margin: 0;
  color: var(--ink);
  font-size: .9rem;
}

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

.ef-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  margin-top: 28px;
  background: var(--ef-soft);
  color: var(--ef-ink);
}

.ef-ph {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--ef-ink);
}

.ef-ph svg,
.ef-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ef-ph img {
  object-fit: cover;
  border: 0;
}

.ef-hero .ef-ph {
  min-height: 540px;
  max-height: 100vh;
}

.ef-tx {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(24px, 4vw, 52px);
}

.ef-tag {
  align-self: flex-start;
  padding: 5px 20px;
  background: var(--ef-accent);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.ef-hero h2 {
  color: black;
  margin: 0;
  font: 500 clamp(2.4rem, 4.4vw, 4.2rem)/1.02 Georgia, "Times New Roman", serif;
  letter-spacing: -.035em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.ef-hero h2 a {
  color: inherit;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color 220ms ease;
}

.ef-hero h2 a:hover,
.ef-hero h2 a:focus-visible {
  text-decoration-color: var(--ef-accent);
}

.ef-bio {
  max-width: 34ch;
  margin: 0;
  color: var(--ef-body);
}

.ef-fig {
  display: flex;
  gap: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--ef-ink);
}

.ef-fig b {
  display: block;
  font: 500 2.3rem/1.1 Georgia, "Times New Roman", serif;
  font-variant-numeric: tabular-nums;
}

.ef-fig span {
  color: var(--ef-slate);
  font-size: .85rem;
}

.ef-latest {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ef-line);
}

.ef-latest small {
  color: var(--ef-slate);
}

.ef-latest a {
  display: block;
  color: inherit;
  text-decoration: none;
  font: 700 1.1rem/1.35 "IBM Plex Sans", system-ui, sans-serif;
}

.ef-latest a:hover,
.ef-latest a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--ef-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Grid ----------------------------------------------------------------- */

.ef-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 28px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.ef-card {
  min-width: 0;
}

.ef-card .ef-ph {
  aspect-ratio: 4/3;
}

.ef-card .ef-ph svg {
  transition: transform 900ms cubic-bezier(.2, .7, .2, 1);
}

.ef-card .ef-ph img {
  transition: transform 900ms cubic-bezier(.2, .7, .2, 1);
}

.ef-card:hover .ef-ph svg,
.ef-card:hover .ef-ph img,
.ef-card:focus-within .ef-ph svg,
.ef-card:focus-within .ef-ph img {
  transform: scale(1.06);
}

.ef-card h3 {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  margin: 16px 0 4px;
  font: 500 1.6rem/1.15 Georgia, "Times New Roman", serif;
  letter-spacing: -.02em;
  background: linear-gradient(var(--ef-accent), var(--ef-accent)) 0 100% / 0 2px no-repeat;
  transition: background-size 500ms cubic-bezier(.7, 0, .2, 1);
}
.ef-card h3 a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}

.ef-card:hover h3,
.ef-card:focus-within h3 {
  background-size: 100% 2px;
}

.ef-card h3 a {
  color: inherit;
  text-decoration: none;
}

.ef-card .ef-t {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.ef-card .ef-t li {
  color: var(--brand-deep);
  font-size: .78rem;
  font-weight: 700;
}

.ef-card .ef-t li + li::before {
  margin-right: 8px;
  color: var(--line);
  content: "/";
}

.ef-card > p {
  display: -webkit-box;
  overflow: hidden;
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: .95rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.ef-card .ef-m {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: .85rem;
}

.ef-card .ef-m b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Empty state ---------------------------------------------------------- */

.ef-empty {
  margin-top: 36px;
  padding: 56px 24px;
  border: 1px solid var(--line);
  background: var(--paper-dim);
  text-align: center;
}

.ef-empty h2 {
  margin: 0 0 6px;
  font: 500 1.6rem/1.2 Georgia, "Times New Roman", serif;
}

.ef-empty p {
  margin: 0;
  color: var(--ink);
}

/* Shared eyebrow ------------------------------------------------------- */

.ef-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--brand-deep);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* How we report -------------------------------------------------------- */

.editorial-standards {
  margin-top: clamp(74px, 10vw, 128px);
  padding-top: 26px;
  border-top: 2px solid var(--ink);
}

.editorial-standards > .ef-eyebrow {
  margin-bottom: 10px;
}

.editorial-standards h2 {
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.25rem, 4vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
}

.editorial-standards-lead {
  max-width: 680px;
  font-weight: 500;
  margin: 14px 0 28px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
  white-space: pre-line;
}

.editorial-standards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.editorial-standards-grid article {
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.editorial-standards-grid article > span {
  color: var(--brand-deep);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.editorial-standards-grid h3 {
  margin: 10px 0 7px;
  color: var(--brand-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 500;
}

.editorial-standards-grid p {
  max-width: 36ch;
  margin: 0;
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.6;
}

/* Scroll-in (view timeline) ------------------------------------------- */

@supports (animation-timeline: view()) {
  .ef-card .ef-ph {
    animation: ef-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }

  @keyframes ef-reveal {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(0); }
  }
}

/* Responsive ----------------------------------------------------------- */

@media (max-width: 1000px) {
  .ef-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ef-hero {
    grid-template-columns: 1fr;
  }

  .ef-hero .ef-ph {
    min-height: 0;
    aspect-ratio: 16/10;
  }
}

/*  Desktop masthead: the intro sits on the left and the author of the week
    panel sits on the right. Below 1001px they stack, because the hero itself
    is already single-column there. */
@media (min-width: 1001px) {
  .ef-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr);
    gap: clamp(32px, 3.4vw, 56px);
    align-items: stretch;
  }

  .ef-top .ef-hero {
    margin-top: 0;
  }

  .ef-top .ef-hero .ef-ph {
    min-height: 480px;
  }

  .ef-top .ef-tx {
    gap: 16px;
    padding: clamp(20px, 2.4vw, 40px);
  }

  .ef-top .ef-hero h2 {
    font-size: clamp(1.9rem, 2.9vw, 3rem);
  }

  .ef-top .ef-fig {
    gap: 26px;
  }
}

@media (max-width: 700px) {
  .editorial-page {
    width: 100%;
    padding: 0 0 64px;
  }

  /*  Match the "Meet our editorial team" strip to the hero panel directly
      below it so the top of the page reads as one block. The rest of the page
      keeps the normal paper background. */
  .ef-intro {
    gap: 6px;
    padding: 16px 16px 14px;
    background: var(--ef-ink);
  }

  .ef-intro h1 {
    color: #fff;
  }

  .ef-count {
    color: rgba(255, 255, 255, .75);
  }

  .ef-hero {
    position: relative;
    display: block;
    min-height: calc(100svh - 64px - 60px);
    margin: 0;
    background: var(--ef-ink);
    color: #fff;
  }

  .ef-hero .ef-ph {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  .ef-hero .ef-ph svg {
    left: 34%;
    width: 66%;
  }

  .ef-hero .ef-ph img {
    left: 34%;
    width: 66%;
  }

  .ef-hero .ef-ph::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(14, 27, 44, .98) 0,
      rgba(14, 27, 44, .86) 46%,
      rgba(14, 27, 44, .05) 100%
    );
    content: "";
  }

  .ef-hero .ef-tx {
    position: relative;
    width: 66%;
    min-height: calc(100svh - 64px - 60px);
    justify-content: flex-end;
    padding: 24px 16px 28px;
  }

  .ef-hero h2 {
    color: white;
    font-size: 2.5rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
  }

  .ef-hero .ef-bio {
    display: none;
  }

  .ef-fig {
    gap: 20px;
    border-color: rgba(255, 255, 255, .4);
  }

  .ef-fig b {
    font-size: 1.7rem;
  }

  .ef-fig span {
    color: rgba(255, 255, 255, .75);
  }

  .ef-latest {
    border-color: rgba(255, 255, 255, .25);
  }

  .ef-latest small {
    color: rgba(255, 255, 255, .7);
  }

  .ef-latest a {
    font-size: .95rem;
  }

  .ef-grid {
    display: block;
    margin: 0;
    padding: 16px 12px 0;
  }

  .ef-cell {
    padding-bottom: 16svh;
  }

  .ef-cell:last-child {
    padding-bottom: 0;
  }

  .ef-card {
    position: sticky;
    top: calc(64px + 10px + var(--i) * 9px);
    padding-bottom: 16px;
    background: var(--paper);
    border: 1px solid var(--line);
  }

  .ef-card > *:not(.ef-ph) {
    margin-left: 16px;
    margin-right: 16px;
  }

  .ef-card .ef-m {
    margin-top: 12px;
  }

  .ef-card .ef-ph {
    aspect-ratio: 3/2;
  }

  .ef-empty {
    margin: 16px 12px 0;
  }

  .editorial-standards {
    margin-top: 64px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .editorial-standards-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  @supports (animation-timeline: view()) {
    .ef-card .ef-ph {
      animation: none;
    }

    .ef-card .ef-ph svg,
    .ef-card .ef-ph img {
      animation: ef-parallax linear both;
      animation-timeline: view();
    }

    @keyframes ef-parallax {
      from { transform: scale(1.2) translateY(-5%); }
      to { transform: scale(1) translateY(4%); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-page *,
  .editorial-page *::before,
  .editorial-page *::after {
    animation: none !important;
    transition: none !important;
  }
}