/* -----------------------------------------------------------------------------
   The shell every figure stands in.
   -------------------------------------------------------------------------- */

.dg{
  --dg-line:rgb(255 255 255 / .10);
  --dg-line-2:rgb(255 255 255 / .19);
  --dg-ink:rgb(255 255 255 / .90);
  --dg-ink-2:rgb(255 255 255 / .62);
  --dg-ink-3:rgb(255 255 255 / .44);
  /* The inside of a body: darker than the page, so a lit shape reads as a hole
     punched in the sky with light around its rim rather than as a sticker on
     top of it. Same token the orrery uses, for the same reason. */
  --dg-void:var(--void);
  --dg-plate:color-mix(in srgb, var(--surface) 46%, transparent);
  --dg-gap:clamp(14px, 2.2vw, 26px);
  --dg-r:6px;

  position:relative;
  margin-block:clamp(38px, 6vw, 72px);
}

/* NUMBERS INSIDE A RIGHT TO LEFT PARAGRAPH.
 *
 * A `display` string is content, and content like "35 kB" is a left to right
 * run: a number, a space and a Latin unit. Dropped into a Persian paragraph the
 * bidi algorithm reorders the run against the paragraph's own direction and the
 * reader gets "kB 35" -- which is not a typo, it is the correct rendering of a
 * string that was never told it was its own sentence.
 *
 * `plaintext` takes each element's direction from ITS OWN first strong
 * character rather than from the paragraph. "35 kB" starts with a Latin letter
 * and lays out left to right; «۳۵ کیلوبایت» starts with a Persian letter and lays
 * out right to left. Both are then right, and neither needed a per-locale rule.
 *
 * This is on a class rather than on a list of selectors because the list would
 * go stale the first time someone adds a twelfth kind of number. Every element
 * in this library that prints a value carries it. */
.dg-num{unicode-bidi:plaintext}

/* For text that must exist for a screen reader and must not be drawn. The theme
   has no such utility of its own yet, and the checklist needs one: its marks are
   SVG, and an SVG tick with no accessible name is a row whose answer is only
   available to people who can see it. */
.dg-sr{
  position:absolute;inline-size:1px;block-size:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --- heading ------------------------------------------------------------- */

.dg__head{max-width:64ch;margin-bottom:clamp(20px, 3vw, 34px)}

.dg__eyebrow{
  font-family:var(--f-mono);font-size:10.5px;font-weight:var(--w-label);
  letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb, var(--dg-c) 74%, #fff);
  margin-bottom:12px;
  display:flex;align-items:center;gap:9px;
}
/* A lit dot in the figure's own hue, the same mark that opens every index row.
   It is how a reader knows the drawing below belongs to this world. */
.dg__eyebrow::before{
  content:"";flex:0 0 auto;inline-size:5px;block-size:5px;border-radius:50%;
  background:var(--dg-c);box-shadow:0 0 10px var(--dg-c);
}

.dg__title{font-size:clamp(24px, 3.1vw, 34px);line-height:1.1;color:var(--ink)}
.dg__lead{
  margin-top:12px;max-width:58ch;
  font-size:calc(15.5px * var(--script-scale));line-height:1.6;color:var(--dg-ink-2);
}

/* --- the stage ------------------------------------------------------------ */

/* A field, not a card.

   The obvious way to say "a drawing lives here" is a panel with a border and a
   radius, and it is wrong on this site for one reason: it cuts a lit rectangle
   out of a continuous night and puts a seam around it. So the stage is defined
   the way the footer is -- by a hairline that fades out before it reaches the
   edge, and by the figure's own light pooling behind it. Nothing is enclosed
   and nothing is cropped. */
.dg__stage{
  position:relative;isolation:isolate;
  padding-block:clamp(30px, 4.4vw, 54px);
  padding-inline:clamp(4px, 2vw, 22px);
}
.dg__stage::before,
.dg__stage::after{
  content:"";position:absolute;inset-inline:0;block-size:1px;
  background:linear-gradient(90deg, transparent, var(--dg-line) 14%,
             var(--dg-line) 86%, transparent);
}
.dg__stage::before{inset-block-start:0}
.dg__stage::after{inset-block-end:0}

/* The figure's own light, pooled behind it. Two washes rather than one: a
   broad low one that lifts the whole field off the page ground, and a tight
   one under the centre of the drawing where the shape actually is. */
.dg__grid{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(72% 92% at 50% 42%, color-mix(in srgb, var(--dg-c) 7%, transparent) 0%, transparent 72%),
    radial-gradient(130% 120% at 50% 0%, color-mix(in srgb, var(--dg-c) 3%, transparent) 0%, transparent 60%);
}
/* Engraved graph paper, faded to nothing at every edge. It is the difference
   between a shape floating in the dark and an instrument standing on a plate.
   The mask is what keeps it from having a border of its own. */
.dg__grid::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / .038) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / .038) 1px, transparent 1px);
  background-size:44px 44px;
  background-position:center center;
  -webkit-mask-image:radial-gradient(70% 76% at 50% 50%, #000 0%, transparent 78%);
  mask-image:radial-gradient(70% 76% at 50% 50%, #000 0%, transparent 78%);
}

/* --- caption -------------------------------------------------------------- */

.dg__note{
  display:flex;gap:11px;align-items:flex-start;
  margin-top:20px;max-width:70ch;
  font-size:calc(13.5px * var(--script-scale));line-height:1.6;color:var(--dg-ink-3);
}
.dg__note::before{
  content:"";flex:0 0 auto;
  inline-size:16px;block-size:1px;margin-block-start:.72em;
  background:var(--dg-line-2);
}

/* -----------------------------------------------------------------------------
   Atoms shared across families.

   These are the pieces that recur: an ordinal, a name, a sentence under a name,
   a lit round body, a flat plate. They live in `base` rather than being redrawn
   per structure so that a step in a flow and a station on a road are visibly the
   same object -- which is the whole reason the library reads as one library.
   -------------------------------------------------------------------------- */

/* The ordinal. Same face, same tabular figures and same glow as the rail down
   the left of every index, one size down. */
.dg-n{
  font-family:var(--f-display);font-weight:600;
  font-size:15px;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:color-mix(in srgb, var(--c, var(--dg-c)) 66%, transparent);
  text-shadow:0 0 14px color-mix(in srgb, var(--c, var(--dg-c)) 26%, transparent);
}

.dg-name{
  font-family:var(--f-display);font-weight:var(--w-name);
  font-size:calc(15.5px * var(--script-scale));line-height:1.28;
  letter-spacing:-.018em;color:var(--dg-ink);
  text-wrap:balance;
}
a.dg-name{transition:color .26s ease}
a.dg-name:hover{color:color-mix(in srgb, var(--c, var(--dg-c)) 60%, #fff)}

.dg-say{
  display:block;margin-top:5px;
  font-size:calc(12.8px * var(--script-scale));line-height:1.5;
  color:var(--dg-ink-3);text-wrap:pretty;
}

/* A small uppercase tag. The label voice, and in a cursive script script.css
   has already taken the tracking and the case off it. */
.dg-tag{
  display:inline-block;
  font-family:var(--f-mono);font-size:9.5px;font-weight:var(--w-label);
  letter-spacing:.13em;text-transform:uppercase;
  color:color-mix(in srgb, var(--c, var(--dg-c)) 78%, #fff);
  padding:3px 8px;border-radius:100px;
  background:color-mix(in srgb, var(--c, var(--dg-c)) 11%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c, var(--dg-c)) 24%, transparent);
  white-space:nowrap;
}

/* --- a lit body ----------------------------------------------------------- */

/* The orrery's planet, in CSS, for the structures that are not drawn in SVG.

   Three passes, and the split is load bearing -- template-parts/atlas.php has
   the long version. In one line: one gradient running white to hue to void puts
   a visible inflection inside the disc that the eye reads as an edge, so the
   body wears a grey thumbprint. Split into a centred LIMB, an offset KEY and one
   small white GLOSS, each of which moves one way only, the artefact has nowhere
   to come from.

   Dark in the middle on purpose. A name is set inside these, in white, and a
   bright fill would put 2:1 text on a 3:1 ground. */
.dg-body{
  position:relative;border-radius:50%;
  background:
    radial-gradient(circle closest-side at 34% 26%,
      color-mix(in srgb, var(--c) 34%, transparent) 0%,
      color-mix(in srgb, var(--c) 13%, transparent) 34%,
      color-mix(in srgb, var(--c)  3%, transparent) 66%,
      transparent 100%),
    radial-gradient(circle closest-side at 50% 50%,
      transparent 0%,
      color-mix(in srgb, var(--c)  4%, transparent) 54%,
      color-mix(in srgb, var(--c) 17%, transparent) 80%,
      color-mix(in srgb, var(--c) 38%, transparent) 93%,
      color-mix(in srgb, var(--c) 60%, transparent) 100%),
    var(--dg-void);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent),
    0 0 34px -6px color-mix(in srgb, var(--c) 30%, transparent);
}
/* The specular. Its own small ellipse near the lit limb, and the only white in
   the stack -- white anywhere else is what turns a coloured body grey. */
.dg-body::before{
  content:"";position:absolute;
  inset-block-start:9%;inset-inline-start:17%;
  inline-size:42%;block-size:32%;border-radius:50%;
  background:radial-gradient(closest-side at 50% 50%,
    rgb(255 255 255 / .44) 0%, rgb(255 255 255 / .13) 36%,
    rgb(255 255 255 / .03) 70%, transparent 100%);
  pointer-events:none;
}

/* A flat lit plate: the rectangular sibling of the body, for the structures
   whose metaphor is a slab rather than a sphere. Same light from the same
   corner, so a stack and a ring look like they were lit on the same day. */
.dg-plate{
  position:relative;border-radius:var(--dg-r);
  background:
    linear-gradient(148deg,
      color-mix(in srgb, var(--c, var(--dg-c)) 15%, transparent) 0%,
      color-mix(in srgb, var(--c, var(--dg-c)) 5%, transparent) 46%,
      transparent 100%),
    var(--dg-plate);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c, var(--dg-c)) 22%, transparent);
}

/* A hairline that fades at both ends, which is the only kind this theme draws.
   A rule with hard ends is a cut; a rule that arrives and leaves is a horizon. */
.dg-rule{
  background:linear-gradient(90deg, transparent, var(--dg-line) 12%,
             var(--dg-line) 88%, transparent);
}

/* The stretched variant: for figures whose drawing IS the frame. Everything
   stroked inside one must carry vector-effect:non-scaling-stroke, or a hairline
   comes out thicker on one axis than the other. */
.dg-svg--fill{position:absolute;inset:0;inline-size:100%;block-size:100%}

/* --- motion --------------------------------------------------------------- */

/* Ambient only, and opt out honoured.

   The theme already has a travelling light on the orbit and a reveal on the
   index, so a figure that is completely inert reads as a screenshot pasted into
   a live page. What it must never do is animate anything that costs a layout
   pass or moves the text under it. Transform and opacity, nothing else. */
@media (prefers-reduced-motion:no-preference){
  .dg [data-lift]{
    transition:transform .5s cubic-bezier(.22,.8,.3,1), opacity .5s ease;
  }
  /* One slow breath on the lit rims, offset per item by --k or --i so a row of
     them does not pulse in unison like a warning light. */
  @keyframes dg-breathe{
    0%,100%{opacity:.82}
    50%    {opacity:1}
  }
}