/* The essay post.
   ─────────────────────────────────────────────────────────────────────────
   A personal piece rather than a guide or a year in review, laid out the way
   the other new posts are: guide.css's header, intro, contents rail and
   numbered sections, and update.css's pull quote. This file only adds the
   few things this kind of post carries that those two do not. */

/* ── The opener ────────────────────────────────────────────────────────── */

/* update.css takes the intro's first paragraph back down to body size, which
   is right for its one long run-on opener. This intro is a single paragraph
   too, but it is the hook for the whole piece, so it sits between the two:
   larger than the body, smaller than the guide's lede. */
.es .gp-intro > p:first-child {
  font-size: clamp(17px, 1.5vw, 19px); line-height: 1.7; color: var(--text-2);
}

/* ── Beside the title ───────────────────────────────────────────────────── */

/* The photo sits next to the title, the way a spotlight's portrait does,
   rather than full width underneath it. Full width it was a whole screen of
   dice before the first sentence, and the picture sets a mood rather than
   showing anything the reader needs to study.

   Square, because the photographs this layout gets are landscape and a
   square loses less of one than a spotlight's 4:5 does. 250px is about the
   height of the kicker, title and standfirst beside it, so neither column
   leaves a band of empty space under itself.

   The title comes down a size. At the guide's 52px it took three lines of
   the column left beside the photo. */
.es-face {
  display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 32px;
  align-items: center; margin-bottom: 26px;
}
.es-face .gp-h { font-size: clamp(30px, 3.6vw, 42px); }
.es-face .gp-standfirst { margin-bottom: 0; }
.es-face-img {
  width: 250px; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 18px; display: block; background: var(--card-2);
}

/* ── Bleed ─────────────────────────────────────────────────────────────── */

/* The caption under the box is a <p> inside .gp-body, whose paragraph rule
   is one class and one element deep, so it is scoped under its box to
   outrank it.

   Built from text and borders rather than drawn as an SVG. The SVG scaled
   as one picture, so on a phone its 12px labels came out at about 6px. Here
   the labels stay body-sized and the layout turns on its side instead. */
.es-bleed-table {
  border: 1.5px dashed rgba(20,32,60,.22); border-radius: 12px;
  padding: 22px 22px 20px; background: #fff;
}
.es-bleed-row {
  display: grid; grid-template-columns: 150px 1fr 150px; gap: 18px; align-items: center;
}
.es-bleed-node {
  border: 1.5px solid var(--text); border-radius: 10px; padding: 16px 12px;
  text-align: center; background: #fff;
}
.es-bleed-node b {
  display: block; font-family: var(--fh); font-size: 15px; font-weight: 700; color: var(--text);
}
.es-bleed-node span { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 4px; }

.es-bleed-flows { display: grid; gap: 14px; }
.es-flow { display: grid; gap: 6px; }
.es-flow p {
  font-size: 13px; line-height: 1.45; color: var(--text-2); margin: 0; text-align: center;
}
.es-flow p b { color: var(--teal-dark); font-weight: 700; }
/* bleed-in reads above its arrow and bleed-out below, so the two labels sit
   on the outside and the arrows sit together in the middle. */
.es-flow--out p { order: 2; }

.es-flow-line { position: relative; height: 2px; background: var(--teal-dark); margin: 0 6px; }
.es-flow-line::after {
  content: ''; position: absolute; top: -4px; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.es-flow--in .es-flow-line::after { right: -6px; border-left: 8px solid var(--teal-dark); }
.es-flow--out .es-flow-line::after { left: -6px; border-right: 8px solid var(--teal-dark); }

.es-bleed-table .es-bleed-ring {
  font-size: 12.5px; color: var(--text-3); text-align: center;
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #EDEEF4;
}

/* ── The table's safety tools ──────────────────────────────────────────── */

/* Three terms the post names and a newcomer will not know. Side by side
   because they are three of a kind and none of them comes first. */
.es-tools {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0 30px;
}
.es-tool {
  border: 1px solid #EDEEF4; border-radius: 12px; padding: 18px 18px 16px;
  background: var(--card-2);
}
.es-tool-h {
  font-family: var(--fh); font-size: 15px; font-weight: 700; color: var(--text);
  margin: 0 0 8px;
}
.gp-body .es-tool p { font-size: 14.5px; line-height: 1.62; margin: 0; }
.gp-body .es-tools-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin: 30px 0 -14px;
}

/* ── Where to start ────────────────────────────────────────────────────── */

/* Three ways in, so three buttons of one kind. guide.css's second button is
   the dark one, which reads as "less important" and none of these is. A grid
   rather than gp-go's wrapping row, so all three come out the same width
   instead of each one being as wide as its own label. */
.es-go { display: grid; grid-template-columns: repeat(3, 1fr); }
.es-go .btn { justify-content: center; padding-left: 16px; padding-right: 16px; }

/* ── Narrow ────────────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  .es-tools { grid-template-columns: 1fr; }
  .es-go { grid-template-columns: 1fr; max-width: 340px; }
}

@media (max-width: 640px) {
  /* On a phone the photo goes under the standfirst at full width but kept
     short, so it is a band across the screen rather than a square that
     fills it. */
  .es-face { grid-template-columns: 1fr; gap: 22px; }
  .es-face-img { width: 100%; aspect-ratio: 16 / 9; border-radius: 13px; }

  /* The diagram turns on its side: you on top, the character underneath,
     and the two arrows side by side between them pointing down and up. */
  .es-bleed-table { padding: 16px 14px 18px; }
  .es-bleed-row { grid-template-columns: 1fr; gap: 12px; }
  .es-bleed-flows { grid-template-columns: 1fr 1fr; gap: 10px; }
  .es-flow { justify-items: center; }
  .es-flow--out p { order: 0; }
  .es-flow-line { width: 2px; height: 40px; margin: 6px 0; }
  /* Both heads restated in full. The wide rules above are two classes deep,
     so a one-class override here would lose to them and keep the sideways
     triangles. */
  .es-flow--in .es-flow-line::after,
  .es-flow--out .es-flow-line::after {
    left: -4px; right: auto;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
  }
  .es-flow--in .es-flow-line::after {
    top: auto; bottom: -6px; border-top: 8px solid var(--teal-dark); border-bottom: 0;
  }
  .es-flow--out .es-flow-line::after {
    top: -6px; bottom: auto; border-bottom: 8px solid var(--teal-dark); border-top: 0;
  }
}