/* static/css/pages/editorial.css
   Page layout for the Editorial view only. The page title, standfirst and
   crosshairs are shared components (components.css). Numbers are design px
   of the revised Editorial artboard (the Términos .ai, page index 1, rendered
   as design/renders/page-4.png); the content region starts at y=121.8 and
   ends at y=951.8.

   Rows and columns take a minimum height rather than a fixed one: where the
   type hits its clamp() floor (narrow viewports) a line may wrap, and the
   column grows instead of running into its crosshair (each column keeps
   clear space above its crosshair). On a viewport taller than 16:9 the
   bottom band's dividers stretch to keep their 48.2px gap to the footer;
   if the page outgrows the region instead, .ed scrolls. */
.ed {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* The split rule and the left column's text overhang the content edges
     (x 48.2 and 1866.7); the padding keeps them inside the scrollport. */
  margin-inline: calc(-8 * var(--u));
  padding-inline: calc(8 * var(--u));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) var(--ground);
}

/* ---- Shared column vocabulary ------------------------------------------ */
.ed__col { position: relative; --xh-size: calc(15 * var(--u)); }
.ed__head {                                /* 20.2 medium, a 184.4-wide hairline 15 under the baseline (y 178.6 / 542.5) */
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: var(--fw-medium);
  line-height: calc(24 * var(--u));
}
.ed__head::after {
  content: "";
  display: block;
  width: calc(184.4 * var(--u));
  height: var(--rule);
  margin-top: calc(10.1 * var(--u));
  background: var(--ink);
}
.ed__text { margin-top: calc(17 * var(--u)); }
.ed__text p, .ed__lede {                   /* 13.2 on a 19.1 grid, a blank line between paragraphs */
  margin: 0;
  font-size: var(--fs-body);
  line-height: calc(19.1 * var(--u));
  letter-spacing: -.0694em;
}
.ed__text p + p { margin-top: calc(19.1 * var(--u)); }

/* ---- Top band: hero | project | editor's note | about ------------------- */
.ed__top {                                 /* dividers x=560.3 / 1011.8 / 1451.2 */
  flex: none;
  display: grid;
  min-height: calc(357.1 * var(--u));      /* split rule y=477.9 */
  grid-template-columns: calc(503.6 * var(--u)) calc(451.5 * var(--u)) calc(439.4 * var(--u)) 1fr;
  border-bottom: var(--rule-strong) solid var(--ink);
  margin-right: calc(-2.4 * var(--u));     /* rule ends x=1866.7 */
  padding-right: calc(2.4 * var(--u));
}
.ed__hero { padding-top: calc(44.2 * var(--u)); }   /* same title block as artboard 2 */
.ed__top > .ed__col {                      /* dividers y 147.5–450 */
  min-height: calc(302.5 * var(--u));
  margin-block: calc(25.7 * var(--u)) calc(26.9 * var(--u));   /* equal dividers when one grows */
  padding-bottom: calc(18 * var(--u));     /* text clears the crosshair */
  border-left: var(--rule-strong) solid var(--ink);
}
.ed__top .ed__head { margin-top: calc(-2.5 * var(--u)); }   /* baseline 163.6, above the divider top */
.ed__top .ed__text { margin-top: calc(16 * var(--u)); }
.ed__top .xh--bl { bottom: calc(-7.6 * var(--u)); }          /* centre y=450.1 */

/* Set like the note: heading baseline 163.6, blurb baselines 209.8 / 228.9 / 248.0. */
.ed__col--project { padding-left: calc(49.4 * var(--u)); }  /* text x=610.7 */
.ed__col--project .ed__head::after { margin-left: calc(3.7 * var(--u)); }   /* hairline x 614.4–798.7, not flush with the text */
.ed__marks {                               /* target 611.4, eye 697.5, asterisk 786.7; tops 318 / 316.3 */
  position: absolute;
  left: calc(46.1 * var(--u));
  top: calc(164.8 * var(--u));
  display: flex;
  align-items: flex-start;
}
.ed__mark { display: block; flex: none; }
.ed__mark--target { width: calc(57.14 * var(--u)); height: calc(57.14 * var(--u)); margin-top: calc(1.7 * var(--u)); }
.ed__mark--eye { width: calc(63.99 * var(--u)); height: calc(60.9 * var(--u)); margin-left: calc(28.96 * var(--u)); }
.ed__mark--asterisk { width: calc(57.69 * var(--u)); height: calc(60.9 * var(--u)); margin-left: calc(25.21 * var(--u)); }

.ed__col--note { padding-left: calc(37 * var(--u)); }       /* text x=1049.8 */
.ed__col--note .xh--bl { left: calc(38.2 * var(--u)); }     /* centre x=1058.5 */
.ed__col--about { padding-left: calc(33.1 * var(--u)); }    /* text x=1485.3 */
.ed__col--about .xh--bl { left: calc(32 * var(--u)); }      /* centre x=1491.7 */

/* ---- Bottom band: why we observe | why water | methodology -------------- */
.ed__bottom {                              /* dividers x=557.1 / 1129.6 */
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: calc(500.4 * var(--u)) calc(572.5 * var(--u)) 1fr;
}
.ed__bottom > .ed__col {                   /* dividers y 505.9–903.6, headings baseline 527.5 */
  min-height: calc(397.7 * var(--u));
  margin-block: calc(27 * var(--u)) calc(48.2 * var(--u));
  padding-top: calc(2 * var(--u));
}
.ed__bottom .xh--bl { bottom: calc(-25.1 * var(--u)); }     /* centre y=921.2, under the dividers */

.ed__col--why { margin-left: calc(-5.3 * var(--u)); }       /* heading x=50.4, left of the margin */
.ed__col--why .ed__text { margin-left: calc(-2.2 * var(--u)); }   /* text x=48.2, left of its heading */
.ed__col--why .xh--bl { left: calc(-2.45 * var(--u)); }     /* centre x=55.45 */
.ed__col--water {                          /* text x=594.6 */
  padding-left: calc(36.5 * var(--u));
  border-left: var(--rule-strong) solid var(--ink);
}
.ed__col--water .xh--bl { left: calc(35.3 * var(--u)); }    /* centre x=600.9 */
.ed__col--method {                         /* text x=1167.8 */
  padding-left: calc(37.2 * var(--u));
  border-left: var(--rule-strong) solid var(--ink);
}
.ed__col--method .xh--bl { left: calc(28.75 * var(--u)); }  /* centre x=1166.85 */

.ed__lede { margin-top: calc(6.7 * var(--u)); }             /* baseline 564.2 */

/* Steps: title baselines 604.4 / 673.8 / 742.1 / 814.2. A step's top sits
   13.8 above its title baseline (tops 590.6 / 660.0 / 728.3 / 800.4); the
   offsets below are from that top. The note, the rule, the mark and the
   dashed rule sit a little differently in each step on the artboard. */
.ed__steps { list-style: none; margin: calc(21.8 * var(--u)) 0 0; padding: 0; }
.ed__step {
  position: relative;
  padding-left: calc(95.5 * var(--u));     /* text x=1263.3 */
}
.ed__step:nth-child(1) {                   /* rule y 588.5, note 620.5, dashes 631.0 */
  min-height: calc(69.4 * var(--u));
  --rule-top: calc(-2.1 * var(--u)); --note-gap: calc(-0.05 * var(--u)); --dash-gap: calc(6.36 * var(--u));
}
.ed__step:nth-child(2) {                   /* rule y 658.2, note 690.6, dashes 704.7 */
  min-height: calc(68.3 * var(--u));
  --rule-top: calc(-1.8 * var(--u)); --note-gap: calc(0.65 * var(--u)); --dash-gap: calc(9.96 * var(--u));
}
.ed__step:nth-child(3) {                   /* rule y 727.9, note 757.6, dashes 770.8 */
  min-height: calc(72.1 * var(--u));
  --rule-top: calc(-0.4 * var(--u)); --note-gap: calc(-0.65 * var(--u)); --dash-gap: calc(9.05 * var(--u));
}
/* Deviation: the artboard sets this note's baseline 828.6, 14.4 under its
   title's, so the two lines' font boxes overlap 3.0 (the glyphs do not) and
   the layout gate (tolerance 2) rejects it. The note drops 1.1 to 829.7,
   15.5 under the title like step 03; the dashes stay on y 842.3. */
.ed__step:nth-child(4) {                   /* rule y 797.6, note 829.7 (828.6 drawn), dashes 842.3 */
  --rule-top: calc(-2.8 * var(--u)); --note-gap: calc(-0.65 * var(--u)); --dash-gap: calc(8.45 * var(--u));
}
.ed__step::before {                        /* x=1235.4, 36.8 tall */
  content: "";
  position: absolute;
  left: calc(67.1 * var(--u));
  top: var(--rule-top);
  width: var(--rule);
  height: calc(36.8 * var(--u));
  background: var(--ink);
}
/* Marks: the generated SVGs scaled so their paths land on the artboard's,
   strokes ~1.6 as drawn (x 1185.8–1221.2; the eye 1181.6–1225.4). */
.ed__step-mark { position: absolute; display: block; }
.ed__step:nth-child(1) .ed__step-mark {    /* target at 0.720, top 588.5 */
  left: calc(15.12 * var(--u)); top: calc(-4.98 * var(--u));
  width: calc(41.16 * var(--u)); height: calc(41.16 * var(--u));
}
.ed__step:nth-child(2) .ed__step-mark {    /* eye at 0.782, stem y 655.2–696.7 */
  left: calc(10.67 * var(--u)); top: calc(-7.93 * var(--u));
  width: calc(50.06 * var(--u)); height: calc(47.64 * var(--u));
}
.ed__step:nth-child(3) .ed__step-mark {    /* diamond at 0.935, top 727.9 */
  left: calc(14.26 * var(--u)); top: calc(-4.14 * var(--u));
  width: calc(42.88 * var(--u)); height: calc(42.88 * var(--u));
}
.ed__step:nth-child(4) .ed__step-mark {    /* circle at 1.037, top 797.6 */
  left: calc(13.85 * var(--u)); top: calc(-6.95 * var(--u));
  width: calc(43.7 * var(--u)); height: calc(43.7 * var(--u));
}
.ed__step-title {                          /* 14.1 medium, baseline 13.8 into the line */
  margin: 0;
  font-size: var(--fs-step);
  font-weight: var(--fw-medium);
  line-height: calc(17 * var(--u));
  white-space: pre;                        /* "01   HECHO…": three spaces on the artboard */
}
.ed__step-note {                           /* 13.2, baseline 14.4–16.8 under the title's */
  margin: var(--note-gap) 0 0;
  font-size: var(--fs-body);
  line-height: calc(16 * var(--u));
  letter-spacing: -.0694em;
}
/* Round-capped 5.467/5.467 dash, 2.19 thick, x 1263.3–1766.2 (caps reach
   1262.2–1767.3), 10.5–14.1 under the note baseline: a short solid lead-in,
   dashes 7.66 on / 3.28 off, then a separate end cap. The dashed path runs
   right to left, so its pattern is anchored at its right end (1759.1) and
   the first whole dash starts x 1270.3. */
.ed__step-note::after {
  content: "";
  display: block;
  width: calc(505.1 * var(--u));
  height: calc(2.19 * var(--u));
  margin: var(--dash-gap) 0 0 calc(-1.1 * var(--u));
  background:
    linear-gradient(var(--ink), var(--ink)) left / calc(4.9 * var(--u)) 100% no-repeat,
    repeating-linear-gradient(to right,
      var(--ink) 0 calc(7.657 * var(--u)), transparent calc(7.657 * var(--u)) calc(10.934 * var(--u)))
      calc(8.14 * var(--u)) 0 / calc(488.76 * var(--u)) 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) right / calc(4.9 * var(--u)) 100% no-repeat;
}

/* The line to the Términos page: 11.3 regular, x=1167.8, baseline 886.1.
   Plain at rest, as drawn; underlined on hover like the site's other links. */
.ed__terms {                               /* line top 873.9, 30.45 under the last dashes */
  margin: calc(30.45 * var(--u)) 0 0;
  font-size: var(--fs-step-note);
  line-height: calc(16 * var(--u));
  letter-spacing: -.0694em;
}
.ed__terms a { color: inherit; text-decoration: none; }
.ed__terms a:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: var(--rule);
}