/*
Theme Name: Skyline Retail Theme
Theme URI: https://skylineretail.com/
Author: Skyline Retail UK
Author URI: https://skylineretail.com/
Description: A lightweight, WooCommerce-ready retail theme for Skyline Retail UK. Animated skyline hero, category and trust sections, original SVG artwork, brand colour tokens exposed as CSS custom properties, accessible focus states, motion-reduction support and a UK delivery note under the add-to-cart form.
Version: 6.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skyline-retail-theme
Tags: e-commerce, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks, accessibility-ready
WC requires at least: 8.0
WC tested up to: 9.9
*/

/* ==========================================================================
   1. Brand tokens
   Change values here to rebrand. Do not edit the rules that consume them.
   ========================================================================== */

:root {
	/* Core palette */
	--skyline-primary:        #1C2430; /* Deep slate-navy */
	--skyline-primary-hover:  #2A3442;
	--skyline-primary-soft:   #3A4452; /* Dividers on dark sections */

	/* Accent — warm gold.
	   --skyline-accent is 3.2:1 on white: FAILS WCAG AA for text.
	   Use it for fills, borders, badges and icons only.
	   For gold text on light backgrounds use --skyline-accent-text (5.35:1). */
	--skyline-accent:         #B8873B;
	--skyline-accent-hover:   #A2762F;
	--skyline-accent-text:    #8A6420;

	/* Neutrals */
	--skyline-bg:             #F7F8FA;
	--skyline-surface:        #FFFFFF;
	--skyline-border:         #DFE3E8;
	--skyline-border-strong:  #C3C9D1;

	/* Text */
	--skyline-text:           #1C2430;
	--skyline-text-muted:     #5A6472; /* 6.0:1 on white */
	--skyline-text-invert:    #FFFFFF;

	/* Status */
	--skyline-success:        #1F7A4C;
	--skyline-error:          #B3261E;

	/* Typography */
	--skyline-font-body:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--skyline-font-heading:   var(--skyline-font-body);
	--skyline-text-xs:        0.8125rem;
	--skyline-text-sm:        0.9375rem;
	--skyline-text-base:      1rem;
	--skyline-text-lg:        1.125rem;
	--skyline-text-xl:        1.5rem;
	--skyline-text-2xl:       2rem;
	--skyline-text-3xl:       2.5rem;
	--skyline-leading:        1.65;
	--skyline-leading-tight:  1.25;

	/* Spacing */
	--skyline-space-xs: 0.25rem;
	--skyline-space-sm: 0.5rem;
	--skyline-space-md: 1rem;
	--skyline-space-lg: 1.5rem;
	--skyline-space-xl: 2.5rem;
	--skyline-space-2xl: 4rem;

	/* Layout */
	--skyline-container:      1200px;
	--skyline-container-narrow: 760px;

	/* Shape */
	--skyline-radius:      6px;
	--skyline-radius-lg:   10px;
	--skyline-shadow:      0 1px 2px rgba(28, 36, 48, 0.06), 0 2px 8px rgba(28, 36, 48, 0.05);
	--skyline-shadow-lift: 0 4px 16px rgba(28, 36, 48, 0.10);

	--skyline-transition: 160ms ease;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

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

body {
	margin: 0;
	background-color: var(--skyline-bg);
	color: var(--skyline-text);
	font-family: var(--skyline-font-body);
	font-size: var(--skyline-text-base);
	line-height: var(--skyline-leading);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--skyline-font-heading);
	line-height: var(--skyline-leading-tight);
	color: var(--skyline-text);
	margin: 0 0 var(--skyline-space-md);
	font-weight: 700;
}

h1 { font-size: var(--skyline-text-3xl); }
h2 { font-size: var(--skyline-text-2xl); }
h3 { font-size: var(--skyline-text-xl); }

p { margin: 0 0 var(--skyline-space-md); }

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

a {
	color: var(--skyline-accent-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var(--skyline-transition);
}

a:hover,
a:focus {
	color: var(--skyline-primary);
}

/* Focus outlines are never removed — keyboard users and accessibility audits
   both depend on them. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
	outline: 3px solid var(--skyline-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.skyline-container {
	width: 100%;
	max-width: var(--skyline-container);
	margin-inline: auto;
	padding-inline: var(--skyline-space-md);
}

.skyline-site-main {
	padding-block: var(--skyline-space-xl);
	min-height: 50vh;
}

.skyline-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--skyline-space-sm) var(--skyline-space-md);
	background: var(--skyline-primary);
	color: var(--skyline-text-invert);
	border-radius: 0 0 var(--skyline-radius) 0;
}

.skyline-skip-link:focus {
	left: 0;
	color: var(--skyline-text-invert);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   4. Header
   ========================================================================== */

.skyline-site-header {
	background-color: var(--skyline-surface);
	border-bottom: 1px solid var(--skyline-border);
	position: sticky;
	top: 0;
	z-index: 100;
}

.skyline-header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--skyline-space-lg);
	min-height: 72px;
	flex-wrap: wrap;
}

.skyline-branding {
	display: flex;
	align-items: center;
	gap: var(--skyline-space-sm);
}

.skyline-site-title {
	font-size: var(--skyline-text-xl);
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
}

.skyline-site-title a {
	color: var(--skyline-primary);
	text-decoration: none;
}

.skyline-site-description {
	margin: 0;
	font-size: var(--skyline-text-xs);
	color: var(--skyline-text-muted);
}

.skyline-custom-logo-link img {
	max-height: 48px;
	width: auto;
}

/* Announcement strip */
.skyline-topbar {
	background-color: var(--skyline-primary);
	color: var(--skyline-text-invert);
	font-size: var(--skyline-text-xs);
	text-align: center;
	padding: var(--skyline-space-sm) var(--skyline-space-md);
}

.skyline-topbar strong {
	color: var(--skyline-accent);
}

/* Navigation */
.skyline-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--skyline-space-lg);
	margin: 0;
	padding: 0;
}

.skyline-nav a {
	color: var(--skyline-text);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--skyline-text-sm);
	padding-block: var(--skyline-space-sm);
	display: inline-block;
	border-bottom: 2px solid transparent;
}

.skyline-nav a:hover,
.skyline-nav .current-menu-item > a {
	color: var(--skyline-primary);
	border-bottom-color: var(--skyline-accent);
}

.skyline-nav .sub-menu {
	display: none;
}

.skyline-header-actions {
	display: flex;
	align-items: center;
	gap: var(--skyline-space-md);
}

.skyline-cart-link {
	display: inline-flex;
	align-items: center;
	gap: var(--skyline-space-xs);
	text-decoration: none;
	color: var(--skyline-primary);
	font-weight: 600;
	font-size: var(--skyline-text-sm);
	padding: var(--skyline-space-sm) var(--skyline-space-md);
	border: 1px solid var(--skyline-border-strong);
	border-radius: var(--skyline-radius);
	min-height: 44px;
}

.skyline-cart-link:hover {
	border-color: var(--skyline-primary);
	color: var(--skyline-primary);
}

.skyline-cart-count {
	background-color: var(--skyline-accent);
	color: var(--skyline-primary);
	border-radius: 999px;
	padding: 0.05em 0.55em;
	font-size: var(--skyline-text-xs);
	font-weight: 700;
}

@media (max-width: 782px) {
	.skyline-header-bar {
		justify-content: center;
		padding-block: var(--skyline-space-md);
	}
	.skyline-nav ul {
		justify-content: center;
		gap: var(--skyline-space-md);
	}
}

/* ==========================================================================
   5. Content — posts, pages, archives
   ========================================================================== */

.skyline-entry {
	background-color: var(--skyline-surface);
	border: 1px solid var(--skyline-border);
	border-radius: var(--skyline-radius-lg);
	padding: var(--skyline-space-lg);
	margin-bottom: var(--skyline-space-lg);
}

.skyline-entry-title {
	margin-bottom: var(--skyline-space-sm);
}

.skyline-entry-title a {
	color: var(--skyline-text);
	text-decoration: none;
}

.skyline-entry-title a:hover {
	color: var(--skyline-accent-text);
}

.skyline-entry-meta {
	color: var(--skyline-text-muted);
	font-size: var(--skyline-text-sm);
	margin-bottom: var(--skyline-space-md);
}

.skyline-entry-thumb img {
	border-radius: var(--skyline-radius);
	width: 100%;
	object-fit: cover;
	margin-bottom: var(--skyline-space-md);
}

.skyline-archive-header {
	margin-bottom: var(--skyline-space-lg);
	padding-bottom: var(--skyline-space-md);
	border-bottom: 2px solid var(--skyline-accent);
}

.skyline-read-more {
	display: inline-block;
	font-weight: 600;
	color: var(--skyline-accent-text);
	text-decoration: none;
}

.skyline-read-more:hover {
	text-decoration: underline;
}

.skyline-pagination {
	margin-top: var(--skyline-space-xl);
}

.skyline-pagination .page-numbers {
	display: inline-block;
	padding: var(--skyline-space-sm) var(--skyline-space-md);
	margin-right: var(--skyline-space-xs);
	border: 1px solid var(--skyline-border-strong);
	border-radius: var(--skyline-radius);
	text-decoration: none;
	color: var(--skyline-text);
	min-width: 44px;
	text-align: center;
}

.skyline-pagination .page-numbers.current,
.skyline-pagination .page-numbers:hover {
	background-color: var(--skyline-primary);
	border-color: var(--skyline-primary);
	color: var(--skyline-text-invert);
}

/* ==========================================================================
   6. WooCommerce — buttons
   ========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button,
.wp-block-button__link {
	background-color: var(--skyline-primary);
	color: var(--skyline-text-invert);
	border: 1px solid var(--skyline-primary);
	border-radius: var(--skyline-radius);
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	line-height: 1.4;
	min-height: 44px;
	transition: background-color var(--skyline-transition), border-color var(--skyline-transition);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:hover,
.wp-block-button__link:hover {
	background-color: var(--skyline-primary-hover);
	border-color: var(--skyline-primary-hover);
	color: var(--skyline-text-invert);
}

/* Conversion actions carry the gold. Text on gold is dark, never white. */
.woocommerce button.single_add_to_cart_button,
.woocommerce .checkout-button.button,
.woocommerce #place_order,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background-color: var(--skyline-accent);
	border-color: var(--skyline-accent);
	color: var(--skyline-primary);
	font-size: var(--skyline-text-lg);
	padding: 0.9rem 1.75rem;
}

.woocommerce button.single_add_to_cart_button:hover,
.woocommerce .checkout-button.button:hover,
.woocommerce #place_order:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--skyline-accent-hover);
	border-color: var(--skyline-accent-hover);
	color: var(--skyline-primary);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ==========================================================================
   7. WooCommerce — product grid
   ========================================================================== */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--skyline-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	background-color: var(--skyline-surface);
	border: 1px solid var(--skyline-border);
	border-radius: var(--skyline-radius-lg);
	padding: var(--skyline-space-md);
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	transition: box-shadow var(--skyline-transition), border-color var(--skyline-transition);
}

.woocommerce ul.products li.product:hover {
	border-color: var(--skyline-border-strong);
	box-shadow: var(--skyline-shadow-lift);
}

.woocommerce ul.products li.product img {
	border-radius: var(--skyline-radius);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin-bottom: var(--skyline-space-md);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--skyline-text-base);
	font-weight: 600;
	color: var(--skyline-text);
	line-height: 1.4;
	padding-top: 0;
}

.woocommerce ul.products li.product .price {
	color: var(--skyline-text);
	font-weight: 700;
	font-size: var(--skyline-text-lg);
}

.woocommerce ul.products li.product .price del {
	color: var(--skyline-text-muted);
	font-weight: 400;
	font-size: var(--skyline-text-sm);
	margin-right: var(--skyline-space-xs);
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--skyline-error);
}

.woocommerce span.onsale {
	background-color: var(--skyline-accent);
	color: var(--skyline-primary);
	font-weight: 700;
	border-radius: var(--skyline-radius);
	padding: 0.35em 0.7em;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
	top: var(--skyline-space-md);
	left: var(--skyline-space-md);
}

/* ==========================================================================
   8. WooCommerce — single product and gallery
   ========================================================================== */

.woocommerce div.product .product_title {
	font-weight: 700;
	line-height: 1.25;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--skyline-text);
	font-size: var(--skyline-text-2xl);
	font-weight: 700;
}

.woocommerce div.product div.images img {
	border-radius: var(--skyline-radius-lg);
	border: 1px solid var(--skyline-border);
	background-color: var(--skyline-surface);
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--skyline-space-sm);
	margin-top: var(--skyline-space-md);
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	width: 100%;
	margin: 0;
	float: none;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	opacity: 0.72;
	border: 2px solid transparent;
	border-radius: var(--skyline-radius);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	cursor: pointer;
	transition: opacity var(--skyline-transition), border-color var(--skyline-transition);
}

.woocommerce div.product div.images .flex-control-thumbs img:hover {
	opacity: 1;
}

/* The selected thumbnail must be unmistakable — a faint highlight leaves
   shoppers unsure which image they are looking at. */
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs .flex-active img {
	opacity: 1;
	border-color: var(--skyline-accent);
}

.woocommerce div.product .woocommerce-product-gallery__trigger {
	background-color: var(--skyline-surface);
	border: 1px solid var(--skyline-border);
	border-radius: 50%;
	box-shadow: var(--skyline-shadow);
	width: 44px;
	height: 44px;
	z-index: 10;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--skyline-accent);
	background: var(--skyline-surface);
}

.woocommerce .stock.in-stock { color: var(--skyline-success); font-weight: 600; }
.woocommerce .stock.out-of-stock { color: var(--skyline-error); font-weight: 600; }

/* UK delivery note, output by functions.php */
.skyline-delivery-note {
	margin-top: var(--skyline-space-md);
	padding: var(--skyline-space-sm) var(--skyline-space-md);
	background-color: var(--skyline-surface);
	border-left: 3px solid var(--skyline-accent);
	border-radius: var(--skyline-radius);
	color: var(--skyline-text-muted);
	font-size: var(--skyline-text-sm);
	clear: both;
}

.skyline-delivery-note strong {
	color: var(--skyline-text);
}

/* ==========================================================================
   9. WooCommerce — cart, checkout, notices
   ========================================================================== */

.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
	background-color: var(--skyline-surface);
	border: 1px solid var(--skyline-border);
	border-radius: var(--skyline-radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background-color: var(--skyline-bg);
	font-weight: 600;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	padding: var(--skyline-space-md);
	border-color: var(--skyline-border);
}

.woocommerce-checkout h3,
.woocommerce-cart h2 {
	padding-bottom: var(--skyline-space-sm);
	border-bottom: 2px solid var(--skyline-accent);
	display: inline-block;
}

.woocommerce form .form-row label {
	font-weight: 600;
	font-size: var(--skyline-text-sm);
	margin-bottom: var(--skyline-space-xs);
	display: block;
}

.woocommerce form .form-row .required {
	color: var(--skyline-error);
	text-decoration: none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single,
.wc-block-components-text-input input {
	background-color: var(--skyline-surface);
	border: 1px solid var(--skyline-border-strong);
	border-radius: var(--skyline-radius);
	padding: 0.75rem 0.875rem;
	min-height: 48px;
	font-size: 1rem; /* 16px floor — anything smaller triggers iOS zoom on focus */
	color: var(--skyline-text);
	width: 100%;
	transition: border-color var(--skyline-transition), box-shadow var(--skyline-transition);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--skyline-primary);
	box-shadow: 0 0 0 3px rgba(184, 135, 59, 0.25);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--skyline-error); }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--skyline-success); }

.woocommerce-checkout #payment {
	background-color: var(--skyline-surface);
	border: 1px solid var(--skyline-border);
	border-radius: var(--skyline-radius-lg);
	padding: var(--skyline-space-md);
}

.woocommerce-checkout #payment div.payment_box {
	background-color: var(--skyline-bg);
	border-radius: var(--skyline-radius);
	color: var(--skyline-text-muted);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--skyline-bg);
}

.woocommerce table.shop_table tfoot .order-total .amount {
	font-size: var(--skyline-text-xl);
	font-weight: 700;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: none;
	border-left: 4px solid var(--skyline-accent);
	border-radius: var(--skyline-radius);
	background-color: var(--skyline-surface);
	color: var(--skyline-text);
	box-shadow: var(--skyline-shadow);
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--skyline-accent-text); }

.woocommerce-error { border-left-color: var(--skyline-error); }
.woocommerce-error::before { color: var(--skyline-error); }

/* ==========================================================================
   10. Affiliate disclosure
   Readable, not fine print. If it looks like small print it is not doing
   its job.
   ========================================================================== */

.skyline-disclosure {
	margin: var(--skyline-space-lg) 0;
	padding: var(--skyline-space-md);
	font-size: var(--skyline-text-sm);
	line-height: 1.6;
	background-color: var(--skyline-surface);
	border: 1px solid var(--skyline-border);
	border-left: 4px solid var(--skyline-accent);
	border-radius: var(--skyline-radius);
}

.skyline-disclosure strong { color: var(--skyline-accent-text); }

/* ==========================================================================
   11. Footer
   ========================================================================== */

.skyline-site-footer {
	background-color: var(--skyline-primary);
	color: var(--skyline-text-invert);
	padding-block: var(--skyline-space-2xl) var(--skyline-space-lg);
	margin-top: var(--skyline-space-2xl);
}

.skyline-footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--skyline-space-xl);
	margin-bottom: var(--skyline-space-xl);
}

.skyline-site-footer h2,
.skyline-site-footer h3,
.skyline-site-footer .widget-title {
	color: var(--skyline-text-invert);
	font-size: var(--skyline-text-base);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--skyline-space-md);
}

.skyline-site-footer a {
	color: var(--skyline-text-invert);
	text-decoration: none;
	opacity: 0.85;
}

.skyline-site-footer a:hover {
	color: var(--skyline-accent);
	opacity: 1;
}

.skyline-site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.skyline-site-footer li {
	margin-bottom: var(--skyline-space-sm);
	font-size: var(--skyline-text-sm);
}

.skyline-footer-bottom {
	border-top: 1px solid var(--skyline-primary-soft);
	padding-top: var(--skyline-space-lg);
	display: flex;
	flex-wrap: wrap;
	gap: var(--skyline-space-md);
	justify-content: space-between;
	align-items: center;
	font-size: var(--skyline-text-xs);
	opacity: 0.85;
}

.skyline-footer-bottom p { margin: 0; }

/* ==========================================================================
   12. Blocks and alignment
   ========================================================================== */

.alignwide  { max-width: var(--skyline-container); }
.alignfull  { max-width: none; }
.alignleft  { float: left; margin-right: var(--skyline-space-lg); }
.alignright { float: right; margin-left: var(--skyline-space-lg); }
.aligncenter { margin-inline: auto; display: block; }

blockquote {
	border-left: 4px solid var(--skyline-accent);
	margin-left: 0;
	padding-left: var(--skyline-space-lg);
	color: var(--skyline-text-muted);
	font-style: italic;
}

table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table td,
.wp-block-table th {
	border: 1px solid var(--skyline-border);
	padding: var(--skyline-space-sm);
}

/* ==========================================================================
   13. Hero and animation (v2)
   ========================================================================== */

.skyline-site-main--flush {
	padding-block: 0;
}

.skyline-hero {
	position: relative;
	background-color: var(--skyline-primary);
	color: var(--skyline-text-invert);
	overflow: hidden;
	isolation: isolate;
}

.skyline-hero__art {
	position: absolute;
	inset: auto 0 0 0;
	z-index: -1;
	line-height: 0;
	opacity: 0.9;
}

.skyline-hero__art svg {
	width: 100%;
	height: auto;
	display: block;
}

.skyline-hero__inner {
	position: relative;
	padding-block: var(--skyline-space-2xl) 8rem;
	max-width: 780px;
	margin-inline: 0;
	padding-inline: var(--skyline-space-md);
}

@media (min-width: 1240px) {
	.skyline-hero__inner {
		padding-inline: calc((100vw - var(--skyline-container)) / 2 + var(--skyline-space-md));
		max-width: none;
	}
	.skyline-hero__title,
	.skyline-hero__lede {
		max-width: 720px;
	}
}

.skyline-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: var(--skyline-text-xs);
	font-weight: 700;
	color: var(--skyline-accent);
	margin-bottom: var(--skyline-space-sm);
}

.skyline-hero__title {
	color: var(--skyline-text-invert);
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.1;
	margin-bottom: var(--skyline-space-md);
}

.skyline-hero__lede {
	color: #C9D0D9;
	font-size: var(--skyline-text-lg);
	max-width: 60ch;
	margin-bottom: var(--skyline-space-lg);
}

.skyline-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--skyline-space-md);
}

/* Skyline artwork animation ------------------------------------------------ */

.sky-layer--far  { animation: skyline-drift 26s ease-in-out infinite alternate; }
.sky-layer--near { animation: skyline-drift 18s ease-in-out infinite alternate-reverse; }

@keyframes skyline-drift {
	from { transform: translateX(-10px); }
	to   { transform: translateX(10px); }
}

.sky-win { opacity: 0.25; }
.sky-win--a { animation: skyline-flicker 4.5s steps(1, end) infinite; }
.sky-win--b { animation: skyline-flicker 6.5s steps(1, end) infinite 1.2s; }
.sky-win--c { animation: skyline-flicker 5.5s steps(1, end) infinite 2.4s; }

@keyframes skyline-flicker {
	0%, 45%   { opacity: 0.25; }
	50%, 95%  { opacity: 1; }
	100%      { opacity: 0.25; }
}

/* Buttons used outside WooCommerce ---------------------------------------- */

.skyline-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--skyline-space-xs);
	min-height: 48px;
	padding: 0.8rem 1.6rem;
	border-radius: var(--skyline-radius);
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--skyline-transition), border-color var(--skyline-transition), transform var(--skyline-transition);
}

.skyline-btn--accent {
	background-color: var(--skyline-accent);
	color: var(--skyline-primary);
	border-color: var(--skyline-accent);
}

.skyline-btn--accent:hover {
	background-color: var(--skyline-accent-hover);
	border-color: var(--skyline-accent-hover);
	color: var(--skyline-primary);
	transform: translateY(-1px);
}

.skyline-btn--primary {
	background-color: var(--skyline-primary);
	color: var(--skyline-text-invert);
	border-color: var(--skyline-primary);
}

.skyline-btn--primary:hover {
	background-color: var(--skyline-primary-hover);
	color: var(--skyline-text-invert);
}

.skyline-btn--ghost {
	background-color: transparent;
	color: var(--skyline-text-invert);
	border-color: rgba(255, 255, 255, 0.45);
}

.skyline-btn--ghost:hover {
	border-color: var(--skyline-accent);
	color: var(--skyline-accent);
}

/* Scroll reveal ------------------------------------------------------------
   The hidden state only applies once JS has confirmed it can run. If the
   script is blocked the content simply shows — never blank. */

.skyline-has-reveal .skyline-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 520ms ease var(--skyline-delay, 0ms), transform 520ms ease var(--skyline-delay, 0ms);
}

.skyline-has-reveal .skyline-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.sky-layer--far,
	.sky-layer--near,
	.sky-win--a,
	.sky-win--b,
	.sky-win--c {
		animation: none !important;
	}
	.sky-win { opacity: 0.85; }
	.skyline-has-reveal .skyline-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ==========================================================================
   14. Sections, trust bar and cards (v2)
   ========================================================================== */

.skyline-section {
	padding-block: var(--skyline-space-2xl);
}

.skyline-section--alt {
	background-color: var(--skyline-surface);
	border-block: 1px solid var(--skyline-border);
}

.skyline-section__head {
	margin-bottom: var(--skyline-space-xl);
	max-width: 68ch;
}

.skyline-section__head h2 {
	margin-bottom: var(--skyline-space-sm);
}

.skyline-section__head p {
	color: var(--skyline-text-muted);
	margin: 0;
}

.skyline-container--narrow {
	max-width: var(--skyline-container-narrow);
}

/* Trust bar */
.skyline-trust {
	background-color: var(--skyline-surface);
	border-bottom: 1px solid var(--skyline-border);
	padding-block: var(--skyline-space-xl);
}

.skyline-trust__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--skyline-space-lg);
}

.skyline-trust__item {
	display: flex;
	gap: var(--skyline-space-md);
	align-items: flex-start;
}

.skyline-trust__icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
}

.skyline-trust__title {
	font-size: var(--skyline-text-base);
	margin-bottom: var(--skyline-space-xs);
}

.skyline-trust__text {
	color: var(--skyline-text-muted);
	font-size: var(--skyline-text-sm);
	margin: 0;
	line-height: 1.55;
}

/* Cards */
.skyline-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--skyline-space-lg);
}

.skyline-card {
	display: block;
	background-color: var(--skyline-surface);
	border: 1px solid var(--skyline-border);
	border-radius: var(--skyline-radius-lg);
	padding: var(--skyline-space-lg);
	text-decoration: none;
	color: var(--skyline-text);
	transition: border-color var(--skyline-transition), box-shadow var(--skyline-transition), transform var(--skyline-transition);
}

.skyline-section--alt .skyline-card {
	background-color: var(--skyline-bg);
}

a.skyline-card:hover {
	border-color: var(--skyline-accent);
	box-shadow: var(--skyline-shadow-lift);
	transform: translateY(-2px);
	color: var(--skyline-text);
}

.skyline-card__icon {
	display: inline-flex;
	margin-bottom: var(--skyline-space-md);
}

.skyline-card__icon img {
	width: 64px;
	height: 64px;
}

.skyline-card__title {
	font-size: var(--skyline-text-lg);
	margin-bottom: var(--skyline-space-sm);
}

.skyline-card__title a {
	color: var(--skyline-text);
	text-decoration: none;
}

.skyline-card__title a:hover {
	color: var(--skyline-accent-text);
}

.skyline-card__text {
	color: var(--skyline-text-muted);
	font-size: var(--skyline-text-sm);
	line-height: 1.6;
	margin-bottom: var(--skyline-space-md);
}

.skyline-card__cta {
	font-weight: 600;
	color: var(--skyline-accent-text);
	font-size: var(--skyline-text-sm);
}

.skyline-card--post {
	padding: 0;
	overflow: hidden;
}

.skyline-card--post .skyline-card__media {
	display: block;
	line-height: 0;
}

.skyline-card--post .skyline-card__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.skyline-card--post .skyline-card__title,
.skyline-card--post .skyline-card__text {
	padding-inline: var(--skyline-space-lg);
}

.skyline-card--post .skyline-card__title {
	margin-top: var(--skyline-space-lg);
}

.skyline-card--post .skyline-card__text {
	padding-bottom: var(--skyline-space-lg);
	margin-bottom: 0;
}

/* ==========================================================================
   15. Page furniture (v2)
   ========================================================================== */

.skyline-logo-mark {
	width: 44px;
	height: 44px;
	border-radius: 10px;
}

.skyline-breadcrumbs {
	font-size: var(--skyline-text-sm);
	color: var(--skyline-text-muted);
	margin-bottom: var(--skyline-space-sm);
}

.skyline-breadcrumbs a {
	color: var(--skyline-text-muted);
}

.skyline-breadcrumbs a:hover {
	color: var(--skyline-accent-text);
}

.skyline-page-header {
	margin-bottom: var(--skyline-space-lg);
}

.skyline-entry--page {
	padding: var(--skyline-space-xl);
}

.skyline-entry-content > * + * {
	margin-top: var(--skyline-space-md);
}

.skyline-entry-content h2 {
	margin-top: var(--skyline-space-xl);
}

.skyline-post-nav {
	display: flex;
	justify-content: space-between;
	gap: var(--skyline-space-md);
	margin-top: var(--skyline-space-lg);
	font-weight: 600;
}

.skyline-searchform {
	display: flex;
	gap: var(--skyline-space-sm);
	flex-wrap: wrap;
	margin-block: var(--skyline-space-md);
}

.skyline-searchform__input {
	flex: 1 1 240px;
	min-height: 48px;
	padding: 0.75rem 0.875rem;
	font-size: 1rem;
	border: 1px solid var(--skyline-border-strong);
	border-radius: var(--skyline-radius);
	background-color: var(--skyline-surface);
	color: var(--skyline-text);
}

.skyline-404 {
	text-align: center;
	padding-block: var(--skyline-space-2xl);
}

.skyline-404__code {
	font-size: 4.5rem;
	font-weight: 800;
	color: var(--skyline-accent);
	line-height: 1;
	margin: 0 0 var(--skyline-space-sm);
}

.skyline-404 .skyline-searchform {
	justify-content: center;
	max-width: 480px;
	margin-inline: auto;
}

/* ==========================================================================
   16. Page hero (interior pages)
   ========================================================================== */

.skyline-pagehero {
	background-color: var(--skyline-primary);
	color: var(--skyline-text-invert);
	padding-block: var(--skyline-space-2xl);
	position: relative;
	overflow: hidden;
}

.skyline-pagehero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: linear-gradient(90deg, var(--skyline-accent), transparent);
}

.skyline-pagehero--slim {
	padding-block: var(--skyline-space-xl);
}

.skyline-pagehero__title {
	color: var(--skyline-text-invert);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	margin-bottom: var(--skyline-space-sm);
}

.skyline-pagehero__lede {
	color: #C9D0D9;
	max-width: 62ch;
	margin: 0;
	font-size: var(--skyline-text-lg);
}

.skyline-pagehero__meta {
	color: #9AA5B2;
	font-size: var(--skyline-text-sm);
	margin: 0;
}

.skyline-pagehero .skyline-breadcrumbs,
.skyline-pagehero .skyline-breadcrumbs a {
	color: #9AA5B2;
}

.skyline-pagehero .skyline-breadcrumbs a:hover {
	color: var(--skyline-accent);
}

/* ==========================================================================
   17. Category navigation and blocks (shop page)
   ========================================================================== */

.skyline-catnav {
	background-color: var(--skyline-surface);
	border-bottom: 1px solid var(--skyline-border);
	position: sticky;
	top: 72px;
	z-index: 90;
}

.skyline-catnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--skyline-space-xs);
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.skyline-catnav__list a {
	display: inline-flex;
	align-items: center;
	gap: var(--skyline-space-sm);
	padding: var(--skyline-space-md) var(--skyline-space-md);
	text-decoration: none;
	color: var(--skyline-text);
	font-weight: 600;
	font-size: var(--skyline-text-sm);
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: border-color var(--skyline-transition), color var(--skyline-transition);
}

.skyline-catnav__list a:hover {
	border-bottom-color: var(--skyline-accent);
	color: var(--skyline-primary);
}

.skyline-catnav__list img {
	width: 28px;
	height: 28px;
}

/* Offset anchor targets so the sticky header does not cover the heading. */
.skyline-catblock {
	scroll-margin-top: 140px;
}

.skyline-catblock__head {
	display: flex;
	gap: var(--skyline-space-lg);
	align-items: flex-start;
	margin-bottom: var(--skyline-space-xl);
	padding-bottom: var(--skyline-space-md);
	border-bottom: 2px solid var(--skyline-accent);
}

.skyline-catblock__icon {
	width: 64px;
	height: 64px;
	flex: 0 0 64px;
}

.skyline-catblock__head h2 {
	margin-bottom: var(--skyline-space-xs);
}

.skyline-catblock__text {
	color: var(--skyline-text-muted);
	margin: 0;
	max-width: 62ch;
}

.skyline-catblock__body {
	display: grid;
	grid-template-columns: minmax(240px, 1fr) 2fr;
	gap: var(--skyline-space-xl);
	align-items: start;
}

@media (max-width: 860px) {
	.skyline-catblock__body {
		grid-template-columns: 1fr;
	}
	.skyline-catnav {
		position: static;
	}
}

.skyline-catblock__criteria {
	background-color: var(--skyline-surface);
	border: 1px solid var(--skyline-border);
	border-radius: var(--skyline-radius-lg);
	padding: var(--skyline-space-lg);
}

.skyline-section--alt .skyline-catblock__criteria {
	background-color: var(--skyline-bg);
}

.skyline-catblock__criteria h3 {
	font-size: var(--skyline-text-base);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--skyline-text-muted);
	margin-bottom: var(--skyline-space-md);
}

.skyline-catblock__criteria ul {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--skyline-space-lg);
}

.skyline-catblock__criteria li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: var(--skyline-space-sm);
	font-size: var(--skyline-text-sm);
	line-height: 1.55;
}

.skyline-catblock__criteria li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background-color: var(--skyline-accent);
}

.skyline-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--skyline-space-md);
	text-align: center;
	padding: var(--skyline-space-xl);
	border: 1px dashed var(--skyline-border-strong);
	border-radius: var(--skyline-radius-lg);
	color: var(--skyline-text-muted);
	min-height: 220px;
}

.skyline-empty img {
	width: 120px;
	height: 120px;
	opacity: 0.7;
}

.skyline-empty p {
	margin: 0;
	max-width: 42ch;
	font-size: var(--skyline-text-sm);
}

/* ==========================================================================
   18. Method steps (dark section)
   ========================================================================== */

.skyline-section--dark {
	background-color: var(--skyline-primary);
	color: var(--skyline-text-invert);
}

.skyline-section--dark h2,
.skyline-section--dark h3 {
	color: var(--skyline-text-invert);
}

.skyline-section--dark .skyline-section__head p {
	color: #C9D0D9;
}

.skyline-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--skyline-space-lg);
}

.skyline-step {
	border-top: 2px solid var(--skyline-primary-soft);
	padding-top: var(--skyline-space-md);
	transition: border-color var(--skyline-transition);
}

.skyline-step:hover {
	border-top-color: var(--skyline-accent);
}

.skyline-step__num {
	display: block;
	font-size: var(--skyline-text-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--skyline-accent);
	margin-bottom: var(--skyline-space-sm);
}

.skyline-step h3 {
	font-size: var(--skyline-text-lg);
	margin-bottom: var(--skyline-space-sm);
}

.skyline-step p {
	color: #C9D0D9;
	font-size: var(--skyline-text-sm);
	line-height: 1.6;
	margin: 0;
}

/* ==========================================================================
   19. Disclosure, Ad label and paid-link marker
   The Ad label is intentionally high-contrast. A disclosure styled to be
   overlooked is not a disclosure.
   ========================================================================== */

.skyline-disclosure {
	display: flex;
	gap: var(--skyline-space-md);
	align-items: flex-start;
	margin: var(--skyline-space-lg) 0;
	padding: var(--skyline-space-md);
	background-color: var(--skyline-surface);
	border: 1px solid var(--skyline-border);
	border-left: 4px solid var(--skyline-accent);
	border-radius: var(--skyline-radius);
	font-size: var(--skyline-text-sm);
	line-height: 1.6;
}

.skyline-ad-label {
	flex: 0 0 auto;
	background-color: var(--skyline-primary);
	color: var(--skyline-text-invert);
	font-weight: 700;
	font-size: var(--skyline-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3em 0.7em;
	border-radius: var(--skyline-radius);
}

.skyline-disclosure__body p {
	margin: 0;
}

.skyline-disclosure__amazon {
	margin-top: var(--skyline-space-sm) !important;
	color: var(--skyline-text-muted);
	font-style: italic;
}

.skyline-paid-link {
	font-size: 0.85em;
	color: var(--skyline-text-muted);
	margin-left: 0.35em;
	white-space: nowrap;
}

.skyline-footer-disclosure {
	border-top: 1px solid var(--skyline-primary-soft);
	margin-top: var(--skyline-space-lg);
	padding-top: var(--skyline-space-md);
	font-size: var(--skyline-text-sm);
	color: #C9D0D9;
}

.skyline-footer-disclosure strong {
	color: var(--skyline-text-invert);
}

/* ==========================================================================
   20. Legal pages, contents list
   ========================================================================== */

.skyline-toc {
	background-color: var(--skyline-surface);
	border: 1px solid var(--skyline-border);
	border-radius: var(--skyline-radius-lg);
	padding: var(--skyline-space-lg);
	margin-bottom: var(--skyline-space-xl);
}

.skyline-toc h2 {
	font-size: var(--skyline-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--skyline-text-muted);
	margin-bottom: var(--skyline-space-md);
}

.skyline-toc ol {
	margin: 0;
	padding-left: 1.25rem;
}

.skyline-toc li {
	margin-bottom: var(--skyline-space-xs);
	font-size: var(--skyline-text-sm);
}

.skyline-legal h2 {
	scroll-margin-top: 120px;
	padding-top: var(--skyline-space-md);
	border-top: 1px solid var(--skyline-border);
}

.skyline-legal h2:first-of-type {
	border-top: none;
}

/* Draft markers stand out so they cannot be published by accident. */
.skyline-legal strong:first-child,
.skyline-todo {
	color: var(--skyline-error);
}

.skyline-todo {
	font-size: var(--skyline-text-sm);
}

/* ==========================================================================
   21. Contact page and forms
   ========================================================================== */

.skyline-contact {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--skyline-space-xl);
	align-items: start;
}

@media (max-width: 860px) {
	.skyline-contact {
		grid-template-columns: 1fr;
	}
}

.skyline-contact__card {
	background-color: var(--skyline-surface);
	border: 1px solid var(--skyline-border);
	border-radius: var(--skyline-radius-lg);
	padding: var(--skyline-space-lg);
	margin-bottom: var(--skyline-space-lg);
}

.skyline-contact__card h2 {
	font-size: var(--skyline-text-lg);
	margin-bottom: var(--skyline-space-md);
}

.skyline-contact__card dt {
	font-weight: 700;
	font-size: var(--skyline-text-sm);
	margin-top: var(--skyline-space-md);
}

.skyline-contact__card dd {
	margin: var(--skyline-space-xs) 0 0;
	color: var(--skyline-text-muted);
	font-size: var(--skyline-text-sm);
}

.skyline-form {
	background-color: var(--skyline-surface);
	border: 1px solid var(--skyline-border);
	border-radius: var(--skyline-radius-lg);
	padding: var(--skyline-space-lg);
}

.skyline-form__row {
	margin-bottom: var(--skyline-space-md);
}

.skyline-form__row label {
	display: block;
	font-weight: 600;
	font-size: var(--skyline-text-sm);
	margin-bottom: var(--skyline-space-xs);
}

.skyline-form input[type="text"],
.skyline-form input[type="email"],
.skyline-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 0.875rem;
	font-size: 1rem;
	font-family: inherit;
	color: var(--skyline-text);
	background-color: var(--skyline-surface);
	border: 1px solid var(--skyline-border-strong);
	border-radius: var(--skyline-radius);
	transition: border-color var(--skyline-transition), box-shadow var(--skyline-transition);
}

.skyline-form input:focus,
.skyline-form textarea:focus {
	border-color: var(--skyline-primary);
	box-shadow: 0 0 0 3px rgba(184, 135, 59, 0.25);
}

.skyline-form__consent {
	display: block;
	margin-bottom: var(--skyline-space-lg);
	font-size: var(--skyline-text-sm);
	color: var(--skyline-text-muted);
}

.skyline-form__consent label {
	display: flex;
	gap: var(--skyline-space-sm);
	align-items: flex-start;
	line-height: 1.5;
}

.skyline-form__consent input {
	margin-top: 0.25em;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

/* Honeypot: removed from the accessibility tree and off-screen, not
   display:none — some bots skip hidden fields. */
.skyline-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skyline-formnotice {
	padding: var(--skyline-space-md);
	border-radius: var(--skyline-radius);
	margin-bottom: var(--skyline-space-lg);
	font-size: var(--skyline-text-sm);
}

.skyline-formnotice--ok {
	background-color: #E8F3ED;
	border-left: 4px solid var(--skyline-success);
	color: #145434;
}

.skyline-formnotice--bad {
	background-color: #FBEAE9;
	border-left: 4px solid var(--skyline-error);
	color: #7A1A15;
}

/* ==========================================================================
   22. Mobile navigation (v4)
   Previously the primary menu simply wrapped on a phone, pushing the header
   to half the screen. It is now a toggled panel below 1024px.
   ========================================================================== */

.skyline-navtoggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background-color: transparent;
	color: var(--skyline-text);
	border: 1px solid var(--skyline-border-strong);
	border-radius: var(--skyline-radius);
	cursor: pointer;
	transition: border-color var(--skyline-transition), background-color var(--skyline-transition);
}

.skyline-navtoggle:hover {
	border-color: var(--skyline-primary);
	background-color: var(--skyline-bg);
}

.skyline-nav--mobile {
	display: none;
	padding-bottom: var(--skyline-space-md);
}

.skyline-nav--mobile.is-open {
	display: block;
}

.skyline-nav--mobile ul {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.skyline-nav--mobile a {
	display: block;
	padding: var(--skyline-space-md);
	border-bottom: 1px solid var(--skyline-border);
	border-radius: var(--skyline-radius);
	font-size: var(--skyline-text-base);
}

.skyline-nav--mobile a:hover {
	background-color: var(--skyline-bg);
	border-bottom-color: var(--skyline-border);
}

body.skyline-nav-open {
	overflow: hidden;
}

@media (max-width: 1023px) {
	.skyline-nav--desktop {
		display: none;
	}
	.skyline-navtoggle {
		display: inline-flex;
	}
	.skyline-header-bar {
		justify-content: space-between;
		flex-wrap: nowrap;
	}
}

/* Header lifts once the page scrolls, so it separates from the content. */
.skyline-site-header.is-scrolled {
	box-shadow: var(--skyline-shadow-lift);
}

.skyline-branding__link {
	display: flex;
	align-items: center;
	gap: var(--skyline-space-sm);
	text-decoration: none;
}

.skyline-branding__link:hover .skyline-logo-mark {
	transform: scale(1.05);
}

.skyline-logo-mark {
	transition: transform var(--skyline-transition);
}

.skyline-branding__link .skyline-site-title {
	display: block;
	font-size: var(--skyline-text-lg);
	font-weight: 700;
	color: var(--skyline-primary);
	line-height: 1.2;
}

.skyline-branding__link .skyline-site-description {
	display: block;
	font-size: var(--skyline-text-xs);
	color: var(--skyline-text-muted);
}

/* ==========================================================================
   23. Card and media interactions (v4)
   Scale is deliberately small. Larger values reflow neighbouring text and
   read as cheap rather than polished.
   ========================================================================== */

.skyline-card-hover {
	transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.skyline-card-hover:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: var(--skyline-shadow-lift);
	border-color: var(--skyline-accent);
}

.skyline-media-zoom {
	display: block;
	overflow: hidden;
	line-height: 0;
}

.skyline-media-zoom img {
	transition: transform 500ms ease;
}

.skyline-card-hover:hover .skyline-media-zoom img,
.skyline-media-zoom:hover img {
	transform: scale(1.06);
}

.skyline-cards--3 {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.skyline-card__inner {
	padding: var(--skyline-space-lg);
}

.skyline-card__eyebrow {
	font-size: var(--skyline-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--skyline-text-muted);
	margin-bottom: var(--skyline-space-sm);
}

.skyline-card__meta {
	font-size: var(--skyline-text-xs);
	color: var(--skyline-text-muted);
	margin: var(--skyline-space-md) 0 0;
}

.skyline-card--post .skyline-card__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Active category in the shop quick-jump nav. */
.skyline-catnav__list a.is-active {
	border-bottom-color: var(--skyline-accent);
	color: var(--skyline-primary);
}

@media (prefers-reduced-motion: reduce) {
	.skyline-card-hover:hover {
		transform: none;
	}
	.skyline-card-hover:hover .skyline-media-zoom img,
	.skyline-media-zoom:hover img {
		transform: none;
	}
	.skyline-branding__link:hover .skyline-logo-mark {
		transform: none;
	}
}

/* Mobile header sizing.
   The tagline alongside a two-word site name wrapped to four lines at 390px,
   pushing the header to a third of the screen. Below the desktop breakpoint
   the tagline is dropped and the mark shrinks — the logo and name carry the
   branding on a phone, the tagline is not doing work there. */
@media (max-width: 1023px) {
	.skyline-branding__link .skyline-site-description {
		display: none;
	}

	.skyline-branding__link .skyline-site-title {
		font-size: var(--skyline-text-base);
		white-space: nowrap;
	}

	.skyline-logo-mark {
		width: 36px;
		height: 36px;
	}

	.skyline-header-bar {
		gap: var(--skyline-space-sm);
		min-height: 64px;
	}

	.skyline-cart-link {
		padding: var(--skyline-space-sm);
		font-size: var(--skyline-text-xs);
	}
}

@media (max-width: 420px) {
	.skyline-branding__link .skyline-site-title {
		font-size: var(--skyline-text-sm);
	}
}

/* ==========================================================================
   24. Figures and split sections (v5)
   ========================================================================== */

.skyline-figure {
	margin: 0;
	border-radius: var(--skyline-radius-lg);
	overflow: hidden;
	border: 1px solid var(--skyline-border);
	background-color: var(--skyline-surface);
	box-shadow: var(--skyline-shadow);
	line-height: 0;
}

.skyline-figure img {
	width: 100%;
	height: auto;
	display: block;
}

.skyline-split {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--skyline-space-2xl);
	align-items: center;
}

.skyline-split--reverse .skyline-split__text {
	order: 2;
}

.skyline-split--reverse .skyline-split__media {
	order: 1;
}

@media (max-width: 860px) {
	.skyline-split {
		grid-template-columns: 1fr;
		gap: var(--skyline-space-xl);
	}
	.skyline-split--reverse .skyline-split__text,
	.skyline-split--reverse .skyline-split__media {
		order: initial;
	}
}

.skyline-split__text h2 {
	margin-bottom: var(--skyline-space-md);
}

.skyline-section--dark .skyline-split__text p {
	color: #C9D0D9;
}

/* Tick list */
.skyline-ticklist {
	list-style: none;
	margin: var(--skyline-space-lg) 0 0;
	padding: 0;
}

.skyline-ticklist li {
	display: flex;
	gap: var(--skyline-space-md);
	align-items: flex-start;
	padding: var(--skyline-space-md) 0;
	border-bottom: 1px solid var(--skyline-primary-soft);
	line-height: 1.55;
}

.skyline-ticklist li:last-child {
	border-bottom: none;
}

.skyline-ticklist svg {
	flex: 0 0 20px;
	margin-top: 0.2em;
	color: var(--skyline-accent);
}

.skyline-section:not(.skyline-section--dark) .skyline-ticklist li {
	border-bottom-color: var(--skyline-border);
}

/* Cards with internal padding (About) */
.skyline-card--pad {
	padding: var(--skyline-space-lg);
}

.skyline-cards--2 {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Call-to-action strip */
.skyline-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--skyline-space-lg);
	align-items: center;
	justify-content: space-between;
	padding: var(--skyline-space-xl);
	background-color: var(--skyline-surface);
	border: 1px solid var(--skyline-border);
	border-left: 4px solid var(--skyline-accent);
	border-radius: var(--skyline-radius-lg);
	box-shadow: var(--skyline-shadow);
}

.skyline-cta h2 {
	margin-bottom: var(--skyline-space-sm);
	font-size: var(--skyline-text-xl);
}

.skyline-cta p {
	margin: 0;
	color: var(--skyline-text-muted);
	max-width: 62ch;
}

/* ==========================================================================
   25. Category banners (shop page, v5)
   ========================================================================== */

.skyline-catbanner {
	position: relative;
	border-radius: var(--skyline-radius-lg);
	overflow: hidden;
	margin-bottom: var(--skyline-space-xl);
	background-color: var(--skyline-primary);
	min-height: 200px;
	isolation: isolate;
}

/* Image and scrim are set inline in template-shop.php, for the same
   resilience reason as the homepage band. The scrim is not decorative: heading
   text sits over whatever photo the shop owner uploads, and without it the
   contrast depends entirely on that image. Because it is applied inline it
   travels with the markup and cannot be lost to a cached stylesheet. */

.skyline-catbanner {
	transition: transform 500ms ease, box-shadow 500ms ease;
}

.skyline-catbanner:hover {
	box-shadow: var(--skyline-shadow-lift);
}

.skyline-catbanner__overlay {
	position: relative;
	display: flex;
	gap: var(--skyline-space-lg);
	align-items: center;
	padding: var(--skyline-space-xl);
	color: var(--skyline-text-invert);
	min-height: 200px;
}

.skyline-catbanner__icon {
	width: 64px;
	height: 64px;
	flex: 0 0 64px;
	background-color: rgba(255, 255, 255, 0.94);
	border-radius: var(--skyline-radius);
	padding: 4px;
}

.skyline-catbanner__overlay h2 {
	color: var(--skyline-text-invert);
	margin-bottom: var(--skyline-space-xs);
}

.skyline-catbanner__text {
	color: #C9D0D9;
	margin: 0;
	max-width: 52ch;
}

@media (max-width: 600px) {
	.skyline-catbanner__overlay {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--skyline-space-lg);
	}
}

/* ==========================================================================
   26. Editorial band (front page, v5)
   ========================================================================== */

.skyline-band {
	position: relative;
	isolation: isolate;
	padding-block: var(--skyline-space-2xl);
	background-color: var(--skyline-primary);
	overflow: hidden;
}

/* The image and its scrim are set inline in front-page.php so a stale
   stylesheet cannot produce a full-size raw image. Nothing here is required
   for the band to render correctly — these rules only refine it. */

.skyline-band__inner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 340px;
}

.skyline-band__panel {
	max-width: 620px;
	color: var(--skyline-text-invert);
}

.skyline-band__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: var(--skyline-text-xs);
	font-weight: 700;
	color: var(--skyline-accent);
	margin-bottom: var(--skyline-space-sm);
}

.skyline-band__panel h2 {
	color: var(--skyline-text-invert);
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	margin-bottom: var(--skyline-space-md);
}

.skyline-band__panel p {
	color: #C9D0D9;
	margin-bottom: var(--skyline-space-lg);
}

/* ==========================================================================
   27. Reduced motion (v5 additions)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.skyline-catbanner:hover,
	.skyline-figure:hover img {
		transform: none;
		box-shadow: none;
	}
}

/* ==========================================================================
   28. Generated SVG artwork (v6)

   All decorative imagery is inline SVG drawn by inc/artwork.php. Because it
   lives in the DOM rather than behind background-image, the page's CSS can
   animate it — which is the whole reason it is inline.

   Layout does not depend on any of this: the wrappers carry inline
   positioning, so a missing stylesheet gives a plain dark panel, not a broken
   one. Everything below is enhancement.
   ========================================================================== */

.skyline-artlayer {
	pointer-events: none;
}

.skyline-art {
	display: block;
	width: 100%;
	height: 100%;
}

/* Drifting layers ---------------------------------------------------------
   Different speeds and directions give parallax depth. Movement is small
   (±12px) and slow — anything faster reads as a page fault rather than
   atmosphere. */

.skyline-art__far {
	animation: skyline-art-drift 34s ease-in-out infinite alternate;
}

.skyline-art__mid {
	animation: skyline-art-drift 26s ease-in-out infinite alternate-reverse;
}

.skyline-art__near {
	animation: skyline-art-drift-near 22s ease-in-out infinite alternate;
}

@keyframes skyline-art-drift {
	from { transform: translate3d(-12px, 0, 0); }
	to   { transform: translate3d(12px, 0, 0); }
}

@keyframes skyline-art-drift-near {
	from { transform: translate3d(10px, 0, 0); }
	to   { transform: translate3d(-10px, 0, 0); }
}

/* Window lights -----------------------------------------------------------
   steps(1, end) makes each light switch on and off rather than fade, which is
   what a lit window actually does. Three staggered timings stop the grid
   pulsing in unison. */

.skyline-art__win {
	opacity: 0.25;
}

.skyline-art__win--a { animation: skyline-art-flicker 5s   steps(1, end) infinite; }
.skyline-art__win--b { animation: skyline-art-flicker 7s   steps(1, end) infinite 1.4s; }
.skyline-art__win--c { animation: skyline-art-flicker 6.2s steps(1, end) infinite 2.8s; }

@keyframes skyline-art-flicker {
	0%, 44%   { opacity: 0.22; }
	50%, 94%  { opacity: 1; }
	100%      { opacity: 0.22; }
}

/* Motif-specific motion */

.skyline-art__pulse {
	transform-origin: center;
	animation: skyline-art-pulse 9s ease-in-out infinite;
}

.skyline-art__pulse--b {
	animation-duration: 12s;
	animation-delay: 1.5s;
}

@keyframes skyline-art-pulse {
	0%, 100% { opacity: 0.18; transform: scale(0.96); }
	50%      { opacity: 0.62; transform: scale(1.04); }
}

.skyline-art__moon {
	animation: skyline-art-breathe 14s ease-in-out infinite;
}

@keyframes skyline-art-breathe {
	0%, 100% { opacity: 0.7; }
	50%      { opacity: 1; }
}

.skyline-art__streak {
	animation: skyline-art-sheen 11s ease-in-out infinite;
}

@keyframes skyline-art-sheen {
	0%, 100% { opacity: 0.32; }
	50%      { opacity: 0.66; }
}

/* Card artwork ------------------------------------------------------------ */

.skyline-cardart .skyline-art {
	position: absolute;
	inset: 0;
}

.skyline-card-hover:hover .skyline-cardart .skyline-art {
	transform: scale(1.05);
}

.skyline-cardart .skyline-art {
	transition: transform 600ms ease;
}

/* Figures rendered as artwork rather than photographs */

.skyline-figure--art {
	line-height: 0;
	background-color: var(--skyline-primary);
	transition: transform 400ms ease, box-shadow 400ms ease;
}

.skyline-figure--art:hover {
	transform: translateY(-4px);
	box-shadow: var(--skyline-shadow-lift);
}

.skyline-figure--art .skyline-art {
	aspect-ratio: 10 / 7;
}

.skyline-contact__figure {
	margin-bottom: var(--skyline-space-lg);
}

/* Banner hover: lift the whole banner and nudge the artwork behind it. */

.skyline-catbanner .skyline-art {
	transition: transform 700ms ease;
}

.skyline-catbanner:hover .skyline-art {
	transform: scale(1.04);
}

.skyline-catbanner:hover {
	box-shadow: var(--skyline-shadow-lift);
}

.skyline-catbanner__overlay {
	position: relative;
	z-index: 1;
}

.skyline-band__inner {
	position: relative;
	z-index: 1;
}

/* Reduced motion: every generated animation stops, and the lights settle at
   full brightness so the artwork still reads as intended. */

@media (prefers-reduced-motion: reduce) {
	.skyline-art__far,
	.skyline-art__mid,
	.skyline-art__near,
	.skyline-art__win--a,
	.skyline-art__win--b,
	.skyline-art__win--c,
	.skyline-art__pulse,
	.skyline-art__moon,
	.skyline-art__streak {
		animation: none !important;
		transform: none !important;
	}

	.skyline-art__win { opacity: 0.9; }
	.skyline-art__pulse { opacity: 0.45; }

	.skyline-catbanner:hover .skyline-art,
	.skyline-card-hover:hover .skyline-cardart .skyline-art,
	.skyline-figure--art:hover {
		transform: none;
	}
}

/* ==========================================================================
   29. Branded empty state (v6.1)

   An empty category is a normal state on a new shop, not an error. It used to
   render as a grey "no image" box, which reads as broken rather than
   unfinished. It now uses the same dark artwork as everything else.
   ========================================================================== */

.skyline-emptyart {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: 260px;
	border-radius: var(--skyline-radius-lg);
	overflow: hidden;
	background-color: var(--skyline-primary);
	color: var(--skyline-text-invert);
}

.skyline-emptyart__art {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	overflow: hidden;
}

.skyline-emptyart__art .skyline-art {
	width: 100%;
	height: 100%;
}

/* Scrim so the message stays legible over any part of the artwork. */
.skyline-emptyart::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(28, 36, 48, 0.25) 0%, rgba(28, 36, 48, 0.9) 100%);
}

.skyline-emptyart__body {
	position: relative;
	padding: var(--skyline-space-lg);
	width: 100%;
}

.skyline-emptyart__badge {
	display: inline-block;
	margin-bottom: var(--skyline-space-sm);
	padding: 0.3em 0.7em;
	border-radius: var(--skyline-radius);
	background-color: var(--skyline-accent);
	color: var(--skyline-primary);
	font-size: var(--skyline-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.skyline-emptyart__body p {
	margin: 0;
	color: #C9D0D9;
	font-size: var(--skyline-text-sm);
	max-width: 46ch;
	line-height: 1.6;
}

/* Category archive pages */

.skyline-section--tight {
	padding-block: var(--skyline-space-lg);
}

.skyline-catbanner--tall .skyline-catbanner__overlay {
	min-height: 220px;
}

.skyline-catbanner--tall h1 {
	color: var(--skyline-text-invert);
	font-size: clamp(1.6rem, 3.5vw, 2.5rem);
	margin-bottom: var(--skyline-space-xs);
}

.skyline-catblock__criteria h2 {
	font-size: var(--skyline-text-base);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--skyline-text-muted);
	margin-bottom: var(--skyline-space-md);
}

@media (prefers-reduced-motion: reduce) {
	.skyline-emptyart .skyline-art * {
		animation: none !important;
		transform: none !important;
	}
}