/* =============================================================================
   The reading layer. Loaded only on a node that has a written body.

   The article is the one place the site stops being a map and becomes a text,
   and it gets the same discipline as the orrery: everything drawn from the
   world's own hue, everything else in hairlines and ink. Two custom properties
   carry that hue in from the template -- --world-c, the display light, for
   dots, rings, rims and glows; --world-p, the contrast-checked prose hue, for
   anything a reader has to read. The same split, and the same law, as the
   --d-* / --p-* pillar tokens they are set from: display light never sits
   under text, prose hue never glows.

   The shape: a grid with the prose in the wide column and the article's own
   meridian -- the table of contents -- pinned beside it. Sections are numbered
   the way the index rows are numbered, two mono digits in the locale's own
   numerals, each one a circled anchor at the head of its section with a
   hairline ruled to the end of the measure. Figures woven between sections run
   wider than the prose, which is what marks them as plates between passages
   rather than illustrations of the nearest claim.
   ========================================================================== */

/* ---------- the frame ---------- */

.fgr-grid{
  --fgr-rail:232px;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--fgr-rail);
  column-gap:64px;
  align-items:start;
  border-top:1px solid var(--rule);
  margin-block-start:34px;
  padding-block-start:clamp(30px,4vw,44px);
}

/* The article owned its own top rule when it stood alone; inside the grid the
   frame draws it, spanning rail and prose together. */
.fgr-grid .node-body{
  max-width:none;border-top:0;margin-block:0;padding-block:0;
  min-width:0;
}

/* The measure is on the children, not the column: prose holds 70ch while a
   woven figure takes the column's full width. */
.fgr-open,
.fgr-s > :not(.dg),
.fgr-end{max-width:70ch}

/* ---------- the opening ---------- */

/* The paragraphs before the first heading are the page's thesis, and the first
   of them is set a step larger and in full ink -- the same voice the hero
   blurb used, carried across the fold. */
.fgr-open > p:first-child{
  font-size:calc(20px * var(--script-scale));
  line-height:1.62;
  color:var(--ink);
  letter-spacing:-.008em;
}

/* ---------- section heads ---------- */

.fgr-s{margin-block-start:clamp(48px,6vw,64px)}
.fgr-open + .fgr-s{margin-block-start:clamp(40px,5vw,52px)}

.fgr-h{
  display:flex;flex-direction:column;gap:18px;
  margin:0 0 16px;
}
/* main.css gives every .node-body h2 a 40px margin-top; the section already
   spaces itself, and the two must not add. */
.fgr-s .fgr-h{margin-top:0}

.fgr-h__row{display:flex;align-items:center;gap:16px}

/* The ordinal: the index rows' own coordinate voice -- two mono digits in the
   locale's numerals -- set in a ringed orb and wired to its section, so every
   section head hands you its deep link. */
.fgr-h__n{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:36px;block-size:36px;border-radius:50%;
  font-family:var(--f-mono);font-size:12px;font-weight:var(--w-label);
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  color:color-mix(in srgb, var(--world-p) 84%, var(--ink));
  border:1px solid color-mix(in srgb, var(--world-c) 46%, var(--rule));
  background:
    radial-gradient(120% 120% at 30% 20%,
      color-mix(in srgb, var(--world-c) 13%, transparent), transparent 62%);
  box-shadow:
    inset 0 0 14px color-mix(in srgb, var(--world-c) 10%, transparent),
    0 0 20px -8px color-mix(in srgb, var(--world-c) 62%, transparent);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.fgr-h__n:hover,.fgr-h__n:focus-visible{
  border-color:color-mix(in srgb, var(--world-c) 78%, var(--rule));
  box-shadow:
    inset 0 0 14px color-mix(in srgb, var(--world-c) 16%, transparent),
    0 0 24px -6px color-mix(in srgb, var(--world-c) 85%, transparent);
}

/* Ruled from the orb to the end of the measure, fading as it goes. A gradient
   has no logical direction, so the fade is named physically and flipped for
   the four right-to-left locales, same as the rail mask in main.css. */
.fgr-h__line{
  flex:1 1 auto;block-size:1px;
  background:linear-gradient(to right,
    color-mix(in srgb, var(--world-c) 38%, var(--rule)),
    var(--rule) 45%, transparent 96%);
}
[dir="rtl"] .fgr-h__line{
  background:linear-gradient(to left,
    color-mix(in srgb, var(--world-c) 38%, var(--rule)),
    var(--rule) 45%, transparent 96%);
}

.fgr-h__t{
  font-size:clamp(25px,2.9vw,33px);
  font-weight:var(--w-head);
  line-height:1.12;
  color:var(--ink);
}

.fgr-s h3{margin-top:26px;margin-bottom:8px}

/* ---------- prose furniture, in the world's own light ---------- */

.fgr .node-body a{
  color:var(--world-p, var(--p-ai));
  border-bottom:1.5px solid color-mix(in srgb, var(--world-p, var(--p-ai)) 38%, transparent);
  transition:border-color .2s ease, background-color .2s ease;
}
.fgr .node-body a:hover{
  border-bottom-color:var(--world-p, var(--p-ai));
  background:color-mix(in srgb, var(--world-c, var(--d-ai)) 9%, transparent);
}

.fgr .node-body blockquote{
  border-inline-start:2px solid color-mix(in srgb, var(--world-c) 70%, var(--rule-2));
}

.fgr .node-body li::marker{
  color:color-mix(in srgb, var(--world-c) 72%, var(--ink-3));
}

.fgr ::selection{
  background:color-mix(in srgb, var(--world-c, var(--p-ai)) 36%, transparent);
  color:#fff;
}

/* ---------- the end mark ---------- */

/* Three bodies on a wire, the centre one lit: the article signs off in the
   site's own glyph instead of just stopping in front of the index. */
.fgr-end{
  display:flex;align-items:center;gap:16px;
  margin-block:clamp(48px,6vw,64px) 10px;
}
.fgr-end i{
  flex:1 1 auto;block-size:1px;
  background:linear-gradient(90deg, transparent, var(--rule-2));
}
.fgr-end i:last-child{background:linear-gradient(90deg, var(--rule-2), transparent)}
.fgr-end b{
  flex:0 0 auto;inline-size:7px;block-size:7px;border-radius:50%;
  background:var(--world-c);
  box-shadow:0 0 12px color-mix(in srgb, var(--world-c) 80%, transparent);
}
.fgr-end b::before,.fgr-end b::after{content:""}

/* ---------- the meridian (table of contents) ---------- */

.fgr-rail{
  grid-column:2;grid-row:1;
  position:sticky;top:calc(var(--head-h) + 26px);
  max-height:calc(100vh - var(--head-h) - 52px);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;
}
.fgr-rail::-webkit-scrollbar{display:none}
.fgr-body{grid-column:1;grid-row:1}

.fgr-toc__head{
  list-style:none;cursor:default;
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:10.5px;font-weight:var(--w-label);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.fgr-toc__head::-webkit-details-marker{display:none}
.fgr-toc__head::marker{content:""}
/* The lit dot every label voice on this site opens with. */
.fgr-toc__head::before{
  content:"";flex:0 0 auto;inline-size:5px;block-size:5px;border-radius:50%;
  background:var(--world-c);box-shadow:0 0 10px var(--world-c);
}
.fgr-toc__fold{display:none;color:var(--ink-3)}

.fgr-toc__meta{
  display:flex;gap:7px;align-items:baseline;
  margin:9px 0 0;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

.fgr-toc__nav{margin-top:14px}
.fgr-toc__list{
  list-style:none;margin:0;padding:0;
  position:relative;
}
/* The track: one hairline the dots sit on. */
.fgr-toc__list::before{
  content:"";position:absolute;
  inset-block:14px;inset-inline-start:4px;inline-size:1px;
  background:var(--rule);
}
/* The fill: how far down the article the reader is, in the world's light.
   Height is written by reading.js; without it this is simply absent, and the
   track alone is a correct table of contents. */
.fgr-toc__fill{
  position:absolute;top:14px;inset-inline-start:3.5px;inline-size:2px;
  block-size:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--world-c) 55%, transparent), var(--world-c));
  box-shadow:0 0 9px color-mix(in srgb, var(--world-c) 55%, transparent);
  border-radius:2px;
  transition:block-size .18s linear;
}
@media (prefers-reduced-motion:reduce){.fgr-toc__fill{transition:none}}

.fgr-toc__list a{
  position:relative;
  display:grid;grid-template-columns:9px 1fr;column-gap:13px;
  align-items:start;
  padding-block:7px;
  font-size:13.5px;line-height:1.45;
  color:var(--ink-3);
  transition:color .2s ease;
}
.fgr-toc__list a:hover{color:var(--ink-2)}
.fgr-toc__list a.is-on{color:var(--ink)}

.fgr-toc__dot{
  inline-size:9px;block-size:9px;border-radius:50%;
  margin-top:.36em;
  border:1px solid var(--rule-2);
  background:var(--paper);
  transition:background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.fgr-toc__list a.is-past .fgr-toc__dot{
  border-color:color-mix(in srgb, var(--world-c) 55%, var(--rule-2));
  background:color-mix(in srgb, var(--world-c) 38%, var(--paper));
}
.fgr-toc__list a.is-on .fgr-toc__dot{
  border-color:var(--world-c);
  background:var(--world-c);
  box-shadow:0 0 11px color-mix(in srgb, var(--world-c) 85%, transparent);
}

/* ---------- reading progress, on the masthead's own hairline ---------- */

/* reading.js appends this to .mast; the fill rides the exact line the masthead
   already draws, so progress is the one lit segment of an existing edge rather
   than a new bar nailed over the page. transform-origin has no logical value,
   so it is flipped for RTL by hand, like every gradient above. */
.fgr-progress{
  position:absolute;inset-inline:0;bottom:-1px;height:2px;
  pointer-events:none;
}
.fgr-progress i{
  display:block;block-size:100%;
  transform:scaleX(var(--read,0));transform-origin:left;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--world-c, var(--d-ai)) 55%, transparent),
    var(--world-c, var(--d-ai)));
  box-shadow:0 0 10px color-mix(in srgb, var(--world-c, var(--d-ai)) 60%, transparent);
}
[dir="rtl"] .fgr-progress i{
  transform-origin:right;
  background:linear-gradient(270deg,
    color-mix(in srgb, var(--world-c, var(--d-ai)) 55%, transparent),
    var(--world-c, var(--d-ai)));
}
@media (prefers-reduced-motion:no-preference){
  .fgr-progress i{transition:transform .12s linear}
}

/* ---------- the pocket: the rail folded for one column ---------- */

@media (max-width:1020px){
  .fgr-grid{display:block}

  .fgr-rail{
    position:static;max-height:none;overflow:visible;
    margin-block-end:26px;
  }

  .fgr-toc{
    border:1px solid var(--rule);border-radius:12px;
    background:color-mix(in srgb, var(--surface) 62%, transparent);
    padding:14px 18px;
  }
  .fgr-toc__head{cursor:pointer}
  .fgr-toc__fold{display:block;margin-inline-start:auto;transition:rotate .2s ease}
  .fgr-toc[open] .fgr-toc__fold{rotate:180deg}
  .fgr-toc__meta{margin-top:10px}
  .fgr-toc__nav{margin-top:12px;padding-top:2px}

  .fgr-h__n{inline-size:32px;block-size:32px;font-size:11px}
  .fgr-h{gap:14px}
}