/* ==========================================================================
   AXI-x Sky v0.1 — classical typography on the union grid.  (extension; not SNX core)
   Study: /explorations/013-sky/   Engine: SNX v0.1.4

   The sky is the space between manifests where the long-form writing lives.
   This score sets it on the page's own grid rather than beside it. Laws:
     1. The baseline unit is half a row. --sky-unit = --snx-row / 2: 32px at
        XL, 28 at L and M, 24 at S. Every line box in the sky is a whole
        number of units tall; every vertical margin is a whole number of units
        (less a cap height where a block is trimmed, law 3). So every second
        baseline is a row line, and a manifest set in the sky sits on
        baselines top and bottom.
     2. The measure is columns, not ch. The sky is a grid of the page's base
        columns; text takes four of seven (columns 2–5), four of five, three
        of three; the two right-hand columns at 7×5 are the margin, where the
        notes go. Text is inset from the column line by one microcolumn, the
        way a block's padding is. (AXI-011 found 64ch held 82 characters; this
        measure holds about 70 at L, measured live.)
     3. Baselines on the line. Every text block is trimmed (text-box: trim-both
        cap alphabetic) so its box runs from cap top to last baseline, and its
        top margin is N units less its own cap height (cap = 0.7031em for
        Schibsted Grotesk, 0.698em for Plex Mono — from the font files). The
        result: each first baseline lands exactly N units after the previous
        block's last baseline, on a unit line. Where trim is unsupported the
        cap terms vanish (--tb: 0) and baselines share one constant offset.
     4. Sizes from the scale, line boxes from the unit. Body s2 at 1 unit,
        subhead s3 at 1, head s5 at 2, display s7 at 2 — at L. XL is the
        broadsheet: everything steps up one (body s3 at 32px). S drops the
        display to s6. A leading of 1.41 on the phone is right because the
        measure there is 41 characters: leading follows measure.
     5. The indent is the unit (Bringhurst's rule: an indent equal to the
        leading). Two paragraph modes, both on the grid: indent (no space,
        first paragraph after a head flush) or space (one unit between).
     6. Seasoning is rationed. One initial per essay (three lines, the sky's
        one signal), one ornament per passage (three blocks, one unit tall),
        spaced capitals for the opening words because the font has no small
        caps, proportional figures because it has no old-style ones. Sidenotes
        are the classical marginalia: floated into the margin columns at 7×5
        on the same baseline as their referent; folded into the line as
        parentheticals elsewhere. Inline variants set line-height 1 so they
        can never grow a line.
     7. Feed/score. sky.js measures and writes numbers (data-* and --sky-b0);
        this file draws everything, including the grid overlays.
   Opt-in: a .sky element following a stage; data-lines / data-cols overlays;
   data-para="indent|space"; data-notes="margin|inline".
   ========================================================================== */
.sky{
  --sky-unit:calc(var(--snx-row)/2);
  --sky-body:var(--snx-s2); --sky-sub:var(--snx-s3); --sky-head:var(--snx-s5); --sky-display:var(--snx-s7);
  --sky-note:var(--snx-s1); --sky-meta:10.5px;
  --sky-cap:.7031; --sky-capm:.698;      /* cap-height ratios, from the font files */
  --tb:1;                                 /* 1 when text-box-trim is live, 0 when not */
  /* line-box top to baseline, body and note: the instrument overwrites these with what the browser did */
  --sky-lt:calc(var(--sky-unit)/2 + .36*var(--sky-body));
  --sky-ltn:calc(var(--sky-unit)/2 + .36*var(--sky-note));
  --sky-micro:calc(100cqw/var(--snx-union));
  --sky-inset:var(--sky-micro);
  --sky-cols:2 / span 4;                  /* the text columns */
  position:relative;
  display:grid;grid-template-columns:repeat(var(--snx-base),1fr);
  container-type:inline-size;
  counter-reset:sn;
  margin:var(--snx-row) 0;
  font-size:var(--sky-body);line-height:var(--sky-unit);
  font-variant-numeric:proportional-nums;
  font-kerning:normal;
}
@media (min-width:1440px){.sky{--sky-body:var(--snx-s3);--sky-sub:var(--snx-s4);--sky-head:var(--snx-s6);--sky-note:var(--snx-s2)}}
@media (max-width:1023px){.sky{--sky-cols:1 / span 4}}
@media (max-width:639px){.sky{--sky-cols:1 / -1;--sky-inset:0px;--sky-display:var(--snx-s6)}}
@supports not (text-box-trim:trim-both){.sky{--tb:0}}

/* every child is a row of the sky; text children take the text columns */
.sky > *{grid-column:var(--sky-cols);min-width:0;margin:0;padding-inline:var(--sky-inset)}
.sky > .isle{grid-column:1 / -1;padding-inline:0}

/* ---------- law 3: trimmed blocks, margins in units less a cap ---------- */
.sky p,.sky h2,.sky h3,.sky li,.sky figcaption,.sky .eyebrow{text-box:trim-both cap alphabetic}
.sky .eyebrow{margin-top:calc(var(--sky-unit) - var(--tb)*var(--sky-capm)*var(--sky-meta))}
.sky h2{margin-top:calc(3*var(--sky-unit) - var(--tb)*var(--sky-cap)*var(--sky-display))}
.sky h3{margin-top:calc(2*var(--sky-unit) - var(--tb)*var(--sky-cap)*var(--sky-sub))}
.sky p{margin-top:calc(1*var(--sky-unit) - var(--tb)*var(--sky-cap)*var(--sky-body))}
.sky h2 + p,.sky h3 + p,.sky figure + p,.sky .orn + p,.sky ul + p{margin-top:calc(2*var(--sky-unit) - var(--tb)*var(--sky-cap)*var(--sky-body))}
.sky figure{margin-top:calc(2*var(--sky-unit))}
.sky .orn{margin-top:var(--sky-unit)}
.sky ul{margin-top:0;padding-left:calc(var(--sky-inset) + var(--sky-unit));list-style:none}
.sky li{margin-top:calc(var(--sky-unit) - var(--tb)*var(--sky-cap)*var(--sky-body));position:relative}
.sky li:first-child{margin-top:calc(2*var(--sky-unit) - var(--tb)*var(--sky-cap)*var(--sky-body))}
.sky li::before{content:'';position:absolute;left:calc(-1*var(--sky-unit));top:calc(var(--tb)*var(--sky-cap)*var(--sky-body) - 7px + (1 - var(--tb))*(var(--sky-unit)/2 + .36*var(--sky-body) - 7px));width:7px;height:7px;background:var(--snx-navy)}

/* ---------- law 5: paragraph modes ---------- */
.sky[data-para="indent"] p + p{text-indent:var(--sky-unit)}
.sky[data-para="space"] p + p{margin-top:calc(2*var(--sky-unit) - var(--tb)*var(--sky-cap)*var(--sky-body))}

/* ---------- law 4: the type ---------- */
.sky .eyebrow{font-family:var(--snx-mono);font-size:var(--sky-meta);letter-spacing:.16em;text-transform:uppercase;color:var(--snx-ai-deep);line-height:var(--sky-unit);font-weight:600}
.sky .eyebrow::before{content:'';display:inline-block;width:9px;height:9px;background:var(--snx-signal);margin-right:10px;vertical-align:baseline}
.sky h2{font-size:var(--sky-display);line-height:calc(2*var(--sky-unit));font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.sky h3{font-size:var(--sky-sub);line-height:var(--sky-unit);font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.sky p{text-wrap:pretty;hyphens:auto;hanging-punctuation:first last}
.sky a{text-decoration-thickness:1px;text-underline-offset:.14em}
.sky strong{font-weight:700}
/* small type in the line never grows the line */
.sky sup,.sky .snm{font-size:.68em;line-height:0;vertical-align:baseline;position:relative;top:-.55em;font-family:var(--snx-mono);font-weight:600;color:var(--snx-ai-deep);margin-left:.08em}

/* ---------- law 6: the seasoning ---------- */
/* the initial: three lines, the sky's one signal */
.sky .lede::first-letter{initial-letter:3;font-weight:800;color:var(--snx-signal);margin-right:.08em}
@supports not (initial-letter:3){
  .sky .lede::first-letter{
    float:left;line-height:1;
    font-size:calc((2*var(--sky-unit) + var(--sky-cap)*var(--sky-body))/var(--sky-cap));
    /* cap top to the paragraph's top: the box's baseline sits at .977em − (1−1.234)/2·em = .86em, the cap at .703em below that */
    margin-top:calc(-.157*(2*var(--sky-unit) + var(--sky-cap)*var(--sky-body))/var(--sky-cap));
    margin-right:.06em;
  }
}
/* the font has no smcp: the opening words are spaced capitals, the classical substitute */
.sky .sc{text-transform:uppercase;font-size:.82em;letter-spacing:.08em;line-height:1;font-weight:600}
/* the ornament: three blocks on the text axis, one unit tall */
.sky .orn{height:calc(2*var(--sky-unit));border:0;position:relative;background:none}
.sky .orn::before{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--snx-ink);box-shadow:-16px 0 0 var(--snx-navy),16px 0 0 var(--snx-navy)}
/* marginalia: in the margin columns at 7×5, on the referent's baseline */
.sky .sn{
  float:right;clear:right;
  width:calc(8*var(--sky-micro));margin-right:calc(-10*var(--sky-micro));
  font-size:var(--sky-note);line-height:var(--sky-unit);
  /* trimmed like every block, so a note that runs past its paragraph adds whole units, never a fraction */
  text-box:trim-both cap alphabetic;
  /* the float's top is the referent's line-box top; the browser's distance from that top to the
     baseline (--sky-lt) is measured by the instrument, because engines round font metrics to whole
     pixels. Until it reports, the fonts' own ratio: unit/2 + .36 × body. */
  padding-top:calc(var(--tb)*(var(--sky-lt) - var(--sky-cap)*var(--sky-note)) + (1 - var(--tb))*(var(--sky-lt) - var(--sky-ltn)));
  color:var(--snx-ink-60);text-indent:0;hyphens:manual;text-wrap:pretty;
}
.sky .sn b{font-family:var(--snx-mono);font-size:.78em;font-weight:600;color:var(--snx-ai-deep);margin-right:.5em;line-height:0}
.sky .sn::after{content:''}
/* folded into the line: a parenthetical in the annotation voice */
.sky[data-notes="inline"] .sn,.sky .sn.is-inline{
  float:none;clear:none;display:inline;width:auto;margin:0;padding:0;
  font-size:.86em;line-height:1;color:var(--snx-ink-60);
}
.sky[data-notes="inline"] .sn::before,.sky .sn.is-inline::before{content:' ('}
.sky[data-notes="inline"] .sn::after,.sky .sn.is-inline::after{content:')'}
.sky[data-notes="inline"] .sn b,.sky .sn.is-inline b{margin-right:.35em}
@media (max-width:1023px){
  .sky .sn{float:none;clear:none;display:inline;width:auto;margin:0;padding:0;font-size:.86em;line-height:1}
  .sky .sn::before{content:' ('}
  .sky .sn::after{content:')'}
  .sky .sn b{margin-right:.35em}
}

/* ---------- figures: manifests in the sky ---------- */
.sky figure{position:relative}
.sky figure .mf{height:calc(8*var(--sky-unit))}          /* four rows: eight baselines */
.sky figure.tall .mf{height:calc(10*var(--sky-unit))}
.sky figcaption{font-family:var(--snx-mono);font-size:var(--sky-meta);letter-spacing:.06em;color:var(--snx-ink-40);line-height:var(--sky-unit);margin-top:calc(var(--sky-unit) - var(--tb)*var(--sky-capm)*var(--sky-meta));text-wrap:pretty}
.sky figcaption b{color:var(--snx-ink);font-weight:600}

/* ---------- overlays (opt-in): the unit lines, the row lines, the columns ---------- */
.sky::before,.sky::after{content:none;position:absolute;inset:0;pointer-events:none;z-index:7}
.sky[data-lines]::before{
  content:'';
  background-image:
    repeating-linear-gradient(to bottom,var(--snx-ink-40) 0 1px,transparent 1px calc(2*var(--sky-unit))),
    repeating-linear-gradient(to bottom,rgba(164,75,224,.45) 0 1px,transparent 1px var(--sky-unit));
  background-position:0 calc(var(--sky-b0,0px) - 1px),0 calc(var(--sky-b0,0px) - 1px);
}
.sky[data-cols]::after{
  content:'';
  background-image:linear-gradient(to right,var(--snx-ink-18) 0 1px,transparent 1px);
  background-size:calc(100%/var(--snx-base)) 100%;
  box-shadow:inset -1px 0 0 var(--snx-ink-18);
}
@media (prefers-reduced-motion:reduce){.sky *{transition:none}}