/* Concept "grid" (10 November 2026): the shared look every page of this concept uses, laid over the page's own
   stylesheet. Taken in spirit from the Payload style guide (design/references/payloadcms-style-guide.html):
   a drawn column frame with crosses, quiet square windows without glow, calmer type, and two grounds per page:
   a "stage" over the page's own moving background, then a flat "curtain" for the reading parts.
   Each page keeps its own accent colour and its own background motif. */

:root {
  --text-main: #f2f5fa;
  --text-run: #eef1f6; /* running text: near white (Thomas, 10 November 2026: grey text was hard to read) */
  --text-detail: #c4ccd8; /* details: a light grey, still clearly readable on the glass */
  --window-fill: rgba(7, 10, 18, 0.9);
  --window-edge: rgba(255, 255, 255, 0.13);
  --window-glow: none;
  --frame-line: rgba(255, 255, 255, 0.17);
  --curtain: #070a12;
  --text-side: 64px; /* where text and windows start */
  --cross-mark: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)) center / 1px 100% no-repeat, linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)) center / 100% 1px no-repeat; /* one whole cross, 17 by 17 */
  --frame-side: 36px; /* where the frame's two lines run: outside the text, never through it */
  /* headings in a wider face with open spacing, as in the Payload style guide (Thomas, 10 November 2026) */
  --font-head: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
@media (max-width: 720px) { :root { --text-side: 20px; --frame-side: 8px; } }

/* the frame: two lines down the page's edges, outside the text, so no text ever crosses a line (Thomas, 10 November
   2026); the columns are marked only by crosses on the ruled edges */
.si-base .si-grid { left: var(--frame-side); right: var(--frame-side); display: block; }
.si-base .si-grid > div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-left: 1px solid var(--frame-line); border-right: 1px solid var(--frame-line); transform: none; opacity: 0; }
.si-base .si-grid > div:not(:first-child) { display: none; }

/* crosses where a frame line meets a ruled edge (a ground's edge, or the line between two sections) */
.cg-crosses { position: absolute; z-index: 0; left: var(--frame-side); right: var(--frame-side); top: 0; height: 0; display: flex; justify-content: space-between; pointer-events: none; }
.cg-crosses span { position: relative; width: 0; }
.cg-crosses span::before, .cg-crosses span::after { content: ''; position: absolute; background: rgba(255, 255, 255, calc(0.7 + 0.3 * var(--lit, 0))); box-shadow: 0 0 calc(7px * var(--lit, 0)) rgba(244, 172, 79, calc(0.9 * var(--lit, 0))); }
/* --lit (0 to 1): a cross brightens as the pointer comes near (shared/surface/pointer-light.js) */
/* a whole cross: both arms run through the meeting point */
.cg-crosses span::before { left: -0.5px; top: -8px; width: 1px; height: 17px; }
.cg-crosses span::after { top: -0.5px; left: -8px; width: 17px; height: 1px; }
/* crosses only where lines meet (Thomas, 10 November 2026). A row between sections is a ruled line with a cross where
   it meets the two frame lines; nothing floats in the open */
.cg-crosses span:not(:first-child):not(:last-child) { display: none; }
.cg-crosses.is-line { border-top: 1px solid var(--frame-line); }

/* grounds: each new ground slides up over the one before with a hard, ruled edge; the frame continues on it.
   A drawn ground's canvas is fixed to the screen and seen only inside its own stretch (clip-path) */
.cg-ground { position: absolute; left: 0; right: 0; z-index: 0; background: var(--curtain); border-top: 1px solid var(--frame-line); pointer-events: none; clip-path: inset(0); }
.cg-ground-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s ease; }
.cg-ground-canvas.is-drawn { opacity: 1; }
/* a ground that stops before the end of the page: ruled bottom edge with crosses, the ground below shows again */
.cg-ground.has-bottom { border-bottom: 1px solid var(--frame-line); }
.cg-curtain-frame { position: absolute; inset: 0 var(--frame-side); border-left: 1px solid var(--frame-line); border-right: 1px solid var(--frame-line); }
.cg-curtain-frame div { display: none; }
/* a ground that lies only between the frame lines: the ground underneath (the glass) shows outside them; its own edges
   are the frame lines */
.cg-ground.is-inset { left: var(--frame-side); right: var(--frame-side); }
.cg-ground.is-inset .cg-curtain-frame { inset: 0; }

/* the pointer light (shared/surface/pointer-light.js, computers only): around the mouse the dot screen shows between
   the frame lines, under the content; the crosses near it brighten (--lit above), and the title of the block under the
   pointer turns amber. Site DESIGN.md, "Pointer light" */
.cg-pointer-light {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
  clip-path: inset(0 var(--frame-side));
  background-image: radial-gradient(rgba(175, 205, 245, 0.55) 1px, transparent 1.4px), radial-gradient(circle 260px at var(--x, 50%) var(--y, 50%), rgba(90, 150, 255, 0.08), transparent);
  background-size: 6px 6px, 100% 100%;
  -webkit-mask-image: radial-gradient(circle 260px at var(--x, 50%) var(--y, 50%), #000, transparent);
  mask-image: radial-gradient(circle 260px at var(--x, 50%) var(--y, 50%), #000, transparent);
}
.cg-pointer-light.is-on { opacity: 1; }
main h2, main h3 { transition: color 0.25s ease; }
main .cg-title-lit { color: var(--accent) !important; }

/* windows: quiet, square, no glow, with a cross on each corner. The edge and its crosses are drawn as the window's
   border, so a window that scrolls or clips its content never cuts a cross off, and the crosses fade with their window */
.si-window { box-shadow: none; backdrop-filter: none; }
.si-window, .cg-marked { border: 1px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.13%29'%3E%3Crect x='8' y='8' width='35' height='1'/%3E%3Crect x='8' y='42' width='35' height='1'/%3E%3Crect x='8' y='9' width='1' height='33'/%3E%3Crect x='42' y='9' width='1' height='33'/%3E%3C/g%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.7%29'%3E%3Crect x='0' y='8' width='17' height='1'/%3E%3Crect x='8' y='0' width='1' height='17'/%3E%3Crect x='34' y='8' width='17' height='1'/%3E%3Crect x='42' y='0' width='1' height='17'/%3E%3Crect x='0' y='42' width='17' height='1'/%3E%3Crect x='8' y='34' width='1' height='17'/%3E%3Crect x='34' y='42' width='17' height='1'/%3E%3Crect x='42' y='34' width='1' height='17'/%3E%3C/g%3E%3C/svg%3E") 17 / 17px / 8px stretch; }
/* windows that sit close together form one group: only the group's outer corners carry a cross (corners.js marks
   each corner: top left, top right, bottom left, bottom right; 1 = cross, 0 = none) */
:is(.si-window, .cg-marked)[data-corners="0000"] { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.13%29'%3E%3Crect x='8' y='8' width='35' height='1'/%3E%3Crect x='8' y='42' width='35' height='1'/%3E%3Crect x='8' y='9' width='1' height='33'/%3E%3Crect x='42' y='9' width='1' height='33'/%3E%3C/g%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.7%29'%3E%3C/g%3E%3C/svg%3E"); }
:is(.si-window, .cg-marked)[data-corners="0001"] { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.13%29'%3E%3Crect x='8' y='8' width='35' height='1'/%3E%3Crect x='8' y='42' width='35' height='1'/%3E%3Crect x='8' y='9' width='1' height='33'/%3E%3Crect x='42' y='9' width='1' height='33'/%3E%3C/g%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.7%29'%3E%3Crect x='34' y='42' width='17' height='1'/%3E%3Crect x='42' y='34' width='1' height='17'/%3E%3C/g%3E%3C/svg%3E"); }
:is(.si-window, .cg-marked)[data-corners="0010"] { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.13%29'%3E%3Crect x='8' y='8' width='35' height='1'/%3E%3Crect x='8' y='42' width='35' height='1'/%3E%3Crect x='8' y='9' width='1' height='33'/%3E%3Crect x='42' y='9' width='1' height='33'/%3E%3C/g%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.7%29'%3E%3Crect x='0' y='42' width='17' height='1'/%3E%3Crect x='8' y='34' width='1' height='17'/%3E%3C/g%3E%3C/svg%3E"); }
:is(.si-window, .cg-marked)[data-corners="0011"] { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.13%29'%3E%3Crect x='8' y='8' width='35' height='1'/%3E%3Crect x='8' y='42' width='35' height='1'/%3E%3Crect x='8' y='9' width='1' height='33'/%3E%3Crect x='42' y='9' width='1' height='33'/%3E%3C/g%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.7%29'%3E%3Crect x='0' y='42' width='17' height='1'/%3E%3Crect x='8' y='34' width='1' height='17'/%3E%3Crect x='34' y='42' width='17' height='1'/%3E%3Crect x='42' y='34' width='1' height='17'/%3E%3C/g%3E%3C/svg%3E"); }
:is(.si-window, .cg-marked)[data-corners="0100"] { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.13%29'%3E%3Crect x='8' y='8' width='35' height='1'/%3E%3Crect x='8' y='42' width='35' height='1'/%3E%3Crect x='8' y='9' width='1' height='33'/%3E%3Crect x='42' y='9' width='1' height='33'/%3E%3C/g%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.7%29'%3E%3Crect x='34' y='8' width='17' height='1'/%3E%3Crect x='42' y='0' width='1' height='17'/%3E%3C/g%3E%3C/svg%3E"); }
:is(.si-window, .cg-marked)[data-corners="0101"] { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.13%29'%3E%3Crect x='8' y='8' width='35' height='1'/%3E%3Crect x='8' y='42' width='35' height='1'/%3E%3Crect x='8' y='9' width='1' height='33'/%3E%3Crect x='42' y='9' width='1' height='33'/%3E%3C/g%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.7%29'%3E%3Crect x='34' y='8' width='17' height='1'/%3E%3Crect x='42' y='0' width='1' height='17'/%3E%3Crect x='34' y='42' width='17' height='1'/%3E%3Crect x='42' y='34' width='1' height='17'/%3E%3C/g%3E%3C/svg%3E"); }
:is(.si-window, .cg-marked)[data-corners="0110"] { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.13%29'%3E%3Crect x='8' y='8' width='35' height='1'/%3E%3Crect x='8' y='42' width='35' height='1'/%3E%3Crect x='8' y='9' width='1' height='33'/%3E%3Crect x='42' y='9' width='1' height='33'/%3E%3C/g%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.7%29'%3E%3Crect x='34' y='8' width='17' height='1'/%3E%3Crect x='42' y='0' width='1' height='17'/%3E%3Crect x='0' y='42' width='17' height='1'/%3E%3Crect x='8' y='34' width='1' height='17'/%3E%3C/g%3E%3C/svg%3E"); }
:is(.si-window, .cg-marked)[data-corners="0111"] { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.13%29'%3E%3Crect x='8' y='8' width='35' height='1'/%3E%3Crect x='8' y='42' width='35' height='1'/%3E%3Crect x='8' y='9' width='1' height='33'/%3E%3Crect x='42' y='9' width='1' height='33'/%3E%3C/g%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.7%29'%3E%3Crect x='34' y='8' width='17' height='1'/%3E%3Crect x='42' y='0' width='1' height='17'/%3E%3Crect x='0' y='42' width='17' height='1'/%3E%3Crect x='8' y='34' width='1' height='17'/%3E%3Crect x='34' y='42' width='17' height='1'/%3E%3Crect x='42' y='34' width='1' height='17'/%3E%3C/g%3E%3C/svg%3E"); }
:is(.si-window, .cg-marked)[data-corners="1000"] { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.13%29'%3E%3Crect x='8' y='8' width='35' height='1'/%3E%3Crect x='8' y='42' width='35' height='1'/%3E%3Crect x='8' y='9' width='1' height='33'/%3E%3Crect x='42' y='9' width='1' height='33'/%3E%3C/g%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.7%29'%3E%3Crect x='0' y='8' width='17' height='1'/%3E%3Crect x='8' y='0' width='1' height='17'/%3E%3C/g%3E%3C/svg%3E"); }
:is(.si-window, .cg-marked)[data-corners="1001"] { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.13%29'%3E%3Crect x='8' y='8' width='35' height='1'/%3E%3Crect x='8' y='42' width='35' height='1'/%3E%3Crect x='8' y='9' width='1' height='33'/%3E%3Crect x='42' y='9' width='1' height='33'/%3E%3C/g%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.7%29'%3E%3Crect x='0' y='8' width='17' height='1'/%3E%3Crect x='8' y='0' width='1' height='17'/%3E%3Crect x='34' y='42' width='17' height='1'/%3E%3Crect x='42' y='34' width='1' height='17'/%3E%3C/g%3E%3C/svg%3E"); }
:is(.si-window, .cg-marked)[data-corners="1010"] { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.13%29'%3E%3Crect x='8' y='8' width='35' height='1'/%3E%3Crect x='8' y='42' width='35' height='1'/%3E%3Crect x='8' y='9' width='1' height='33'/%3E%3Crect x='42' y='9' width='1' height='33'/%3E%3C/g%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.7%29'%3E%3Crect x='0' y='8' width='17' height='1'/%3E%3Crect x='8' y='0' width='1' height='17'/%3E%3Crect x='0' y='42' width='17' height='1'/%3E%3Crect x='8' y='34' width='1' height='17'/%3E%3C/g%3E%3C/svg%3E"); }
:is(.si-window, .cg-marked)[data-corners="1011"] { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.13%29'%3E%3Crect x='8' y='8' width='35' height='1'/%3E%3Crect x='8' y='42' width='35' height='1'/%3E%3Crect x='8' y='9' width='1' height='33'/%3E%3Crect x='42' y='9' width='1' height='33'/%3E%3C/g%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.7%29'%3E%3Crect x='0' y='8' width='17' height='1'/%3E%3Crect x='8' y='0' width='1' height='17'/%3E%3Crect x='0' y='42' width='17' height='1'/%3E%3Crect x='8' y='34' width='1' height='17'/%3E%3Crect x='34' y='42' width='17' height='1'/%3E%3Crect x='42' y='34' width='1' height='17'/%3E%3C/g%3E%3C/svg%3E"); }
:is(.si-window, .cg-marked)[data-corners="1100"] { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.13%29'%3E%3Crect x='8' y='8' width='35' height='1'/%3E%3Crect x='8' y='42' width='35' height='1'/%3E%3Crect x='8' y='9' width='1' height='33'/%3E%3Crect x='42' y='9' width='1' height='33'/%3E%3C/g%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.7%29'%3E%3Crect x='0' y='8' width='17' height='1'/%3E%3Crect x='8' y='0' width='1' height='17'/%3E%3Crect x='34' y='8' width='17' height='1'/%3E%3Crect x='42' y='0' width='1' height='17'/%3E%3C/g%3E%3C/svg%3E"); }
:is(.si-window, .cg-marked)[data-corners="1101"] { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.13%29'%3E%3Crect x='8' y='8' width='35' height='1'/%3E%3Crect x='8' y='42' width='35' height='1'/%3E%3Crect x='8' y='9' width='1' height='33'/%3E%3Crect x='42' y='9' width='1' height='33'/%3E%3C/g%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.7%29'%3E%3Crect x='0' y='8' width='17' height='1'/%3E%3Crect x='8' y='0' width='1' height='17'/%3E%3Crect x='34' y='8' width='17' height='1'/%3E%3Crect x='42' y='0' width='1' height='17'/%3E%3Crect x='34' y='42' width='17' height='1'/%3E%3Crect x='42' y='34' width='1' height='17'/%3E%3C/g%3E%3C/svg%3E"); }
:is(.si-window, .cg-marked)[data-corners="1110"] { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51'%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.13%29'%3E%3Crect x='8' y='8' width='35' height='1'/%3E%3Crect x='8' y='42' width='35' height='1'/%3E%3Crect x='8' y='9' width='1' height='33'/%3E%3Crect x='42' y='9' width='1' height='33'/%3E%3C/g%3E%3Cg fill='rgba%28255%2C255%2C255%2C0.7%29'%3E%3Crect x='0' y='8' width='17' height='1'/%3E%3Crect x='8' y='0' width='1' height='17'/%3E%3Crect x='34' y='8' width='17' height='1'/%3E%3Crect x='42' y='0' width='1' height='17'/%3E%3Crect x='0' y='42' width='17' height='1'/%3E%3Crect x='8' y='34' width='1' height='17'/%3E%3C/g%3E%3C/svg%3E"); }

/* type: medium weight and pulled a little tighter instead of bold; no glow behind titles */
h1, h2, h3, .sc-title, .op-title h1, .me-step-title, .me-list-title, .dl-group-head, .dl-idea-title, .sc-card-title,
.cb-name, .op-panel-head, .sc-mark-text, .si-menu-brand {
  font-weight: 500 !important;
}
.sc-title, .op-title h1 { text-shadow: none !important; }
/* every heading: slightly tightened, never cramped; large headings with a little more line room */
h1, h2, h3, .sc-title, .op-title h1, .hm-title, .hm-h2, .hm-cell h3, .hm-footer-name, .si-menu-brand, .me-step-title, .dl-group-head, .dl-idea-title, .sc-card-title, .cb-name {
  letter-spacing: -0.022em !important;
}
h1, .sc-title, .op-title h1, .hm-title, .hm-h2 { line-height: 1.04 !important; }
.si-num { font-weight: 600; }
.op-caret { display: none; }

/* glows on marks become flat */
.me-marker.is-current .me-marker-gem, .dl-symbol.is-in_use, .dl-diamond.is-in-use, .dl-diamond.is-edition, .ft-diamond.is-own { box-shadow: none !important; }


/* the fine dot screen over the glass, on the base layer and on every drawn ground */
.cg-dots, .cg-ground:has(canvas)::after { position: absolute; inset: 0; background-image: radial-gradient(rgba(0, 0, 0, 0.55) 1px, transparent 1.3px); background-size: 4px 4px; pointer-events: none; }
.cg-ground:has(canvas)::after { content: ''; }