/* Editorial sections, after Japanese editorial and poster layout:
   asymmetric text and art on a 12-column grid with open space (ma), a vertical label
   in the margin rail, an outlined index numeral behind the heading, and hairline-ruled
   lists in place of boxed cards.

   Layers, back to front: the art (big, cropped off the page edge or climbing into the
   section above), the numeral, then the text. Wherever text lands on the art it sits on
   a veil — the section's own colour, blurred, feathered at the edges — so it stays
   readable without a visible box. On scroll the art, numeral and rail drift at
   different speeds; the text holds still.

   Art is 1-bit dither drawn at 384px and is shown only at whole multiples of a
   dither cell (384, 576 or 768 CSS px), so it stays crisp and never smooths to grey. */

.ed-sec {
  --ed-bg: #ffffff;
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  overflow-x: clip;
  overflow-clip-margin: 0;
}
.ed-sec.bg-canvas-alt { --ed-bg: #f5f5f5; }

.ed {
  position: relative;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
}
@media (min-width: 640px) { .ed { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .ed { padding-inline: 2rem; } }

/* Vertical label in the margin: a short rule, then the section name. */
.ed-rail {
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: start;
  align-self: start;
  position: relative;
  z-index: 2;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.62); /* 5.5:1 on the alt background; 0.55 fell short of 4.5:1 */
}
.ed-rail i { display: block; inline-size: 3.5rem; border-inline-start: 1px solid rgba(10, 10, 10, 0.35); }

/* Outlined index numeral; the heading starts at its baseline. */
.ed-num {
  grid-column: 2 / 8;
  grid-row: 1;
  align-self: start;
  position: relative;
  z-index: 1;
  margin-top: -0.12em;
  font-size: clamp(7rem, 15vw, 13.5rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(10, 10, 10, 0.18);
  pointer-events: none;
  user-select: none;
}

.ed-head { --ed-pt: clamp(5.4rem, 11.6vw, 10.4rem); grid-column: 2 / 8; grid-row: 1; z-index: 2; padding-top: var(--ed-pt); }
.ed-head h2 { text-align: left; margin-bottom: 1.25rem; }
.ed-lede { font-size: 1.25rem; line-height: 1.6; color: rgba(10, 10, 10, 0.62); max-width: 34rem; }

.ed-body { grid-column: 2 / 13; grid-row: 2; position: relative; z-index: 2; margin-top: clamp(2.5rem, 5vw, 4rem); }
/* A second body row. Veiled text must not share an .ed-body with an .alive-card: the card's
   screen-blended canvas makes the body an isolated group, and the veil's blur can no longer
   see the art behind it. */
.ed-body--after { grid-row: 3; margin-top: 0; }

/* The veil: the section colour, blurred and feathered, behind any text the art reaches. */
.ed-veil { position: relative; isolation: isolate; }
.ed-veil::before {
  content: "";
  position: absolute;
  inset: -2.25rem -3.25rem;
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--ed-bg) 80%, transparent);
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
  -webkit-mask:
    linear-gradient(90deg, transparent, #000 3.25rem, #000 calc(100% - 3.25rem), transparent),
    linear-gradient(transparent, #000 2.25rem, #000 calc(100% - 2.25rem), transparent);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, transparent, #000 3.25rem, #000 calc(100% - 3.25rem), transparent),
    linear-gradient(transparent, #000 2.25rem, #000 calc(100% - 2.25rem), transparent);
  mask-composite: intersect;
}
.ed-head.ed-veil::before { top: calc(var(--ed-pt) - 2.25rem); }
/* On desktop a mirrored section's art stays clear of its heading, so no veil is needed there. */
@media (min-width: 1024px) { .ed--flip .ed-head.ed-veil::before { display: none; } }

/* Art: behind everything, big, spanning the heading and the body. */
.ed-art {
  --art: 576px;
  grid-column: 6 / 13;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: start;
  position: relative;
  z-index: 0;
  margin: 0;
  pointer-events: none;
}
.ed-art--xl { --art: 768px; }
.ed-art img, .ed-art .dither-cut { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.ed-art img { width: var(--art); height: var(--art); max-width: none; }
.ed-art--low { align-self: end; }

/* Bleed: the art meets the viewport edge and part of it crops off. */
.ed-art--bleed { margin-right: calc((min(100vw, 80rem) - 100vw) / 2 - 2rem); }
.ed-art--bleed > img, .ed-art--bleed > .dither-cut { transform: translateX(22%); }
.ed-art--bleed-l { margin-left: calc((min(100vw, 80rem) - 100vw) / 2 - 2rem); }
.ed-art--bleed-l > img { transform: translateX(-18%); }

/* Straddle: the art climbs over the boundary into the section above. */
.ed-art--straddle { margin-top: clamp(-16rem, -17vw, -8rem); }

/* Mirror: heading on the right, art on the left. */
.ed--flip .ed-num, .ed--flip .ed-head { grid-column: 6 / 12; }
/* On a mirrored section the rail moves to the right margin, like the label on the facing page of a spread. */
.ed--flip .ed-rail { grid-column: 12; justify-self: end; }
.ed--flip .ed-art { grid-column: 1 / 8; justify-self: start; }

/* The seal: used once, pressed onto the closing art. */
.ed-stamp {
  position: absolute;
  right: 26%;
  bottom: 12%;
  display: grid;
  place-items: center;
  width: 5.75rem;
  height: 5.75rem;
  background: #0a0a0a;
  color: #fff;
  box-shadow: inset 0 0 0 3px #0a0a0a, inset 0 0 0 4px #fff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.ed-stamp b { display: block; font-family: var(--font-sans); font-size: 1.5rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1; margin-bottom: 0.2rem; }

/* Hairline-ruled list: index, title, line of copy. */
.ed-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; }
.ed-list li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 0.75rem;
  row-gap: 0.35rem;
  align-content: start;
  padding: 1.35rem 0 1.6rem;
  border-top: 1px solid rgba(10, 10, 10, 0.16);
}
.ed-list .ix { grid-row: 1 / span 2; padding-top: 0.3rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: rgba(10, 10, 10, 0.45); }
.ed-list h3 { margin: 0; font-size: 1.125rem; font-weight: 700; }
.ed-list p { margin: 0; color: rgba(10, 10, 10, 0.62); line-height: 1.55; }
.ed-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ed-sub { margin: clamp(3rem, 6vw, 4.5rem) 0 1rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(10, 10, 10, 0.55); }
.ed-sub.ed-veil { display: inline-block; }
.ed-foot { margin-top: 2.5rem; color: rgba(10, 10, 10, 0.6); max-width: 40rem; }
.ed-foot.ed-veil { width: fit-content; }

/* Parallax: the art travels faster than the page, the numeral slower and the other
   way, the rail barely. Scroll-driven, so no script; without support, or with reduced
   motion, everything simply sits still. */
@keyframes ed-drift {
  from { translate: 0 var(--drift); }
  to { translate: 0 calc(var(--drift) * -1); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ed-art, .ed-num, .ed-rail {
      animation: ed-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    .ed-art { --drift: 7rem; }
    .ed-art--xl { --drift: 10rem; }
    .ed-num { --drift: -3.5rem; }
    .ed-rail { --drift: 1.5rem; }
  }
}

/* Tablet and phone: one column. The rail lies flat above the heading, and the art
   stays big (384px), cropped off the edge, behind the heading and the list. */
@media (max-width: 1023px) {
  .ed { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1rem; }
  .ed-rail, .ed--flip .ed-rail { grid-column: 1 / -1; grid-row: 1; justify-self: start; writing-mode: horizontal-tb; }
  .ed-rail i { inline-size: 2.5rem; border-inline-start: 0; border-top: 1px solid rgba(10, 10, 10, 0.35); }
  .ed-num, .ed--flip .ed-num { grid-column: 1 / -1; grid-row: 2; font-size: clamp(6rem, 30vw, 10rem); margin-top: 1rem; }
  .ed-head, .ed--flip .ed-head { --ed-pt: clamp(5.7rem, 29vw, 9.2rem); grid-column: 1 / -1; grid-row: 2; }
  .ed-body { grid-column: 1 / -1; grid-row: 3; margin-top: 1.5rem; }
  .ed-art, .ed-art--xl, .ed--flip .ed-art { --art: 384px; grid-column: 1 / -1; grid-row: 1 / span 2; justify-self: end; align-self: start; margin-top: -3.5rem; }
  /* Mirrored sections' art also goes to the right edge on phones, clear of the rail and numeral. */
  .ed--flip .ed-art { justify-self: end; }
  .ed-art--bleed-l { margin-left: 0; margin-right: -1rem; }
  .ed-art--bleed-l > img { transform: translateX(40%); }
  .ed-body--after { grid-row: 4; }
  .ed-art--low { align-self: end; margin-top: 0; }
  .ed-art .dither-cut { width: 264px !important; height: 360px !important; }
  .ed-art--bleed { margin-right: -1rem; }
  .ed-art--bleed > img, .ed-art--bleed > .dither-cut { transform: translateX(40%); }
  .ed-art--straddle { margin-top: -5rem; }
  .ed-veil::before { inset: -1.5rem -1rem; }
  .ed-head.ed-veil::before { top: calc(var(--ed-pt) - 1.5rem); }
  .ed-stamp { width: 5rem; height: 5rem; font-size: 0.75rem; letter-spacing: 0.06em; right: 40%; }
  .ed-stamp b { font-size: 1.2rem; }
  .ed-list, .ed-list--2 { grid-template-columns: 1fr; }
  .ed-art { --drift: 3.5rem; }
  .ed-num { --drift: -1.5rem; }
}
/* Narrower than the art itself: 288px, which still lands each dither cell on whole
   device pixels on 2x and 4x screens. */
@media (max-width: 383px) {
  .ed-art, .ed-art--xl, .ed--flip .ed-art { --art: 288px; }
  .ed-art .dither-cut { width: 198px !important; height: 270px !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .ed-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-art--bleed { margin-right: -1.5rem; }
  .ed-art--bleed-l { margin-right: -1.5rem; }
}