/* GridCycle III, 2026 additions (loaded after the original style.css): modern WordPress output, the Meta slide, phones. */
.header-link a { z-index: 1; }
#wrapper { background: transparent; }
.header-link { margin-top: 0; }
.header-link a { margin-top: 0; }
.randomslogan { width: auto; float: none; text-align: right; padding: 252px 30px 0 0; }
#search { position: relative; z-index: 2; }
#search label { color: #fff; }
.pagetitle { color: #ddd; font-size: 18px; margin: 0 10px 14px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.advert { text-align: center; color: #bbb; font-size: 11px; }
.advert img { max-width: 100%; height: auto; }
/* WordPress output the 2010 theme never had */
.alignleft { float: left; margin: 4px 12px 8px 0; }
.alignright { float: right; margin: 4px 0 8px 12px; }
.aligncenter { display: block; margin: 8px auto; }
.wp-caption { max-width: 100%; text-align: center; font-size: 11px; color: #999; }
.wp-caption img { display: block; margin: 0 auto 4px; }
.navigation .alignleft, .navigation .alignright { margin: 0; }
/* comment form (logged-in members) */
.comment-respond { margin: 16px 20px 10px 0; color: #bbb; }
.comment-respond h3 { color: #ddd; font-size: 16px; margin: 0 0 8px; }
.comment-form textarea { width: 100%; box-sizing: border-box; background: #0b1424; color: #ddd; border: 1px solid #0054BC; padding: 6px; font: inherit; }
.comment-form input[type="submit"] { background: #0054BC; color: #fff; border: 0; padding: 6px 18px; cursor: pointer; font: bold 12px Verdana, sans-serif; }
.comments .reply { font-size: 11px; margin: 2px 0 0; }
.comments ol.children { margin: 8px 0 0 20px; }
/* WP-Polls */
.wp-polls { border: 1px solid #0054BC; padding: 8px 14px; margin: 12px 0; background: #111a2e; color: #ccc; }
.randomslogan h2 { margin: 0; font-size: 14px; color: #9fb4d9; font-style: italic; }
.entry img { max-width: 100%; height: auto; }
.byline { overflow: hidden; margin-top: 12px; }
.post .right1 { float: right; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 12px 0; }
.gallery a { display: block; line-height: 0; border: 1px solid #0054BC; }
.gallery img { width: 100%; height: 110px; object-fit: cover; }
.video { position: relative; aspect-ratio: 16 / 9; margin: 12px 0; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gone { color: #8a8a8a; font-style: italic; }
.gc-table { border-collapse: collapse; margin: 12px 0; }
.gc-audio { margin: 12px 0; }
.gc-track { margin: 0 0 10px; color: #ddd; }
.gc-track audio { display: block; width: 100%; margin-top: 4px; }
.gc-table th, .gc-table td { border: 1px solid #0054BC; padding: 3px 8px; }
.gc-table img.aligncenter { display: inline; margin: 0; }   /* star ratings sit in a row */
.comments h2 { color: #ddd; font-size: 18px; margin: 10px 20px; }
.comments ol li { margin-bottom: 14px; }
.cdate { color: #666; font-size: 11px; }
.ctext p { margin: 4px 0; }
.navigation { height: auto; overflow: hidden; padding: 6px 20px 16px; }

/* Meta panels slide open from their tab (site.js); without JavaScript they simply stay open */
.js .post > .meta { height: 0; overflow: hidden; transition: height 0.7s ease; }
.js .post > .trigger { cursor: pointer; }
.post > .meta .comments h2 { margin: 10px 0; }
.post > .trigger:focus-visible { outline: 2px solid #4da3ff; outline-offset: -2px; }
.post > .meta .comments { margin: 0 0 10px; box-sizing: border-box; padding-right: 20px; }
.post > .meta .comments ol li { width: auto; }
.post > .meta .comments ol li p { width: auto; }
/* Previews in lists: the first ~25 lines of a long post, fading out; the tab (or a click) slides the rest open */
.cover.preview { position: relative; overflow: hidden; transition: max-height 0.7s ease; cursor: pointer; }
.cover.preview::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 90px; pointer-events: none;
	background: linear-gradient(rgba(0, 28, 65, 0), rgb(0, 28, 65)); transition: opacity 0.4s; }
.post.open .cover.preview { cursor: auto; }
.post.open .cover.preview::after { opacity: 0; }
/* Sidebar sections: header tab opens/closes the list (js/gridcycle.js); the ship points down when closed, up when open */
.gc-side > h2 { position: relative; padding-right: 28px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.js .gc-side > h2 { cursor: pointer; user-select: none; }
.js .gc-side > h2::after { content: ""; position: absolute; right: 8px; top: 50%; width: 17px; height: 18px; margin-top: -9px;
	background: url(images/ship-up.png) no-repeat center; }
.js .gc-side.closed > h2::after { background-image: url(images/ship-down.png); }
.gc-side > h2:focus-visible { outline: 2px solid #4da3ff; outline-offset: -2px; }
.js .gc-side > .gc-side-body { overflow: hidden; transition: height 0.5s ease; }
.js .gc-side.closed > .gc-side-body { height: 0; }
.js .gc-side.closed { margin-bottom: 0; }
/* Wider posts (2026): the 611px post graphics are rebuilt from left end + repeating middle + right end
   (images/wide/), so the swirl, frame edges and EXPAND/COLLAPSE button stay crisp at any width. */
#content { width: 726px; }
.title { background: url(images/wide/title-l.png) no-repeat left top, url(images/wide/title-r.png) no-repeat right top,
	url(images/wide/title-m.png) repeat-x left top, #070707; }
.cover, .meta { background: url(images/wide/frame-l.png) repeat-y left top, url(images/wide/frame-r.png) repeat-y right top,
	url(images/wide/frame-m.png) repeat left top, #222; }
.post .trigger { background: url(images/wide/expand-l.png) no-repeat left top, url(images/wide/expand-r.png) no-repeat right top,
	url(images/wide/expand-m.png) repeat-x left top, #fff; }
.post.open > .trigger { background: url(images/wide/collapse-l.png) no-repeat left top, url(images/wide/collapse-r.png) no-repeat right top,
	url(images/wide/collapse-m.png) repeat-x left top, #fff; }

/* One sidebar column (2026): the full width next to the posts; the 170px tab and footer images stretch */
.gc-onecol { width: 259px; padding-right: 0; }
.gc-onecol h2 { background-size: 100% 100%; }
.gc-onecol ul ul { background-size: 100% auto; }
.gc-onecol .advert { margin-top: 14px; }
/* Categories as a cloud, Archives by year */
.gc-cloud { padding: 8px 10px !important; line-height: 1.6; background: #111; }
.gc-cloud a { margin-right: 5px; white-space: nowrap; }
.gc-cloud a.gc-top { font-weight: bold; }
.gc-year details summary { cursor: pointer; color: #6fa8ff; padding: 0; }
.gc-year details summary::marker { color: #4d6f9f; }
.gc-year details ul { margin: 4px 0 2px 10px !important; padding: 0 !important; background: none !important; }
.gc-year details li { border: 0 !important; padding: 1px 0 !important; background: none !important; }
.count { color: #667; font-size: 11px; }
.extinct { color: #777; }
.extinct span { font-size: 11px; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .js .post > .meta, .cover.preview, .js .gc-side > .gc-side-body { transition: none; } }

/* Narrow screens: one column, sidebars under the posts */
@media (max-width: 1000px) {
	#wrapper, .content, .header, .header-link, .header-link a { width: 100%; }
	/* header: just the GRIDCYCLE + light cycle strip (the black band above it held the desktop slogan) */
	.header, .header-link, .header-link a { background-size: 100% auto; background-repeat: no-repeat; background-position: center bottom; height: 11vw; }
	.header-link { margin: 0 0 10px; }
	.header-link a { margin-top: 0; }
	.randomslogan { display: none; }
	/* the search gets its own 36px bar above the logo strip */
	.header, .header-link { height: calc(11vw + 36px); }
	.header-link a { height: 11vw; margin-top: 36px; }
	#search { float: none; height: 36px; box-sizing: border-box; padding: 6px 8px; text-align: right; background: #001f45; }
	#search input { width: 120px; margin: 0 6px; }
	#content { float: none; width: auto; margin: 10px 0 0; }
	/* sidebars: one full-width column, long lists in two columns */
	#sidebar { display: block; padding: 0 10px; }
	.sidebar1, .sidebar2, .gc-onecol { float: none; width: auto; margin: 0 0 12px; padding: 0; }
	.sidebar1 ul ul, .sidebar2 ul ul { columns: 2; column-gap: 6px; }
	.sidebar1 ul ul li, .sidebar2 ul ul li { break-inside: avoid; }
	.sidebar1 h2, .sidebar2 h2 { background-size: 100% 100%; }
	/* post titles: the 90px title plate grows with two-line titles */
	.title { height: auto; min-height: 56px; padding-bottom: 10px; background-size: 100% auto; }
	.post h2 { height: auto; }
	.post { margin: 0 6px 16px; }
	/* fixed widths from old posts and the theme's comment list */
	.entry { overflow-wrap: anywhere; }
	.entry div, .entry table, .entry iframe, .entry object, .entry embed, .entry blockquote, .entry pre { max-width: 100%; box-sizing: border-box; }
	.entry pre { overflow-x: auto; }
	.entry table { display: block; overflow-x: auto; }   /* wide tables (e.g. a pasted score screen) scroll inside themselves */
	.comments { box-sizing: border-box; }
	.comments ol { padding-left: 0; }
	.comments ol li { width: auto; }
	.comments ol li p { width: auto; padding-left: 0; overflow-wrap: anywhere; }
	.ctext img { max-width: 100%; height: auto; }
	.ctext table, .ctext pre { display: block; max-width: 100%; overflow-x: auto; }
}