/* GENERATED by build-plugin.py: the afterglow tokens (system/dist/afterglow.css), handover/aura-bars/aura-bars.css, aura-styles.css. */
:root {
--ag-color-bg: #0c0c0f;
  --ag-color-surface: #1a1a1e;
  --ag-color-cream: #FFFFF3;
  --ag-color-black: #000000;
  --ag-color-scrim: rgba(12,12,15,0.62);
  --ag-color-scrim-strong: rgba(12,12,15,0.86);
  --ag-text-primary: rgba(255,255,243,0.85);
  --ag-text-secondary: rgba(255,255,243,0.60);
  --ag-text-muted: rgba(255,255,243,0.30);
  --ag-text-faint: rgba(255,255,243,0.08);
  --ag-border-default: rgba(255,255,255,0.07);
  --ag-border-hover: rgba(255,255,255,0.12);
  --ag-brand-orange: #FF4C00;
  --ag-brand-magenta: #FF02CB;
  --ag-brand-violet: #9C4DE0;
  --ag-brand-indigo: #3A2E8C;
  --ag-aura-authenticity-color: #FF7A1A;
  --ag-aura-authenticity-glow: rgba(255,122,26,0.5);
  --ag-aura-authenticity-low: #B23A00;
  --ag-aura-authenticity-high: #FFB24D;
  --ag-aura-presence-color: #FF2FB0;
  --ag-aura-presence-glow: rgba(255,47,176,0.5);
  --ag-aura-presence-low: #FFB3D9;
  --ag-aura-presence-high: #E5008F;
  --ag-aura-connection-color: #8E5CE6;
  --ag-aura-connection-glow: rgba(142,92,230,0.5);
  --ag-aura-connection-low: #CDB4F5;
  --ag-aura-connection-high: #6E2FCF;
  --ag-aura-communication-color: #4FA3FF;
  --ag-aura-communication-glow: rgba(79,163,255,0.5);
  --ag-aura-communication-low: #35357A;
  --ag-aura-communication-high: #A9C7F5;
  --ag-gradient-master: linear-gradient(90deg, #FF8A2B 0%, #FF4C00 22%, #FF1E8E 48%, #B14DE0 72%, #4A3AA7 100%);
  --ag-gradient-aura-authenticity: linear-gradient(135deg, #B23A00 0%, #FF7A1A 55%, #FFB24D 100%);
  --ag-gradient-aura-presence: linear-gradient(135deg, #FFB3D9 0%, #FF2FB0 55%, #E5008F 100%);
  --ag-gradient-aura-connection: linear-gradient(135deg, #CDB4F5 0%, #8E5CE6 55%, #6E2FCF 100%);
  --ag-gradient-aura-communication: linear-gradient(135deg, #35357A 0%, #4FA3FF 55%, #A9C7F5 100%);
  --ag-gradient-spectrum-authenticity: linear-gradient(90deg, #B7BFE1 0%, #669BD2 50%, #B967A3 100%);
  --ag-gradient-spectrum-presence: linear-gradient(90deg, #EEBED9 0%, #F68F51 50%, #EE3343 100%);
  --ag-gradient-spectrum-connection: linear-gradient(90deg, #EDB7D5 0%, #ED2C7E 50%, #ED2246 100%);
  --ag-gradient-spectrum-communication: linear-gradient(90deg, #F498BC 0%, #977DB9 50%, #D34899 100%);
  --ag-gradient-preset-sunset: radial-gradient(120% 140% at 30% 120%, #FFB24D 0%, #FF6A1A 22%, #FF2E6E 46%, #B4318F 66%, #3A2E8C 100%);
  --ag-gradient-preset-dusk: linear-gradient(180deg, #2A2C6E 0%, #6E2FCF 40%, #B4318F 70%, #FF6A1A 100%);
  --ag-gradient-preset-night: radial-gradient(120% 140% at 30% 120%, #4A3AA7 0%, #2A2C6E 40%, #0E1030 100%);
  --ag-shader-sunset-stops-0: #3A2E8C;
  --ag-shader-sunset-stops-1: #B4318F;
  --ag-shader-sunset-stops-2: #FF2E7E;
  --ag-shader-sunset-stops-3: #FF6A1A;
  --ag-shader-sunset-stops-4: #FFB24D;
  --ag-shader-sunset-grain: 0.05;
  --ag-shader-sunset-warp: 1.7;
  --ag-shader-night-stops-0: #0E1030;
  --ag-shader-night-stops-1: #2A2C6E;
  --ag-shader-night-stops-2: #4A3AA7;
  --ag-shader-night-stops-3: #B4318F;
  --ag-shader-night-stops-4: #FF5A2A;
  --ag-shader-night-grain: 0.05;
  --ag-shader-night-warp: 1.9;
  --ag-shader-filmic-stops-0: #2A2C6E;
  --ag-shader-filmic-stops-1: #6E2FCF;
  --ag-shader-filmic-stops-2: #B4318F;
  --ag-shader-filmic-stops-3: #FF3D6E;
  --ag-shader-filmic-stops-4: #FF7A1A;
  --ag-shader-filmic-grain: 0.16;
  --ag-shader-filmic-warp: 1.5;
  --ag-avatar-palette-0: #FF4C00;
  --ag-avatar-palette-1: #FF02CB;
  --ag-avatar-palette-2: #9C4DE0;
  --ag-avatar-palette-3: #3A2E8C;
  --ag-avatar-pattern: mesh;
  --ag-font-display: "Domaine Display Narrow", Georgia, 'Times New Roman', serif;
  --ag-font-ui: Poppins, system-ui, -apple-system, Segoe UI, sans-serif;
  --ag-font-accent: Lacquer, system-ui, cursive;
  --ag-size-display: 72px;
  --ag-size-hero: 56px;
  --ag-size-section: 44px;
  --ag-size-title: 36px;
  --ag-size-subhead: 28px;
  --ag-size-card: 18px;
  --ag-size-body: 17px;
  --ag-size-small: 14px;
  --ag-size-caption: 13px;
  --ag-size-meta: 11px;
  --ag-weight-regular: 400;
  --ag-weight-medium: 500;
  --ag-weight-semibold: 600;
  --ag-leading-tight: 1.1;
  --ag-leading-snug: 1.15;
  --ag-leading-card: 1.3;
  --ag-leading-normal: 1.5;
  --ag-leading-body: 1.6;
  --ag-tracking-meta: 0.12em;
  --ag-tracking-button: 0.02em;
  --ag-space-xs: 8px;
  --ag-space-sm: 16px;
  --ag-space-md: 24px;
  --ag-space-lg: 32px;
  --ag-space-xl: 48px;
  --ag-space-2xl: 64px;
  --ag-space-3xl: 80px;
  --ag-space-4xl: 120px;
  --ag-space-section: 160px;
  --ag-radius-sm: 8px;
  --ag-radius-md: 12px;
  --ag-radius-lg: 20px;
  --ag-radius-pill: 999px;
  --ag-video-scale: 3;
}
/* afterglow · aura bars
   Four bars, one per aura axis, both poles on each. Three states:
   rest (cream lines, cream dots), open (gradient bars, dark discs), active (one bar speaks).
   Every colour, face and size is an afterglow token: load system/dist/afterglow.css first. */

.aura-bars {
  position: relative;
  aspect-ratio: 400 / 320;
  max-width: 100%;
  cursor: pointer;
  outline: none;
  --near: 0;                                   /* 0 far from the pointer, 1 under it; set by the script */
  --s: calc(0.5 + 0.18 * var(--near));
}
.aura-bars:focus-visible { box-shadow: 0 0 0 2px var(--ag-border-hover); border-radius: var(--ag-radius-md); }
.aura-bars.is-open { --near: 1; }
.aura-bars svg { display: block; width: 100%; height: 100%; overflow: visible; }
.aura-bars .g { transform-origin: 200px 160px; transform: scale(var(--s)); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.aura-bars.is-open .g { transform: scale(1); }

/* the four axes */
.aura-bars [data-axis="authenticity"]  { --col: var(--ag-aura-authenticity-color);  --glow: var(--ag-aura-authenticity-glow);  --lo: var(--ag-aura-authenticity-low);  --hi: var(--ag-aura-authenticity-high); }
.aura-bars [data-axis="presence"]      { --col: var(--ag-aura-presence-color);      --glow: var(--ag-aura-presence-glow);      --lo: var(--ag-aura-presence-low);      --hi: var(--ag-aura-presence-high); }
.aura-bars [data-axis="connection"]    { --col: var(--ag-aura-connection-color);    --glow: var(--ag-aura-connection-glow);    --lo: var(--ag-aura-connection-low);    --hi: var(--ag-aura-connection-high); }
.aura-bars [data-axis="communication"] { --col: var(--ag-aura-communication-color); --glow: var(--ag-aura-communication-glow); --lo: var(--ag-aura-communication-low); --hi: var(--ag-aura-communication-high); }

/* bars: thin cream at rest, thick gradient when open */
.aura-bars .bar { height: 12px; y: calc(var(--cy) - 6px); rx: 13px;
  transition: fill-opacity .45s ease, height .5s cubic-bezier(.2,.8,.2,1), y .5s cubic-bezier(.2,.8,.2,1); }
.aura-bars .bar.base { fill: var(--ag-text-muted); }
.aura-bars .bar.spec { fill-opacity: var(--near); }
.aura-bars.is-open .bar { height: 26px; y: calc(var(--cy) - 13px); }
.aura-bars[data-active] .axis:not(.is-active) .bar.spec { fill-opacity: 0.28; }

/* marker: cream dot → dark disc → capsule with the word */
.aura-bars .pill { fill: var(--ag-text-secondary); x: calc(var(--px) - 5px); width: 10px; height: 10px; y: calc(var(--cy) - 5px); rx: 14px;
  filter: drop-shadow(0 0 calc(3px + 7px * var(--near)) var(--glow));
  transition: x .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1), height .45s, y .45s, fill .3s; }
.aura-bars.is-open .pill { fill: var(--ag-color-bg); x: calc(var(--px) - 11px); width: 22px; height: 22px; y: calc(var(--cy) - 11px); }
.aura-bars.is-open .axis.is-active .pill { x: calc(var(--cl) - var(--w) / 2); width: var(--w); }

/* text: poles show when open, axis name and word only on the active bar */
.aura-bars text { font-family: var(--ag-font-ui); font-weight: var(--ag-weight-medium); letter-spacing: var(--ag-tracking-meta); text-transform: uppercase; opacity: 0; transition: opacity .45s ease .12s; }
.aura-bars text.pole { fill: var(--ag-text-secondary); font-size: var(--ag-size-meta); }
.aura-bars text.axl { fill: var(--ag-text-muted); font-size: 8.5px; }
.aura-bars text.word { font-size: 10.5px; letter-spacing: 0.04em; text-transform: lowercase; fill: var(--ag-text-primary); transition-delay: .2s; }
.aura-bars.is-open text.pole { opacity: 1; }
.aura-bars.is-open .axis.is-active text { opacity: 1; }
.aura-bars.is-open .axis.is-active text.axl { opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  .aura-bars .g, .aura-bars .bar, .aura-bars .pill, .aura-bars text { transition: none; }
}

/* afterglow aura · the figure around the bars in a post. No box, no hairline: space does the work.
   Two widths, both sums of spacing tokens (there is no width token): the figure in the text at 400, the aside at 224. */
.ag-aura { --ag-bars-width: calc(var(--ag-space-4xl) * 2 + var(--ag-space-section)); --ag-aside-width: calc(var(--ag-space-section) + var(--ag-space-2xl)); margin: var(--ag-space-lg) 0; padding: 0; font-family: var(--ag-font-ui); color: var(--ag-text-primary); -webkit-font-smoothing: antialiased; }
.ag-aura__cap { margin: 0 0 var(--ag-space-xs); font-size: var(--ag-size-small); line-height: var(--ag-leading-normal); text-align: left; }
.ag-aura__label { color: var(--ag-text-secondary); }
/* the film name is a link the way every link on the article page is: underlined in the hairline tone, orange on hover */
.ag-aura__film { color: var(--ag-color-cream); font-weight: var(--ag-weight-medium); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-color: var(--ag-border-hover); transition: text-decoration-color .18s ease-out; }
.ag-aura__film:hover, .ag-aura__film:focus-visible { text-decoration-color: var(--ag-brand-orange); }
.ag-aura__sentence { display: block; margin: 0; color: var(--ag-text-secondary); font-size: var(--ag-size-caption); line-height: var(--ag-leading-normal); text-align: left; }
.ag-aura__word { transition: color .3s ease; }
/* the box keeps the drawing's ratio before the script fills it, so the text below does not jump at mount */
.ag-aura__bars { width: min(100%, var(--ag-bars-width)); aspect-ratio: 400 / 320; }
/* the theme's default.css clips every svg (svg:not(:root)); the pole names sit past the drawing's edge */
.ag-aura .aura-bars svg { overflow: visible; }

/* ── the aside: beside the byline on the article page. The caption on the byline's own line, the bars a thinner cut of the
   drawing at the figure's full width, the sentence under the bars only while they are open (hover, focus, tap). ── */
.ag-aura--aside { position: relative; width: var(--ag-aside-width); max-width: 100%; margin: 0; }
/* the sentence sits under the bars, in the head's bottom margin, so nothing on the page moves when it appears;
   the word of the bar under the pointer (or the arrow keys) turns cream */
.ag-aura--aside .ag-aura__sentence { position: absolute; top: 100%; left: 0; right: 0; margin-top: var(--ag-space-xs); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.ag-aura--aside:has(.aura-bars.is-open) .ag-aura__sentence { opacity: 1; }
.ag-aura--aside:has(.aura-bars[data-active="authenticity"]) .ag-aura__word[data-axis="authenticity"],
.ag-aura--aside:has(.aura-bars[data-active="presence"]) .ag-aura__word[data-axis="presence"],
.ag-aura--aside:has(.aura-bars[data-active="connection"]) .ag-aura__word[data-axis="connection"],
.ag-aura--aside:has(.aura-bars[data-active="communication"]) .ag-aura__word[data-axis="communication"] { color: var(--ag-color-cream); }
/* one focus ring, the page's own, not the drop-in's box shadow on top of it */
.ag-aura--aside .aura-bars:focus-visible { box-shadow: none; outline: 2px solid var(--ag-color-cream); outline-offset: 2px; border-radius: var(--ag-radius-sm); }
/* the drawing is 400 x 320 with the bars from x 70 to 330; the aside pulls the four bars together (below) so the band is
   y 70 to 148, and shows that window at full width, so one unit of the drawing is the aside's width over 260. Outside the
   window there is only the type, hidden below. */
.ag-aura--aside .ag-aura__bars { --ag-unit: calc(var(--ag-aside-width) / 260); width: 100%; height: calc(var(--ag-unit) * 78); aspect-ratio: auto; overflow: clip; overflow-clip-margin: var(--ag-space-sm); }
.ag-aura--aside .ag-aura__bars svg { position: relative; top: calc(var(--ag-unit) * -70); left: calc(var(--ag-unit) * -70); width: calc(var(--ag-unit) * 400); max-width: none; height: auto; pointer-events: none; }
.ag-aura--aside .ag-aura__bars svg .axis { pointer-events: auto; }
/* the thinner cut, in the drawing's own units (SVG user space, not tokens): the bars run the width from the start, no
   rest-state shrink, 18 apart instead of 52 (each axis group slides up), bar and gap near one to one when open; at 224
   the drawing's type would be six pixels tall, so the sentence carries the words instead */
.ag-aura--aside .aura-bars { --s: 1; }
.ag-aura--aside .aura-bars [data-axis="presence"] { transform: translateY(-34px); }
.ag-aura--aside .aura-bars [data-axis="connection"] { transform: translateY(-68px); }
.ag-aura--aside .aura-bars [data-axis="communication"] { transform: translateY(-102px); }
.ag-aura--aside .aura-bars .bar { height: 4px; y: calc(var(--cy) - 2px); }
.ag-aura--aside .aura-bars.is-open .bar { height: 8px; y: calc(var(--cy) - 4px); }
.ag-aura--aside .aura-bars .pill { x: calc(var(--px) - 3px); width: 6px; height: 6px; y: calc(var(--cy) - 3px); }
.ag-aura--aside .aura-bars.is-open .pill, .ag-aura--aside .aura-bars.is-open .axis.is-active .pill { x: calc(var(--px) - 3.5px); width: 7px; height: 7px; y: calc(var(--cy) - 3.5px); }
.ag-aura--aside .aura-bars text { display: none; }

/* ── the article page's head with the aside in it (the posts plugin, the block theme): a two-column grid. The title spans
   both, the byline or the recap line sits left, the aside right, both from the top. Nothing else on the page moves. ── */
.ag-post .ag-post__head:has(> .ag-aura--aside) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ag-space-xl); align-items: start; }
.ag-post .ag-post__head:has(> .ag-aura--aside) > :not(.ag-aura--aside) { grid-column: 1; }
.ag-post .ag-post__head:has(> .ag-aura--aside) > :first-child { grid-column: 1 / -1; }
.ag-post .ag-post__head > .ag-aura--aside { grid-column: 2; grid-row: 2; justify-self: end; }
/* phone: under the byline, left aligned, the same size; the sentence takes its own line when a tap opens the bars
   (the head's margin is too short to hold two lines over the cover) */
@media (max-width: 767px) {
  .ag-post .ag-post__head:has(> .ag-aura--aside) { grid-template-columns: minmax(0, 1fr); }
  .ag-post .ag-post__head > .ag-aura--aside { grid-column: 1; grid-row: auto; justify-self: start; }
  .ag-aura--aside .ag-aura__sentence { position: static; display: none; margin-top: var(--ag-space-xs); }
  .ag-aura--aside:has(.aura-bars.is-open) .ag-aura__sentence { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-aura--aside .ag-aura__sentence, .ag-aura__film, .ag-aura__word { transition: none; }
}