/* strdst.gg, stardustGG's site (the owner 11-14): its own stylesheet, after kit.css. kit.css is hdln.gg's kit, copied
   byte for byte with fonts/ from hdln-gg's internal/web/static/ and checked by tools/ring.py check; it is never edited
   here. This file sets stardustGG's violet as tokens again, where hdln.gg has headlineGG's red and boxout.gg its cyan,
   and adds only this site's own. It is boxout.gg's store.css cut to a placeholder: solid slabs, square corners, no
   outlines, no glow; a color only where it has a job. Dark only.
   Order: the tokens set again; the page; the bar and the foot; the web ring; the front page; a phone. */

:root {
	/* stardustGG's violet (the owner 11-14: "Violet", of three): the thing that is ON, the band, the GG of the name;
	   the kit's --band-steps follow the band from here. The steps as boxout.gg's are from its cyan. */
	--tally: #a46cff;
	--tally-dim: #6c47a8;
	--band: #483070;       /* a window's title band, deep enough for paper letters */
	--tally-off: #26193b;
	--tally-lit: #c7a4ff;  /* the violet's edges by the program's rule (38 % toward white, 50 % toward black) */
	--tally-lo: #52367f;
	--page-w: 1400px;
	/* the other products' colors and the studio's blue, BlueG.Systems', for their GG in the web ring and the ring's
	   own GG (stardustGG's is --tally here) */
	--headline-red: #f03228;
	--jumpcut-orange: #ff5d2f;
	--boxout-blue: #2ee6d6;
	--bitcrush-pink: #fa6086;
	--studio: #4a90ff;
}

/* ---- the page ---- */

main {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 22px;
	width: 100%;
	max-width: calc(var(--page-w) + 2 * var(--gutter));
	margin: 0 auto;
	padding: var(--gutter);
}
.gg { color: var(--tally); font-weight: var(--w-heavy); }

/* ---- the bar and the foot ---- */

/* stardustGG's name (the owner 11-14, of the logo takes: "megrim, good contrast the clean lines and glitch of the
   GG"): stardust in Megrim, its GG in Rubik Glitch in the violet. Both OFL 1.1 (fonts/OFL-megrim.txt,
   fonts/OFL-rubik-glitch.txt), Google Fonts' Latin files, served beside this file. This site's own, not the kit's:
   the kit's Jura and Kanit stay for every other word. The GG a touch taller than stardust and close up to it (the
   owner 11-14: "GG is a bit too far from DUST, the GG should be a touch larger/taller than the stardust"). */
@font-face {
	font-family: Megrim;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/megrim.woff2") format("woff2");
}
@font-face {
	font-family: "Rubik Glitch";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/rubik-glitch.woff2") format("woff2");
}
.name { font-family: Megrim, var(--face); font-weight: 400; letter-spacing: 0.02em; }
/* the GG's hard paper offset up and to the left, as the logo takes' G (the owner 11-14: "give the GG that white
   'shadow' upper left"): in em, so it keeps its size with the GG's; a solid copy, no blur */
.name-gg { font-family: "Rubik Glitch", var(--face-head); font-weight: 400; color: var(--tally); text-shadow: -0.05em -0.035em 0 var(--paper); }
/* the GG's middle on stardust's (the owner 11-14: "center align vertically with the stardust"): Megrim's lower case
   has no ascenders, all of stardust 0.58 em tall; Rubik Glitch's caps 0.71 em (both read from the font files). At
   stardust 0.875 of the GG's size, the GG's middle is 0.355 em up, stardust's 0.254: the GG down by the 0.1 between */
.name-gg { position: relative; top: 0.1em; }

/* the mark: the name at the bar's left, stardust 28 px, its GG 32, touching */
.mark { display: flex; align-items: baseline; line-height: 1; text-decoration: none; white-space: nowrap; }
.mark .name { font-size: 28px; }
.mark .name-gg { font-size: 32px; margin-left: 1px; }
/* the name in a slab (NOT FOUND's BACK TO), in the same proportion */
.slab .name { font-size: 1.2em; margin-left: 0.3em; }
.slab .name-gg { font-size: 1.37em; margin-left: 1px; }

.foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	padding: 4px var(--gutter);
	background: var(--ink);
	font-size: var(--t-small);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 4px; }
.foot-links a {
	display: flex;
	align-items: center;
	min-height: var(--row-h);
	padding: 0 10px;
	color: var(--muted);
	font-weight: var(--w-heavy);
	text-decoration: none;
}
.foot-links a:hover { color: var(--paper); }

/* ---- the web ring (hdln-gg's static/ring.json, its markup written by tools/ring.py) ---- */

/* at the foot's right end: hdln.gg's menu and its rules, a <details> whose list is a floating window opening upward
   from it (the kit's hard shadow), the ring's sites in order, this one pressed in, one not up yet faint. Each GG in its
   product's color by its data-gg; the ring's own GG through the products' colors in turn, still for a viewer who asks
   for less motion. No script: the name closes it. */
.ring { position: relative; margin-left: auto; }
.ring-open {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: var(--row-h);
	padding: 0 10px;
	color: var(--muted);
	font-weight: var(--w-heavy);
	cursor: pointer;
	list-style: none;
}
.ring-open::-webkit-details-marker { display: none; }
.ring-open:hover, .ring[open] > .ring-open { color: var(--paper); }
.ring[open] > .ring-open { background: var(--on-face); }
.ring-caret { flex-shrink: 0; fill: currentColor; }
.ring[open] .ring-caret { transform: rotate(180deg); }
.ring-pop {
	position: absolute;
	right: 0;
	bottom: calc(100% + 4px);
	z-index: 30;
	width: min(340px, calc(100vw - 2 * var(--gutter)));
	padding: 5px;
	background: var(--slab);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink), 6px 6px 0 var(--shadow);
}
.ring-count { margin-left: auto; }
.ring-list { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px 4px; }
.ring-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: var(--row-h);
	padding: 0 10px;
	color: var(--label);
	font-weight: var(--w-body);
	letter-spacing: 0.02em;
	text-decoration: none;
}
a.ring-row:hover { background: var(--slab-top); color: var(--paper); }
.ring-here {
	background: var(--on-face);
	color: var(--on-text);
	box-shadow: inset var(--edge) var(--edge) 0 var(--ink), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--muted);
}
.ring-soon { color: var(--faint); }
.ring-state { color: var(--muted); font-size: 11px; font-weight: var(--w-heavy); letter-spacing: 0.06em; }
.ring-here .ring-state { color: var(--on-text); }
.ring-gg { font-weight: var(--w-heavy); }
.ring-gg[data-gg="headline"] { color: var(--headline-red); }
.ring-gg[data-gg="jumpcut"] { color: var(--jumpcut-orange); }
.ring-gg[data-gg="boxout"] { color: var(--boxout-blue); }
.ring-gg[data-gg="bitcrush"] { color: var(--bitcrush-pink); }
.ring-gg[data-gg="stardust"] { color: var(--tally); }
.ring-gg[data-gg="studio"] { color: var(--studio); }
/* the same rows from a slab at the bar's left end, before the mark (as on BlueG.Systems, hdln.gg, jumpcut.gg and
   boxout.gg): a square slab with SEE ALL's nine squares, the rows a floating window hanging from the bar's left
   gutter, no wider than the bar (100vw would count a scrollbar) */
.switch-open { width: var(--row-h); padding: 0; justify-content: center; }
.more-glyph { flex-shrink: 0; fill: currentColor; }
.switch-pop {
	position: absolute;
	left: var(--gutter);
	top: calc(50% + var(--row-h) / 2 + 4px);
	z-index: 30;
	width: min(340px, calc(100% - 2 * var(--gutter)));
	padding: 5px;
	background: var(--slab);
	box-shadow: inset var(--edge) var(--edge) 0 var(--muted), inset calc(-1 * var(--edge)) calc(-1 * var(--edge)) 0 var(--ink), 6px 6px 0 var(--shadow);
}
.gg-cycle { font-size: 1.15em; color: var(--headline-red); animation: gg-cycle 12s linear infinite; }
@keyframes gg-cycle {
	0% { color: var(--headline-red); }
	25% { color: var(--jumpcut-orange); }
	50% { color: var(--boxout-blue); }
	75% { color: var(--bitcrush-pink); }
	100% { color: var(--headline-red); }
}
@media (prefers-reduced-motion: reduce) {
	.gg-cycle { animation: none; }
}

/* ---- the front page ---- */

/* the first window: the picture's place at the left (PLEASE STAND BY until there is a real screenshot), the line,
   the way in and the rows at the right */
.lead { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; padding: 12px 11px 14px; }
.lead-face { flex: 1 1 560px; max-width: 860px; min-width: 0; }
.lead-words { flex: 1 1 340px; min-width: 0; }
.lead-words h1 {
	margin: 0 0 18px;
	font-family: var(--face-head);
	font-style: italic;
	font-weight: 900;
	font-size: 40px;
	line-height: 1.05;
	letter-spacing: 0.01em;
}
.lead-words .acts { gap: 8px; margin: 0 0 16px; }
.rows-flat { margin: 0; }
.stand-by {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	color: var(--muted);
	font-weight: var(--w-heavy);
	letter-spacing: 0.08em;
}
.lines { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lines li { font-weight: var(--w-heavy); }

/* NOT FOUND: one window, a line */
.page-col { width: 100%; max-width: 860px; }
.said { margin: 0 0 12px; font-weight: var(--w-heavy); }
.said:last-child { margin-bottom: 0; }

/* ---- a phone ---- */

@media (max-width: 780px) {
	:root { --gutter: 8px; }
	.lead-words h1 { font-size: 30px; }
}