/* ══════════════════════════════════════════════════════════════
   ÉCHELLE VENTURES — moments and marks
   Sizing and placement for the small step drawings (js/echelle-moments.js)
   and the inline three-step mark on text pages.
   A moment is hidden until its script turns it on (.is-on), and its
   host only changes layout once that has happened (.ec-host), so
   without JS every page reads as it did.
   ══════════════════════════════════════════════════════════════ */

.ec-moment { display: none; }
.ec-moment.is-on { display: block; position: relative; min-width: 0; pointer-events: none; }
/* Chrome now applies align-self to absolute boxes; stretch keeps the canvas full height */
.ec-moment canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; align-self: stretch; }

/* ─── beside a page header ─── */
.ev-page-head.ec-host > .ec-moment {
  position: absolute; z-index: 0;
  right: var(--px); top: clamp(120px, 15vw, 180px); bottom: clamp(40px, 5vw, 72px);
  width: min(38%, 500px);
}
.ev-page-head.ec-host > :not(.ec-moment) { max-width: min(820px, 58%); }

/* ─── beside a section heading ─── */
.ev-section-header.ec-host {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%); grid-template-rows: 1fr auto;
  row-gap: 0; column-gap: clamp(24px, 4vw, 64px); align-items: end;
  min-height: clamp(180px, 17vw, 250px);
}
.ev-section-header.ec-host > :not(.ec-moment) { grid-column: 1; }
.ev-section-header.ec-host > .ev-section-header-aside { margin-top: 20px; }
/* sized by the header's min-height, so the canvas never pushes the words apart */
.ev-section-header.ec-host > .ec-moment { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }

/* ─── in a side column (contact) ─── */
.ec-moment.is-on[data-place="aside"] { height: clamp(200px, 18vw, 260px); margin-top: 8px; }
/* once the contact columns stack it is no longer beside the form */
@media (max-width: 900px) { .ec-moment.is-on[data-place="aside"] { display: none; } }

@media (max-width: 1080px) {
  .ev-page-head.ec-host > :not(.ec-moment) { max-width: 820px; }
  .ev-page-head.ec-host > .ec-moment { position: relative; inset: auto; width: 100%; max-width: 460px; height: 200px; margin-top: 28px; }
}

/* ─── phones: smaller, stacked under the words ─── */
@media (max-width: 760px) {
  .ev-page-head.ec-host > .ec-moment { height: 160px; margin-top: 20px; }
  .ev-section-header.ec-host { display: flex; min-height: 0; }
  .ev-section-header.ec-host > .ec-moment { width: 100%; max-width: 380px; height: 160px; }
}

/* ─── the three-step mark: three offset hairline plates, the top one in ink ───
   Takes the place of the short rule above the title on text pages. Plain SVG, so it needs no JS. */
.ec-mark { display: block; width: 58px; height: 28px; margin-bottom: 26px; color: var(--text); overflow: visible; }
.ec-mark path { fill: rgba(22,19,13,0.04); stroke: currentColor; stroke-opacity: 0.55; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ec-mark .ec-mark-top { fill: currentColor; fill-opacity: 0.92; stroke-opacity: 1; }