/* jumpcut.gg's storefront (STOREFRONT-PLAN.md): 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/web_build.py (build_store); it is
   never edited here. This file sets jumpcutGG's orange as tokens again, where hdln.gg has headlineGG's red and
   BlueG.Systems the studio's blue, and adds only this site's own. Solid slabs, square corners, no outlines, no glow;
   a color only where it has a job. Dark only, as the program is.
   Order: the tokens set again; the page; the bar and the foot; the front page; PRIVACY and NOT FOUND; a phone. */

:root {
	/* jumpcutGG's orange, read from its wordmark (BlueG.Systems' --jumpcut-orange): the thing that is ON, the band,
	   the GG of the name; the kit's --band-steps follow the band from here */
	--tally: #ff5d2f;
	--tally-dim: #a83d1f;
	--band: #8f3219;       /* a window's title band, deep enough for paper letters */
	--tally-off: #3a1c14;
	--tally-lit: #ff9b7e;  /* the orange's edges by the program's rule (38 % toward white, 50 % toward black) */
	--tally-lo: #802f18;
	--page-w: 1400px;
	/* the other products' colors and the studio's blue, BlueG.Systems' (the owner 11-07), for their GG in the web ring
	   and the ring's own GG (jumpcutGG's is --tally here) */
	--headline-red: #f03228;
	--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); }
.bracket { color: var(--muted); }

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

/* the mark: jumpcutGG's own wordmark, the picture (the owner 11-10: "the original jumpcutGG logo top left") */
.mark { display: flex; align-items: center; }
.mark img { display: block; width: auto; height: 34px; }
.top-acts { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.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 at the foot's right end (hdln-gg's static/ring.json, its markup written by tools/web_build.py ring; the
   owner 11-10: "re-use that bottom-right slim one from hdln.gg on the other ones"): 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(--tally); }
.ring-gg[data-gg="boxout"] { color: var(--boxout-blue); }
.ring-gg[data-gg="bitcrush"] { color: var(--bitcrush-pink); }
.ring-gg[data-gg="studio"] { color: var(--studio); }
.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(--tally); }
	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 editor's shot at the left, the line, the two ways 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; }
.shot img { width: 100%; height: auto; }

/* WHAT IT DOES beside IN YOUR BROWSER */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lines { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lines li { font-weight: var(--w-heavy); }

/* SCREENS: two a row, each a link to the picture full size */
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---- PRIVACY and NOT FOUND: one window, a line each ---- */

.page-col { width: 100%; max-width: 860px; }
.said { margin: 0 0 12px; font-weight: var(--w-heavy); }
.said:last-child { margin-bottom: 0; }
.said-date { color: var(--muted); font-size: var(--t-small); }

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

@media (max-width: 780px) {
	:root { --gutter: 8px; }
	.pair, .shots { grid-template-columns: 1fr; }
	.lead-words h1 { font-size: 30px; }
	.top-steam { display: none; }
	.mark img { height: 28px; }
}