/*
Theme Name: Kireek PSO
Theme URI: https://kireek.net/
Author: kireek.net
Description: A fan-site theme modelled on the 2008 PHANTASY STAR ONLINE Blue Burst portal layout: a brushed-metal fixed-width frame on a sparkling blue background, segmented global navigation, a left banner column, badge-tagged news lists and thumbnail feature rows, plus an outer banner column. The layout artwork is CSS; the default header image uses PSO character art © SEGA / Sonic Team from a wallpaper remastered by u/dumarcm.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kireek-pso
Tags: three-columns, left-sidebar, custom-header, custom-logo, custom-menu, custom-background, featured-images, sticky-post, threaded-comments, translation-ready, blog, news
*/

/* =========================================================================
   Tokens
   ====================================================================== */
:root {
	--frame-w: 1080px;
	--left-w: 230px;
	--outer-w: 160px;

	--metal-dark: #3e4246;
	--metal-mid: #8a8f93;
	--metal-light: #d6d9db;
	--metal-hi: #f4f5f6;

	--paper: #e4e4e2;
	--paper-line: #c4c5c6;
	--ink: #333;
	--ink-soft: #555;
	--ink-muted: #777;
	--link: #1d3fd6;
	--link-hover: #e2620d;

	--row-new: #bcd5f2;
	--bar-dark: #232527;
	--bar-mid: #3a3d40;

	--sky-1: #30c3e6;
	--sky-2: #2a9fe0;
	--sky-3: #2a6dd9;

	--pixel: "Silkscreen", "Press Start 2P", "Courier New", monospace;
	--body: Verdana, "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", "Noto Sans JP", sans-serif;
}

/* =========================================================================
   Base
   ====================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100vh;
	font: 12px/1.65 var(--body);
	color: var(--ink);
	/* Sparkles + diagonal sheen + cyan→blue sweep, like the original backdrop.
	   A Customizer background colour/image (custom-background) overrides this. */
	background-color: var(--sky-2);
	background-image:
		radial-gradient(circle at 12% 18%, rgba(255,255,255,.9) 0 1px, transparent 2px),
		radial-gradient(circle at 63% 9%,  rgba(255,255,255,.8) 0 1px, transparent 2px),
		radial-gradient(circle at 38% 47%, rgba(255,255,255,.7) 0 1.5px, transparent 3px),
		radial-gradient(circle at 81% 33%, rgba(255,255,255,.75) 0 1px, transparent 2px),
		radial-gradient(circle at 24% 71%, rgba(255,255,255,.6) 0 1px, transparent 2px),
		radial-gradient(circle at 92% 64%, rgba(255,255,255,.7) 0 1.5px, transparent 3px),
		radial-gradient(circle at 54% 86%, rgba(255,255,255,.55) 0 1px, transparent 2px),
		radial-gradient(ellipse at 70% 10%, rgba(140,240,255,.35), transparent 45%),
		repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 2px, transparent 2px 9px),
		linear-gradient(90deg, var(--sky-1) 0%, var(--sky-2) 55%, var(--sky-3) 100%);
	background-size:
		260px 260px, 340px 340px, 420px 420px, 300px 300px, 380px 380px, 460px 460px, 520px 520px,
		100% 900px, auto, auto;
}
body.custom-background { background-image: none; }

a { color: var(--link); text-decoration: none; }
a:hover, a:focus { color: var(--link-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid #ff9c2a; outline-offset: 1px; }

img { max-width: 100%; height: auto; vertical-align: middle; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto;
	top: 6px; left: 6px; z-index: 100;
	padding: 8px 12px;
	background: #fff; color: var(--ink);
}

/* =========================================================================
   Page wrap: frame on the left, outer banners on the blue
   ====================================================================== */
.page-wrap {
	display: flex;
	align-items: flex-start;
	gap: 17px;
	padding: 0 0 0 10px;
}
.kpso-centered .page-wrap { justify-content: center; padding: 0 16px; }
/* Wide screens: the frame itself sits dead centre, outer banners hang off its right edge. */
@media (min-width: 1467px) {
	.kpso-centered .page-wrap {
		display: grid;
		grid-template-columns: 1fr var(--frame-w) 1fr;
		column-gap: 17px;
	}
	.kpso-centered .frame { grid-column: 2; width: auto; }
	.kpso-centered .outer-col { grid-column: 3; justify-self: start; }
}

/* Brushed-metal frame */
.frame {
	flex: 0 0 var(--frame-w);
	width: var(--frame-w);
	padding: 0 4px 4px;
	background:
		linear-gradient(90deg,
			#55595d 0, #c9ccce 1px, #eceef0 2px, #a6abaf 3px, #6d7276 4px, transparent 4px,
			transparent calc(100% - 4px), #6d7276 calc(100% - 4px), #a6abaf calc(100% - 3px), #eceef0 calc(100% - 2px), #c9ccce calc(100% - 1px), #55595d 100%),
		linear-gradient(180deg, #b7bbbe, #9da2a6);
	box-shadow: 0 0 0 1px rgba(0,0,0,.45), 4px 0 10px rgba(0,30,80,.35);
}

/* =========================================================================
   Top strip (site label + small links)
   ====================================================================== */
.top-strip {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	height: 20px;
	margin: 0 -4px;
	background: linear-gradient(#1c1e20, #2c2f32);
	border-bottom: 1px solid #000;
	font: 8px/20px var(--pixel);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #e7e9ea;
}
.top-label {
	margin: 0;
	padding: 0 34px 0 22px;
	background: linear-gradient(#55595d, #2f3235);
	clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
	border-bottom: 2px solid #a5aaae;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.top-label a { color: #fff; }
.top-label a:hover { color: #9fe6ff; text-decoration: none; }
.top-label-accent { color: #58d6ff; margin-left: .3em; }

.top-links {
	padding: 0 18px 0 34px;
	background: linear-gradient(#55595d, #2f3235);
	clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
	border-bottom: 2px solid #a5aaae;
}
.top-links ul { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.top-links a { color: #fff; }
.top-links a::before { content: "\2192"; margin-right: 8px; font-family: var(--body); font-size: 9px; }
.top-links a:hover { color: #9fe6ff; text-decoration: none; }

/* =========================================================================
   Header (custom header image area)
   ====================================================================== */
.site-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 330px;
	margin: 4px 0 0;
	border: 1px solid #6c7175;
	background:
		linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px) 0 0 / 100% 24px,
		linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px) 0 0 / 24px 100%,
		linear-gradient(180deg, #f1f1ef, #dededc);
	box-shadow:
		inset 0 0 0 2px #fafafa,
		inset 0 0 0 3px #b4b8bb,
		0 1px 0 #f4f5f6;
	overflow: hidden;
	text-align: center;
}
.site-header.has-image { display: block; min-height: 0; background: #ccc; }
.header-image { display: block; width: 100%; height: auto; }
.site-header.has-image .site-branding {
	position: absolute;
	left: 26px; top: 50%;
	transform: translateY(-50%);
	padding: 0;
	text-align: left;
}
.site-header.has-image .site-title { font-size: 54px; }
.site-header.has-image .site-title a {
	color: #f2f8fc;
	text-shadow: 0 0 10px rgba(56,200,255,.8), 2px 3px 0 #021024;
}
.site-header.has-image .site-title a:hover { color: #9fe9ff; }
.site-header.has-image .site-tagline {
	color: #9fe9ff;
	text-shadow: 0 1px 2px #021024;
}
.site-branding { padding: 20px; }
.site-title {
	margin: 0;
	font: italic 900 46px/1.05 "Arial Black", Verdana, sans-serif;
	letter-spacing: -.02em;
}
.site-title a {
	color: #5a5f63;
	text-shadow: 0 1px 0 #fff, 0 -1px 0 rgba(0,0,0,.15);
}
.site-title a:hover { color: #2a6dd9; text-decoration: none; }
.site-tagline {
	margin: 8px 0 0;
	font: 9px/1.4 var(--pixel);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #6d7276;
}
.custom-logo-link { display: inline-block; margin-bottom: 10px; }

/* =========================================================================
   Global navigation bar + info bar
   ====================================================================== */
.global-nav {
	position: relative;
	margin-top: 4px;
	background: linear-gradient(#45494c 0, #2b2e30 50%, #1b1d1f 51%, #26292b 100%);
	border: 1px solid #0b0c0d;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.global-nav > ul {
	display: flex;
	margin: 0;
	padding: 0 0 0 26px;
	list-style: none;
	min-height: 26px;
	border-left: 1px solid #000;
}
.global-nav > ul::before,
.global-nav > ul::after {
	/* rivets at both ends, like the original bar caps */
	content: "";
	position: absolute; top: 4px; bottom: 4px;
	width: 3px;
	background: repeating-linear-gradient(#777 0 1px, transparent 1px 4px);
}
.global-nav > ul::before { left: 6px; }
.global-nav > ul::after { right: 6px; }

.global-nav li { position: relative; }
.global-nav > ul > li {
	flex: 1 1 auto;
	border-right: 1px solid #000;
	box-shadow: 1px 0 0 #4c5054;
}
.global-nav > ul > li:last-child { margin-right: 22px; }
.global-nav a {
	display: block;
	padding: 0 12px;
	font: 9px/26px var(--pixel);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	color: #c9cdd0;
	white-space: nowrap;
}
.global-nav a:hover,
.global-nav a:focus,
.global-nav .current-menu-item > a,
.global-nav .current_page_item > a {
	color: #8fe4ff;
	text-decoration: none;
	background: linear-gradient(#5a5f63, #33373a 50%, #23272a 51%, #2f3437);
	text-shadow: 0 0 6px rgba(80,200,255,.7);
}
/* dropdowns */
.global-nav .sub-menu {
	position: absolute;
	left: 0; top: 100%;
	z-index: 20;
	min-width: 100%;
	margin: 0; padding: 0;
	list-style: none;
	background: #2a2d30;
	border: 1px solid #000;
	opacity: 0; visibility: hidden;
	transition: opacity .12s;
}
.global-nav li:hover > .sub-menu,
.global-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.global-nav .sub-menu a { text-align: left; border-top: 1px solid #44484b; }

.nav-toggle { display: none; }

.info-bar {
	min-height: 24px;
	margin-top: 2px;
	background: linear-gradient(#2c2f31, #3b3e41);
	border: 1px solid #0b0c0d;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
	overflow: hidden;
}
.info-bar-text {
	margin: 0;
	padding: 0 12px;
	font-size: 11px;
	line-height: 22px;
	color: #9fdcff;
	white-space: nowrap;
	overflow: hidden;
}
.info-bar-text span {
	display: inline-block;
	padding-left: 100%;
	animation: kpso-ticker 28s linear infinite;
}
@keyframes kpso-ticker { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
	.info-bar-text span { animation: none; padding-left: 0; }
}

/* =========================================================================
   Columns
   ====================================================================== */
.columns {
	display: grid;
	grid-template-columns: var(--left-w) 1fr;
	grid-template-areas: "left main";
	gap: 0;
	margin-top: 4px;
	background: var(--paper);
	border: 1px solid #6c7175;
}

/* Left banner column: grooved metal */
.left-col {
	grid-area: left;
	padding: 10px 5px 18px;
	background:
		repeating-linear-gradient(180deg, transparent 0 40px, rgba(255,255,255,.35) 40px 41px, transparent 41px 80px),
		linear-gradient(90deg,
			#8e9396 0, #c5c8ca 3px, #a9adb0 5px, #c9ccce 6px,
			#c3c6c8 calc(100% - 6px), #a9adb0 calc(100% - 5px), #c5c8ca calc(100% - 3px), #7f8488 100%);
	border-right: 1px solid #6c7175;
}
.left-col .widget {
	margin: 0 0 9px;
	padding: 4px;
	background: linear-gradient(#e9ebec, #b8bcbf);
	border: 1px solid #5f6468;
	box-shadow: inset 0 0 0 1px #f8f8f8, 0 1px 2px rgba(0,0,0,.25);
}
.left-col .widget img { display: block; width: 100%; border: 1px solid #44484b; }
.left-col .widget a:hover img { filter: brightness(1.12); }
.left-col .widget-title,
.left-col .widget .wp-block-heading,
.left-col .widget .wp-block-search__label {
	display: block;
	max-width: none !important;
	margin: -4px -4px 6px !important;
	width: calc(100% + 8px) !important;
	padding: 3px 8px;
	font: 9px/16px var(--pixel);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(#55595d, #2f3235);
}
.left-col .widget ul { margin: 0; padding: 0; list-style: none; }
.left-col .widget li a {
	display: block;
	padding: 4px 6px 4px 18px;
	border-bottom: 1px solid #aeb2b5;
	color: #2a2d30;
	font-size: 11px;
	position: relative;
}
.left-col .widget li a::before {
	content: "";
	position: absolute; left: 6px; top: 50%;
	width: 5px; height: 5px;
	margin-top: -3px;
	background: linear-gradient(135deg, #8fe1ff, #1d6fd6);
	transform: rotate(45deg);
}
.left-col .widget li a:hover { background: rgba(255,255,255,.5); color: var(--link); text-decoration: none; }
.left-col .widget p { margin: 0 0 6px; font-size: 11px; }
.left-col .wp-block-button__link,
.left-col .button {
	display: block;
	padding: 5px 8px;
	font-size: 11px;
	text-align: center;
	color: #2a2d30;
	border-radius: 3px;
	background: linear-gradient(#fdfdfd, #c4c7c9);
	border: 1px solid #6c7175;
}
.placeholder-banner { text-align: center; }
.placeholder-banner a { display: block; padding: 22px 6px; font-size: 10px; color: #555; }

/* Main column */
.main-col {
	grid-area: main;
	min-width: 0;
	padding: 12px 10px 20px;
	border-left: 1px solid #f5f5f4;
}

/* =========================================================================
   Section heading: swirl icon · title · MORE INFORMATION tab · double rule
   ====================================================================== */
.news-section { margin-bottom: 14px; }
.section-head {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin: 0 0 6px;
	padding: 0 0 4px;
}
.section-head::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: -4px;
	height: 5px;
	background:
		linear-gradient(#fafafa, #fafafa) 0 0 / 100% 1px no-repeat,
		linear-gradient(#9da1a4, #7d8285);
	border-bottom: 1px solid #f2f2f2;
	box-shadow: 0 1px 0 #b8bbbd;
}
.section-title {
	position: relative;
	margin: 0;
	padding-left: 19px;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.3;
	color: #4d5256;
	text-shadow: 0 1px 0 #fff;
}
.section-title::before {
	/* little swirl / "9" glyph */
	content: "";
	position: absolute; left: 1px; top: 50%;
	width: 13px; height: 13px;
	margin-top: -6px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 38%, var(--paper) 0 2.5px, transparent 3px),
		conic-gradient(from 200deg, #6e7377, #b3b7ba, #6e7377);
	box-shadow: 0 1px 0 #fff;
}
.section-title::after {
	content: "";
	position: absolute; left: 7px; top: 50%;
	width: 3px; height: 9px;
	margin-top: 1px;
	background: #6e7377;
	border-radius: 0 0 2px 2px;
	transform: skewX(-12deg);
}
.more-tab {
	flex: 0 0 auto;
	margin-bottom: -4px;
	padding: 2px 10px 1px 26px;
	font: 7px/12px var(--pixel);
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #4d5256;
	background: linear-gradient(#fdfdfd, #d4d6d7);
	clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
	border-top: 1px solid #8d9195;
	position: relative;
}
.more-tab::before {
	content: "\2192";
	position: absolute; left: 14px;
	font: 9px/12px var(--body);
}
.more-tab:hover { color: var(--link); text-decoration: none; }

/* =========================================================================
   Badges (category label). Colour picked by category slug.
   ====================================================================== */
.badge {
	display: inline-block;
	min-width: 34px;
	padding: 0 5px;
	font-size: 10px;
	line-height: 13px;
	text-align: center;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 2px;
	background: linear-gradient(#5d9fe8, #2453bf);
	border: 1px solid #1a3c8c;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
	white-space: nowrap;
}
.badge-news, .badge-info, .badge-notice, .badge-information, .badge-oshirase {
	background: linear-gradient(#5fd0e0, #1f94b3); border-color: #157089;
}
.badge-followup, .badge-update, .badge-updates, .badge-zokuho {
	background: linear-gradient(#6a6e72, #2d3033); border-color: #111;
}
.badge-maintenance, .badge-mainte, .badge-maint {
	background: linear-gradient(#5d9fe8, #2453bf); border-color: #1a3c8c;
}
.badge-event, .badge-events, .badge-campaign {
	background: linear-gradient(#ffb25a, #e0670f); border-color: #a4470a;
}
.badge-quest, .badge-quests {
	background: linear-gradient(#7fd77a, #2f9b3a); border-color: #1f6b27;
}
.badge-community, .badge-team {
	background: linear-gradient(#c79af0, #7b3fc4); border-color: #552a8a;
}
.badge-uncategorized {
	background: linear-gradient(#a8acaf, #6d7276); border-color: #4a4e52;
}

/* =========================================================================
   List rows (badge · title · date)
   ====================================================================== */
.news-list { margin: 8px 0 0; padding: 0; list-style: none; }
.news-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 8px;
	min-height: 25px;
	padding: 2px 4px 2px 2px;
	border-bottom: 1px solid var(--paper-line);
}
.news-row.is-new {
	background: var(--row-new);
	border-bottom-color: #f2f6fb;
}
.news-badge .badge { min-width: 38px; }
.news-title { font-size: 12px; overflow-wrap: anywhere; }
.news-date { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }

/* =========================================================================
   Feature rows (thumbnail + diamond title + excerpt)
   ====================================================================== */
.feature-list { margin-top: 10px; }
.feature-row {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 12px;
	padding: 4px 0 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--paper-line);
}
.feature-thumb {
	display: block;
	width: 150px; height: 100px;
	background:
		linear-gradient(135deg, transparent 48%, rgba(0,0,0,.06) 49% 51%, transparent 52%),
		#ececea;
	border: 1px solid #b9bcbe;
	box-shadow: inset 0 0 0 1px #fff;
	overflow: hidden;
}
.feature-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature-title {
	position: relative;
	margin: 0 0 6px;
	padding: 0 0 3px 16px;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.5;
	border-bottom: 1px solid var(--paper-line);
}
.feature-title::before {
	content: "";
	position: absolute; left: 3px; top: 4px;
	width: 7px; height: 7px;
	background: linear-gradient(135deg, #bff0ff 0, #36a8f0 45%, #1648c4 100%);
	transform: rotate(45deg);
	box-shadow: 0 0 0 1px rgba(255,255,255,.8);
}
.feature-excerpt { padding-left: 8px; color: var(--ink); }
.feature-excerpt p { margin: 0; }

.no-results { padding: 10px 4px; color: var(--ink-soft); }
.archive-description { margin: 10px 0; color: var(--ink-soft); }

/* =========================================================================
   Pagination
   ====================================================================== */
.pagination .nav-links,
.post-navigation .nav-links,
.comments-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 12px;
}
.pagination .page-numbers {
	display: inline-block;
	min-width: 24px;
	padding: 2px 6px;
	text-align: center;
	font-size: 11px;
	border: 1px solid #8d9195;
	background: linear-gradient(#fff, #d6d8d9);
	color: var(--ink);
}
.pagination .page-numbers.current {
	background: linear-gradient(#5d9fe8, #2453bf);
	color: #fff;
	border-color: #1a3c8c;
}
.post-navigation .nav-links { justify-content: space-between; font-size: 11px; }

/* =========================================================================
   Single posts & pages
   ====================================================================== */
.entry-header { margin: 12px 0 10px; }
.entry-title {
	margin: 0 0 6px;
	font-size: 17px;
	line-height: 1.4;
	color: #2f3336;
}
.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding-bottom: 6px;
	border-bottom: 1px dotted #9da1a4;
	font-size: 11px;
	color: var(--ink-soft);
}
.entry-thumb { margin: 0 0 12px; }
.entry-thumb img { border: 1px solid #b9bcbe; }

.entry-content { font-size: 12px; line-height: 1.8; overflow-wrap: break-word; }
.entry-content > * { margin-top: 0; margin-bottom: 1em; }
.entry-content h2,
.entry-content h3,
.entry-content h4 { color: #3d4246; line-height: 1.4; margin-top: 1.5em; }
.entry-content h2 {
	font-size: 14px;
	padding: 3px 8px;
	background: linear-gradient(90deg, #cfd2d4, transparent);
	border-left: 4px solid #6e7377;
}
.entry-content h3 {
	font-size: 13px;
	padding-left: 14px;
	position: relative;
}
.entry-content h3::before {
	content: "";
	position: absolute; left: 1px; top: .45em;
	width: 7px; height: 7px;
	background: linear-gradient(135deg, #bff0ff, #1648c4);
	transform: rotate(45deg);
}
.entry-content h4 { font-size: 12px; }
.entry-content blockquote {
	margin-left: 0;
	padding: 8px 12px;
	background: #f2f2f0;
	border-left: 3px solid #8d9195;
}
.entry-content table { width: 100%; border-collapse: collapse; font-size: 11px; }
.entry-content th,
.entry-content td { padding: 4px 6px; border: 1px solid #a9adb0; }
.entry-content th { background: linear-gradient(#f5f5f5, #d3d5d7); text-align: left; }
.entry-content tr:nth-child(even) td { background: rgba(255,255,255,.45); }
.entry-content code,
.entry-content pre { font-family: Consolas, "Courier New", monospace; font-size: 11px; background: #f4f4f2; }
.entry-content pre { padding: 8px 10px; border: 1px solid #c4c5c6; overflow-x: auto; }
.entry-content hr { border: 0; height: 2px; background: linear-gradient(#9da1a4, #fafafa); }
.entry-content img { border: 1px solid #b9bcbe; }

.alignleft { float: left; margin: 0 1em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text,
.wp-element-caption,
figcaption { font-size: 10px; color: var(--ink-muted); text-align: center; }
.entry-content::after { content: ""; display: table; clear: both; }

.entry-tags { font-size: 11px; }
.entry-tags a {
	display: inline-block;
	margin: 0 4px 4px 0;
	padding: 0 6px;
	border: 1px solid #a9adb0;
	background: #f2f2f0;
	color: var(--ink-soft);
}
.page-links { font-size: 11px; }

/* =========================================================================
   Comments & forms
   ====================================================================== */
.comments-area { margin-top: 20px; }
.comment-list { padding-left: 0; list-style: none; }
.comment-list .children { list-style: none; padding-left: 20px; }
.comment-body {
	margin-bottom: 8px;
	padding: 8px 10px;
	background: rgba(255,255,255,.5);
	border: 1px solid var(--paper-line);
}
.comment-meta { font-size: 10px; color: var(--ink-muted); }
.comment-author .avatar { float: left; margin-right: 8px; border: 1px solid #b9bcbe; }
.comment-respond .section-head { margin-top: 16px; }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea {
	max-width: 100%;
	padding: 3px 5px;
	font: 12px var(--body);
	border: 1px solid #8d9195;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,.15);
	background: #fff;
}
textarea { width: 100%; }
button,
input[type="submit"],
.search-submit {
	padding: 3px 12px;
	font: 9px/16px var(--pixel);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #2a2d30;
	border: 1px solid #6c7175;
	border-radius: 3px;
	background: linear-gradient(#fdfdfd, #c4c7c9);
	cursor: pointer;
}
button:hover,
input[type="submit"]:hover { background: linear-gradient(#fff, #d8f2ff); }
.search-form { display: flex; gap: 4px; }
.search-form .search-field { flex: 1 1 auto; min-width: 0; }

/* Block widgets (Search, Latest Posts, etc.) */
.widget .wp-block-search__inside-wrapper { display: flex; gap: 4px; }
.widget .wp-block-search__input { min-width: 0; padding: 3px 5px; font-size: 11px; border: 1px solid #8d9195; }
.widget .wp-block-search__button {
	margin: 0;
	padding: 3px 8px;
	font: 8px/16px var(--pixel);
	color: #2a2d30;
	background: linear-gradient(#fdfdfd, #c4c7c9);
	border: 1px solid #6c7175;
}
.widget .wp-block-group__inner-container > :last-child,
.widget .wp-block-group > :last-child { margin-bottom: 0; }
.widget .wp-block-latest-posts,
.widget .wp-block-latest-comments,
.widget .wp-block-archives,
.widget .wp-block-categories { margin: 0; padding: 0; list-style: none; }
.left-col .widget .wp-block-latest-comments__comment { margin: 0 0 6px; font-size: 11px; }

/* =========================================================================
   Footer
   ====================================================================== */
.site-footer { margin-top: 4px; }
.footer-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	padding: 4px 12px;
	background: linear-gradient(#64686b, #45494c 60%, #3a3d40);
	border: 1px solid #1d1f21;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
	color: #e6e8e9;
}
.footer-links ul { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.footer-links a { color: #fff; font-size: 10px; }
.footer-links a::before { content: "\2192"; margin-right: 6px; font-size: 9px; }
.copyright {
	margin: 0;
	font: 8px/1.4 var(--pixel);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
}
.footer-logos { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.footer-logos .widget { margin: 0; }
.footer-logos .widget-title { display: none; }
.footer-logos img { max-height: 40px; width: auto; }
.disclaimer {
	margin: 4px 0 0;
	padding: 5px 10px;
	font-size: 10px;
	color: #e9ebec;
	background: linear-gradient(#7a7f82, #63676a);
	border: 1px solid #3a3d40;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

/* =========================================================================
   Outer banner column (on the blue background)
   ====================================================================== */
.outer-col {
	flex: 0 0 var(--outer-w);
	width: var(--outer-w);
	padding-top: 6px;
}
.outer-col .widget {
	margin: 0 0 9px;
	border: 1px solid rgba(255,255,255,.55);
	background: rgba(255,255,255,.08);
	box-shadow: 0 0 8px rgba(0,40,120,.15);
}
.outer-col .widget img { display: block; width: 100%; }
.outer-col .widget-title,
.outer-col .widget .wp-block-heading,
.outer-col .widget .wp-block-search__label {
	display: block;
	margin: 0;
	padding: 3px 6px;
	font: 8px/14px var(--pixel);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(0,40,110,.35);
}
.outer-col .widget > :not(.widget-title):not(img):not(figure):not(a) { padding: 6px 8px; color: #fff; font-size: 11px; }
.outer-col .widget a { color: #fff; }
.outer-col .widget figure { margin: 0; }

/* =========================================================================
   Section ID Calculator (widget + [section_id_calculator] shortcode)
   ====================================================================== */
.secid-calc { font-size: 11px; }
.secid-field { margin: 0 0 6px; }
.secid-field label {
	display: block;
	margin-bottom: 2px;
	font: 8px/12px var(--pixel);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #3d4246;
}
.secid-calc input,
.secid-calc select {
	width: 100%;
	max-width: 100%;
	padding: 3px 4px;
	font: 12px var(--body);
	color: var(--ink);
	background: #fff;
	border: 1px solid #8d9195;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,.15);
}
.secid-field[hidden] { display: none; }
.secid-class-note {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	line-height: 1.3;
	color: var(--ink-muted);
}
.secid-class-note[hidden] { display: none; }
.secid-result {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 6px 8px;
	background: linear-gradient(#1d2124, #33383c);
	border: 1px solid #0b0c0d;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.secid-icon {
	--secid-color: #4a5055;
	flex: 0 0 auto;
	width: 20px; height: 20px;
	margin: 2px;
	transform: rotate(45deg);
	background:
		radial-gradient(circle at 35% 35%, rgba(255,255,255,.75), transparent 45%),
		var(--secid-color);
	border: 2px solid #c9cdd0;
	box-shadow: 0 0 0 1px #000, 0 0 8px var(--secid-color);
	transition: background-color .2s, box-shadow .2s;
}
.secid-result.is-empty .secid-icon { box-shadow: 0 0 0 1px #000; opacity: .5; }
.secid-icon.has-img {
	width: 30px; height: 30px;
	margin: 0;
	transform: none;
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border: 0;
	box-shadow: none;
	filter: drop-shadow(0 0 4px var(--secid-color));
}
.secid-text { display: flex; flex-direction: column; min-width: 0; }
.secid-caption {
	font: 7px/10px var(--pixel);
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #8a9399;
}
.secid-value {
	font-size: 14px;
	line-height: 1.2;
	color: #fff;
	text-shadow: 0 0 6px rgba(120,210,255,.6);
	overflow-wrap: anywhere;
}
.secid-result.is-empty .secid-value { font-size: 11px; font-weight: normal; color: #9aa4ab; text-shadow: none; }
.secid-note { margin: 6px 0 0; font-size: 10px; color: var(--ink-muted); }
.entry-content .secid-calc { max-width: 280px; }

/* =========================================================================
   Block editor helpers
   ====================================================================== */
.wp-block-image figcaption { margin-top: 4px; }
.wp-block-separator { border: 0; height: 2px; background: linear-gradient(#9da1a4, #fafafa); }
.wp-block-button__link { border-radius: 3px; }

/* =========================================================================
   Responsive
   ====================================================================== */
@media (max-width: 1288px) {
	.page-wrap { flex-direction: column; align-items: center; padding: 0 16px 16px; }
	.outer-col {
		width: var(--frame-w);
		max-width: 100%;
		flex-basis: auto;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 9px;
		padding-top: 0;
	}
	.outer-col .widget { margin: 0; }
}

/* Narrower than the frame: let it shrink, keep the two-column layout. */
@media (max-width: 1112px) {
	.frame { flex-basis: auto; width: 100%; }
	.outer-col { width: 100%; }
}

@media (max-width: 790px) {
	:root { --frame-w: 100%; }
	.page-wrap { padding: 0 0 16px; }
	.frame { flex-basis: auto; width: 100%; }
	.outer-col { padding: 0 16px; }

	.top-strip { height: auto; }
	.top-label { padding-left: 12px; }
	.top-links { padding: 0 10px 0 24px; }
	.top-links ul { gap: 12px; }

	.site-header { min-height: 180px; }
	.site-title,
	.site-header.has-image .site-title { font-size: 32px; }
	.site-header.has-image .site-branding { left: 16px; }
	.site-header.has-image .site-tagline { font-size: 7px; letter-spacing: .12em; }

	.nav-toggle {
		display: block;
		width: 100%;
		padding: 0 12px;
		font: 10px/32px var(--pixel);
		text-align: left;
		color: #c9cdd0;
		background: none;
		border: 0;
		border-radius: 0;
	}
	.nav-toggle::before { content: "\2261"; margin-right: 8px; font: 16px/1 var(--body); }
	.global-nav > ul { display: none; flex-direction: column; padding: 0; border-left: 0; }
	.global-nav > ul::before,
	.global-nav > ul::after { display: none; }
	.global-nav.is-open > ul { display: flex; }
	.global-nav > ul > li { border-right: 0; border-top: 1px solid #000; box-shadow: none; }
	.global-nav > ul > li:last-child { margin-right: 0; }
	.global-nav a { text-align: left; line-height: 34px; padding: 0 16px; }
	.global-nav .sub-menu { position: static; opacity: 1; visibility: visible; border: 0; }
	.global-nav .sub-menu a { padding-left: 32px; }

	.columns {
		grid-template-columns: 1fr;
		grid-template-areas: "main" "left";
	}
	.left-col {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 9px;
		padding: 10px 16px;
		border-right: 0;
		border-top: 1px solid #6c7175;
	}
	.left-col .widget { margin: 0; }
	.main-col { padding: 12px 16px 20px; border-left: 0; }

	.footer-bar { grid-template-columns: 1fr; text-align: center; padding: 8px 16px; }
	.footer-links ul,
	.footer-logos { justify-content: center; }
}

@media (max-width: 480px) {
	.news-row {
		grid-template-columns: auto 1fr;
		grid-template-areas: "badge date" "title title";
		row-gap: 2px;
		padding: 5px 4px;
	}
	.news-badge { grid-area: badge; }
	.news-date { grid-area: date; text-align: right; }
	.news-title { grid-area: title; }
	.feature-row { grid-template-columns: 90px 1fr; gap: 10px; }
	.feature-thumb { width: 90px; height: 60px; }
	.more-tab { font-size: 6px; padding-left: 22px; }
	.top-strip { font-size: 7px; }
	.top-label-accent { display: none; }
}