/*
Theme Name: StorySaga
Theme URI: https://bikramkaji.com.np/storysaga
Author: Bikram
Author URI: https://bikramkaji.com.np/
Description: StorySaga is a modern, editorial portfolio theme. Every creator's work — projects, experience, skills, and achievements — is presented as chapters of their professional journey. Built as a classic, widget- and Customizer-driven WordPress theme with a refined typographic system, generous whitespace, and an accessible, keyboard-friendly navigation. Ideal for developers, designers, photographers, writers, and freelancers. Tagline: "Every portfolio has a story."
Requires at least: 5.9
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.0.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: storysaga
Tags: blog, portfolio, one-column, two-columns, custom-background, custom-header, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, threaded-comments, translation-ready, rtl-language-support

StorySaga WordPress Theme, (C) 2026 Bikram
StorySaga is distributed under the terms of the GNU GPL v2 or later.
*/

/* =========================================================================
   Table of Contents
   1.0  Reset & base
   2.0  Design tokens (custom properties)
   3.0  Typography
   4.0  Layout / containers
   5.0  Header
   6.0  Navigation (accessible disclosure pattern)
   7.0  Content: posts, pages, archives
   8.0  Chapters (project) styling
   9.0  Forms & buttons
   10.0 Widgets & footer
   11.0 Comments
   12.0 Utilities
   13.0 Accessibility
   14.0 Responsive
   15.0 Print
   ========================================================================= */

/* -------------------------------------------------------------------------
   1.0 Reset & base
   ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	/* Full-bleed bands are sized with 50vw margins, and vw units include the
	   scrollbar — so without this the page gains a horizontal scrollbar equal
	   to the scrollbar's own width. "clip" rather than "hidden": hidden on
	   html/body silently breaks position:sticky descendants. */
	overflow-x: clip;
}

body {
	margin: 0;
}

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

svg {
	max-width: 100%;
}

figure {
	margin: 0;
}

/* -------------------------------------------------------------------------
   2.0 Design tokens
   ---------------------------------------------------------------------- */

:root {
	/* Color: light (default) */
	--ss-paper: #faf7f2;
	--ss-surface: #efe9df;
	--ss-ink: #1c1b19;
	--ss-slate: #6b6560;
	--ss-sienna: #b0492d;
	--ss-bronze: #8a6d3b;

	/* Type */
	--ss-font-serif: Georgia, 'Iowan Old Style', 'Apple Garamond', Baskerville, 'Times New Roman', 'Droid Serif', Times, serif;
	--ss-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
	--ss-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

	/* Fluid type scale */
	--ss-text-small: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
	--ss-text-medium: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
	--ss-text-large: clamp(1.3125rem, 1.2rem + 0.55vw, 1.5rem);
	--ss-text-x-large: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
	--ss-text-xx-large: clamp(2.25rem, 1.8rem + 2.2vw, 3.25rem);
	--ss-text-huge: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);

	/* Heading sizes are routed through their own properties so that narrow
	   contexts (widget columns, cards, timeline rows) can re-map the scale
	   locally instead of every one of them needing its own font-size rule. */
	--ss-h1: var(--ss-text-huge);
	--ss-h2: var(--ss-text-xx-large);
	--ss-h3: var(--ss-text-x-large);
	--ss-h4: var(--ss-text-large);

	/* Spacing scale */
	--ss-space-2xs: 0.5rem;
	--ss-space-xs: 0.75rem;
	--ss-space-sm: 1rem;
	--ss-space-md: 1.5rem;
	--ss-space-lg: 2.25rem;
	--ss-space-xl: 3.25rem;
	--ss-space-2xl: 4.5rem;

	/* Layout */
	--ss-content-width: 720px;
	--ss-wide-width: 1280px;
	--ss-gutter: 1.5rem;
	--ss-radius: 2px;
}

/* Dark mode: respects the site owner's choice via body class, set from the
   Customizer (see inc/customizer.php). Not tied to OS preference, so the
   site owner has full control over their brand presentation. */
body.storysaga-dark {
	--ss-paper: #171614;
	--ss-surface: #221f1b;
	--ss-ink: #f3efe7;
	--ss-slate: #a69f94;
	--ss-sienna: #e08a62;
	--ss-bronze: #d9b45c;
}

/* -------------------------------------------------------------------------
   3.0 Typography
   ---------------------------------------------------------------------- */

body {
	font-family: var(--ss-font-sans);
	font-size: var(--ss-text-medium);
	line-height: 1.65;
	color: var(--ss-ink);
	background-color: var(--ss-paper);
}

h1, h2, h3, h4, h5, h6,
.storysaga-heading-font {
	font-family: var(--ss-font-serif);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ss-ink);
	margin: 0 0 0.75rem;
}

h1 { font-size: var(--ss-h1); }
h2 { font-size: var(--ss-h2); }
h3 { font-size: var(--ss-h3); }
h4 { font-size: var(--ss-h4); }
h5 { font-size: var(--ss-text-medium); }
h6 { font-size: var(--ss-text-small); text-transform: uppercase; letter-spacing: 0.06em; }

/* The hero pattern's headline is a semantic h2 — the page title is the sole h1,
   for SEO/accessibility — but it is the page's visual highlight, so it carries
   the h1 display size. Goes through --ss-h1 so any rescale of the h1 tier flows
   through; the base heading rule above still supplies the family/weight/leading. */
.storysaga-hero-heading {
	font-size: var(--ss-h1);
}

/* Narrow contexts: footer widget columns are minmax(220px, 1fr) and cards are
   roughly a third of the wide width, so the editorial scale is unusable in
   them. Re-mapping the properties keeps the hero untouched. */
.widget,
.widget-area,
.footer-widgets,
.storysaga-project-teaser,
.storysaga-timeline-row,
.is-style-chapter-card {
	--ss-h1: var(--ss-text-large);
	--ss-h2: var(--ss-text-large);
	--ss-h3: var(--ss-text-medium);
	--ss-h4: var(--ss-text-medium);
}

p {
	margin: 0 0 1.25rem;
}

a {
	color: var(--ss-sienna);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color 150ms ease;
}

a:hover,
a:focus {
	color: var(--ss-ink);
}

blockquote {
	margin: 1.5rem 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--ss-sienna);
	font-style: italic;
	color: var(--ss-ink);
}

blockquote cite {
	display: block;
	margin-top: 0.5rem;
	font-style: normal;
	font-size: var(--ss-text-small);
	color: var(--ss-slate);
}

.storysaga-pullquote {
	font-family: var(--ss-font-serif);
	font-size: var(--ss-text-x-large);
	font-style: italic;
	line-height: 1.35;
	text-align: center;
	border-top: 1px solid var(--ss-ink);
	border-bottom: 1px solid var(--ss-ink);
	padding: 1.5rem 0;
	margin: 2rem 0;
}

code, pre, kbd {
	font-family: var(--ss-font-mono);
	font-size: var(--ss-text-small);
	background-color: var(--ss-surface);
	color: var(--ss-ink);
}

pre {
	padding: 1rem;
	overflow-x: auto;
	border-radius: var(--ss-radius);
}

hr {
	border: none;
	border-top: 1px solid var(--ss-slate);
	opacity: 0.25;
	margin: 2rem 0;
}

hr.storysaga-mark {
	width: 48px;
	height: 3px;
	border: none;
	background-color: var(--ss-sienna);
	opacity: 1;
	margin: 2rem auto;
}

/* -------------------------------------------------------------------------
   4.0 Layout / containers
   ---------------------------------------------------------------------- */

.storysaga-container {
	max-width: var(--ss-content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ss-gutter);
	padding-right: var(--ss-gutter);
}

.storysaga-container-wide {
	max-width: var(--ss-wide-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ss-gutter);
	padding-right: var(--ss-gutter);
}

.storysaga-section {
	padding-top: var(--ss-space-xl);
	padding-bottom: var(--ss-space-xl);
}

.storysaga-eyebrow {
	display: block;
	font-size: var(--ss-text-small);
	color: var(--ss-sienna);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.5rem;
}

.storysaga-content-column {
	min-width: 0;
}

.storysaga-main-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ss-space-xl);
	max-width: var(--ss-wide-width);
	margin: 0 auto;
	padding: var(--ss-space-lg) var(--ss-gutter);
}

.storysaga-has-sidebar .storysaga-main-layout {
	grid-template-columns: minmax(0, 1fr) 300px;
	align-items: start;
}

/* -------------------------------------------------------------------------
   5.0 Header
   ---------------------------------------------------------------------- */

.site-header {
	background-color: var(--ss-paper);
	padding: 1.75rem var(--ss-gutter);
	border-bottom: 1px solid rgba(107, 101, 96, 0.2);
}

.site-header-inner {
	max-width: var(--ss-wide-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.custom-logo-link img {
	display: block;
	max-height: 44px;
	width: auto;
}

.site-branding-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.site-title {
	font-family: var(--ss-font-serif);
	font-size: var(--ss-text-large);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
	line-height: 1.1;
}

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

.site-description {
	font-family: var(--ss-font-sans);
	font-size: var(--ss-text-small);
	font-style: italic;
	color: var(--ss-slate);
	margin: 0;
}

.storysaga-header-image {
	line-height: 0;
}

.storysaga-header-image img {
	width: 100%;
	height: auto;
	max-height: 500px;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
   6.0 Navigation — WAI-ARIA Disclosure pattern for submenus.
   No role="menu"/role="menuitem", no aria-haspopup: this is a plain
   <ul><li><a> tree with a <button aria-expanded> toggle, matching the
   W3C APG's own reference implementation for nested site navigation.
   ---------------------------------------------------------------------- */

.main-navigation {
	font-family: var(--ss-font-sans);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 2rem;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: inline-block;
	padding: 0.5rem 0.75rem;
	font-size: var(--ss-text-small);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ss-ink);
	text-decoration: none;
	position: relative;
	transition: color 200ms ease, background-color 200ms ease;
	border-radius: 4px;
}

.main-navigation a::after {
	content: '';
	position: absolute;
	bottom: 0.25rem;
	inset-inline-start: 0.75rem;
	width: 0;
	height: 2px;
	background-color: var(--ss-sienna);
	transition: width 200ms ease;
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: var(--ss-sienna);
	background-color: rgba(176, 73, 45, 0.05);
}

.main-navigation a:hover::after,
.main-navigation a:focus::after {
	width: calc(100% - 1.5rem);
}

.main-navigation .current-menu-item > a {
	color: var(--ss-sienna);
	background-color: rgba(176, 73, 45, 0.08);
	font-weight: 600;
}

.main-navigation .current-menu-item > a::after {
	width: calc(100% - 1.5rem);
}

.main-navigation .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 220px;
	background-color: var(--ss-paper);
	border: 1px solid rgba(107, 101, 96, 0.15);
	border-radius: 6px;
	padding: 0.5rem 0;
	flex-direction: column;
	gap: 0;
	z-index: 40;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	margin-top: 0.5rem;
	transition: opacity 150ms ease, visibility 150ms ease;
	opacity: 0;
	visibility: hidden;
}

.main-navigation .sub-menu li {
	width: 100%;
}

.main-navigation .sub-menu a {
	display: block;
	padding: 0.75rem 1.25rem;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	font-size: var(--ss-text-medium);
	transition: background-color 150ms ease, color 150ms ease;
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus {
	background-color: rgba(176, 73, 45, 0.1);
	color: var(--ss-sienna);
}

.main-navigation li.menu-item-has-children {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.storysaga-submenu-toggle {
	background: none;
	border: none;
	padding: 0.25rem;
	margin-left: 0.25rem;
	cursor: pointer;
	color: var(--ss-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.storysaga-submenu-toggle svg {
	width: 10px;
	height: 10px;
	transition: transform 150ms ease;
}

.storysaga-submenu-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.main-navigation li.menu-item-has-children.toggled > .sub-menu,
.main-navigation li.menu-item-has-children.storysaga-focus > .sub-menu {
	display: flex;
	opacity: 1;
	visibility: visible;
}

/* Mobile menu toggle button */
.menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--ss-ink);
	border-radius: var(--ss-radius);
	padding: 0.5rem 0.75rem;
	font-size: var(--ss-text-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ss-ink);
	cursor: pointer;
}

.menu-toggle[aria-expanded="true"] {
	background-color: var(--ss-ink);
	color: var(--ss-paper);
}

/* -------------------------------------------------------------------------
   7.0 Content: posts, pages, archives
   ---------------------------------------------------------------------- */

.site-main {
	min-width: 0;
}

article.storysaga-article {
	margin-bottom: var(--ss-space-xl);
}

.entry-header {
	margin-bottom: var(--ss-space-md);
}

.entry-title {
	margin-bottom: 0.5rem;
	overflow-wrap: break-word;
	hyphens: auto;
	word-break: break-word;
}

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

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	font-size: var(--ss-text-small);
	color: var(--ss-slate);
	align-items: center;
}

.entry-meta a {
	color: var(--ss-slate);
}

.entry-meta .storysaga-category-link {
	color: var(--ss-sienna);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--ss-text-small);
}

.entry-thumbnail {
	margin-bottom: var(--ss-space-md);
	border-radius: var(--ss-radius);
	overflow: hidden;
}

.entry-thumbnail img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.entry-content {
	max-width: var(--ss-content-width);
	margin-inline: auto;
}

.entry-content > * + * {
	margin-top: 1.25rem;
}

.entry-content ul,
.entry-content ol {
	/* Logical, so the marker indent follows the text direction under RTL —
	   the theme ships no rtl.css to correct a physical padding-left. */
	padding-inline-start: 1.5rem;
}

/* Wide/full escapes out of the content column.
   Symmetric negative margins on BOTH inline sides with width:auto make the
   element (parent + 2 x (50vw - 50%)) = exactly 100vw, centred — rather than
   the one-sided margin-left, which left-shifts the block on viewports wider
   than the cap. margin-inline keeps it correct under RTL. */
.entry-content .alignwide {
	width: auto;
	max-width: none;
	margin-inline: max(
		calc(50% - 50vw + var(--ss-gutter)),
		calc(50% - var(--ss-wide-width) / 2)
	);
}

.entry-content .alignfull {
	width: auto;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.page-links {
	clear: both;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
}

.entry-footer {
	margin-top: var(--ss-space-md);
	padding-top: var(--ss-space-sm);
	border-top: 1px solid rgba(107, 101, 96, 0.2);
	font-size: var(--ss-text-small);
	color: var(--ss-slate);
}

/* Post navigation (prev/next) */
.post-navigation,
.storysaga-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: var(--ss-space-md) 0;
	border-top: 1px solid rgba(107, 101, 96, 0.2);
	flex-wrap: wrap;
}

.post-navigation .nav-subtitle,
.storysaga-post-nav .nav-subtitle {
	display: block;
	font-size: var(--ss-text-small);
	color: var(--ss-slate);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.25rem;
}

.post-navigation a,
.storysaga-post-nav a {
	text-decoration: none;
	color: var(--ss-ink);
	font-family: var(--ss-font-serif);
}

.nav-next { text-align: end; }

/* Pagination */
.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin: 2rem 0;
	padding: 1.5rem;
	background-color: var(--ss-surface);
	border-radius: 8px;
	border: 1px solid rgba(107, 101, 96, 0.1);
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.5rem;
	font-size: var(--ss-text-small);
	font-weight: 500;
	text-decoration: none;
	color: var(--ss-ink);
	background-color: var(--ss-paper);
	border: 1.5px solid rgba(107, 101, 96, 0.2);
	border-radius: 6px;
	transition: all 200ms ease;
	cursor: pointer;
}

.page-numbers:hover:not(.dots) {
	background-color: var(--ss-sienna);
	color: var(--ss-paper);
	border-color: var(--ss-sienna);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(176, 73, 45, 0.2);
}

.page-numbers.current {
	background-color: var(--ss-sienna);
	color: var(--ss-paper);
	border-color: var(--ss-sienna);
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(176, 73, 45, 0.15);
}

.page-numbers.dots {
	border: none;
	background-color: transparent;
	color: var(--ss-slate);
	cursor: default;
	font-weight: 600;
	padding: 0 0.25rem;
}

.prev.page-numbers,
.next.page-numbers {
	padding: 0 1rem;
}

/* Archive / blog grid */
.storysaga-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--ss-space-lg) var(--ss-space-md);
}

.storysaga-post-grid .storysaga-article {
	margin-bottom: 0;
}

.page-header {
	margin-bottom: var(--ss-space-lg);
	clear: both;
}

.page-header .page-title {
	margin-bottom: 0.5rem;
	overflow-wrap: break-word;
	hyphens: auto;
	word-break: break-word;
}

.archive-description {
	color: var(--ss-slate);
}

/* Front page: hero */
.storysaga-hero-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--ss-space-xl);
	align-items: center;
}

.storysaga-hero-copy h1 {
	margin-top: 0.25rem;
}

.storysaga-hero-intro {
	font-size: var(--ss-text-large);
	color: var(--ss-slate);
	max-width: 46ch;
}

.storysaga-hero-intro p:last-child {
	margin-bottom: 1.5rem;
}

.storysaga-hero-image {
	position: relative;
}

.storysaga-hero-image::before {
	content: "";
	position: absolute;
	top: -1rem;
	inset-inline-end: -1rem;
	width: 100%;
	height: 100%;
	border: 2px solid var(--ss-sienna);
	border-radius: var(--ss-radius);
	z-index: 0;
}

.storysaga-hero-image img {
	position: relative;
	z-index: 1;
	border-radius: var(--ss-radius);
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
}

@media (max-width: 600px) {
	.storysaga-hero-image::before {
		display: none;
	}
}

@media (max-width: 1024px) {
	.storysaga-hero-grid {
		grid-template-columns: 1fr;
	}
}

/* Front page: featured chapters */
.storysaga-section-heading-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: var(--ss-space-lg);
}

.storysaga-view-all {
	font-size: var(--ss-text-small);
	white-space: nowrap;
}

.storysaga-project-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ss-space-lg) var(--ss-space-md);
}

.storysaga-project-teaser h3 {
	font-size: var(--ss-text-large);
	margin-top: 1rem;
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.storysaga-project-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.storysaga-project-grid {
		grid-template-columns: 1fr;
	}
}

/* Front page: widget-driven extra sections */
.storysaga-front-widget {
	border-top: 1px solid rgba(107, 101, 96, 0.2);
}

/* Front page: CTA band */
.storysaga-cta {
	background-color: var(--ss-ink);
	color: var(--ss-paper);
	padding: var(--ss-space-2xl) var(--ss-gutter);
	text-align: center;
}

.storysaga-cta .storysaga-container {
	max-width: 640px;
}

.storysaga-cta h2,
.storysaga-cta p {
	color: var(--ss-paper);
}

.storysaga-cta .button,
.storysaga-cta .wp-block-button__link {
	background-color: var(--ss-paper);
	color: var(--ss-ink);
	margin-top: 0.5rem;
}

.storysaga-cta .button:hover,
.storysaga-cta .wp-block-button__link:hover {
	background-color: var(--ss-sienna);
	color: var(--ss-paper);
}

/* -------------------------------------------------------------------------
   8.0 Chapters (project) styling
   ---------------------------------------------------------------------- */

.storysaga-chapter-label {
	display: inline-block;
	font-size: var(--ss-text-small);
	color: var(--ss-sienna);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.75rem;
}

.storysaga-project-card {
	display: block;
	overflow: hidden;
	border-radius: var(--ss-radius);
}

.storysaga-project-card img {
	/* Cards sit in a row, so normalise the crop — otherwise differently
	   proportioned uploads leave the headings beneath them misaligned. */
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 300ms ease;
}

.storysaga-project-card:hover img,
.storysaga-project-card:focus-within img {
	transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
	.storysaga-project-card img,
	.storysaga-submenu-toggle svg,
	.button,
	a {
		transition: none !important;
	}
	.storysaga-project-card:hover img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   9.0 Forms & buttons
   ---------------------------------------------------------------------- */

.button,
button:not(.storysaga-submenu-toggle):not(.menu-toggle),
input[type="submit"],
input[type="button"],
.wp-block-button__link {
	display: inline-block;
	background-color: var(--ss-ink);
	color: var(--ss-paper);
	border: none;
	border-radius: var(--ss-radius);
	padding: 0.9rem 1.75rem;
	font-family: var(--ss-font-sans);
	font-size: var(--ss-text-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover {
	background-color: var(--ss-sienna);
	color: var(--ss-paper);
	transform: translateY(-1px);
}

.button-outline {
	background-color: transparent;
	color: var(--ss-ink);
	border: 2px solid var(--ss-ink);
	padding: calc(0.9rem - 2px) calc(1.75rem - 2px);
}

.button-outline:hover {
	background-color: var(--ss-ink);
	color: var(--ss-paper);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: 0.75rem 1rem;
	font-family: var(--ss-font-sans);
	font-size: var(--ss-text-medium);
	color: var(--ss-ink);
	background-color: var(--ss-paper);
	border: 1px solid var(--ss-slate);
	border-radius: var(--ss-radius);
}

input:focus,
textarea:focus,
select:focus {
	outline: 2px solid var(--ss-sienna);
	outline-offset: 1px;
}

.search-form {
	display: flex;
	gap: 0.5rem;
}

.search-form input[type="search"] {
	flex: 1;
}

/* -------------------------------------------------------------------------
   10.0 Widgets & footer
   ---------------------------------------------------------------------- */

.widget {
	margin-bottom: var(--ss-space-lg);
}

/* Blog sidebar container (index, archives, single posts). */
.widget-area {
	font-size: var(--ss-text-small);
}

.widget-area .widget:last-child {
	margin-bottom: 0;
}

.widget-area a {
	text-decoration: none;
}

.widget-area a:hover,
.widget-area a:focus {
	text-decoration: underline;
}

.widget-title {
	font-size: var(--ss-text-small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 1rem;
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget li {
	margin-bottom: 0.5rem;
}

.site-footer {
	background-color: var(--ss-paper);
	border-top: 1px solid rgba(107, 101, 96, 0.2);
	padding: var(--ss-space-xl) var(--ss-gutter) var(--ss-space-md);
}

.site-footer-inner {
	max-width: var(--ss-wide-width);
	margin: 0 auto;
}

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

.site-info {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: var(--ss-text-small);
	color: var(--ss-slate);
	text-align: center;
	padding-top: var(--ss-space-md);
	border-top: 1px solid rgba(107, 101, 96, 0.2);
}

/* Footer navigation + social row (footer.php). The menu sits to the left and
   the social icons to the right on a shared centre line; on narrow screens the
   row wraps to a single left-aligned column. Without these rules wp_nav_menu()
   falls back to a browser-default bulleted, indented list. */
.storysaga-footer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ss-space-md);
	margin-bottom: var(--ss-space-md);
}

.storysaga-footer-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--ss-text-small);
}

.storysaga-footer-menu a {
	color: var(--ss-slate);
	text-decoration: none;
}

.storysaga-footer-menu a:hover,
.storysaga-footer-menu a:focus {
	color: var(--ss-sienna);
	text-decoration: underline;
}

.storysaga-social-links {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.storysaga-social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--ss-surface);
	color: var(--ss-ink);
}

.storysaga-social-links svg {
	width: 16px;
	height: 16px;
}

/* -------------------------------------------------------------------------
   11.0 Comments
   ---------------------------------------------------------------------- */

.comments-area {
	margin-top: var(--ss-space-xl);
	padding-top: var(--ss-space-lg);
	border-top: 1px solid rgba(107, 101, 96, 0.2);
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .children {
	list-style: none;
	margin: 0 0 0 2rem;
	padding: 0;
}

.comment-body {
	/* Default HTML5 comment markup nests the avatar inside .comment-meta, so
	   flexing .comment-body would spread meta / content / reply across a row.
	   Instead, float the avatar into a left gutter and let everything stack. */
	position: relative;
	padding-left: 56px; /* 40px avatar + 16px gap */
	margin-bottom: var(--ss-space-md);
}

.comment-author .avatar {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	display: block;
}

.comment-body .reply {
	margin-top: 0.5rem;
}

.comment-meta {
	font-size: var(--ss-text-small);
	color: var(--ss-slate);
	margin-bottom: 0.25rem;
}

.comment-content p:last-child {
	margin-bottom: 0;
}

.comment-reply-link {
	font-size: var(--ss-text-small);
}

/* -------------------------------------------------------------------------
   12.0 Utilities
   ---------------------------------------------------------------------- */

.storysaga-text-center { text-align: center; }
.storysaga-text-slate { color: var(--ss-slate); }
.storysaga-text-sienna { color: var(--ss-sienna); }

/* 404 template helpers. */
.storysaga-404-search {
	max-width: 480px;
	margin-inline: auto;
}

.storysaga-404-home {
	margin-top: 1.5rem;
}

/* Core WordPress alignment classes — used by the_content() and the media
   library regardless of theme, so every theme is expected to style these. */
.alignleft {
	float: left;
	margin: 0.4rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.4rem 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	clear: both;
}

.alignnone {
	margin: 0.4rem 0 1.5rem;
}

/* Core caption shortcode / caption block output. */
.wp-caption {
	max-width: 100%;
	margin-bottom: 1.5rem;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0;
}

.wp-caption .wp-caption-text {
	margin: 0.5rem 0 0;
}

.wp-caption-text {
	font-size: var(--ss-text-small);
	color: var(--ss-slate);
	text-align: center;
}

/* Core gallery shortcode/block caption. */
.gallery-caption {
	display: block;
	font-size: var(--ss-text-small);
	color: var(--ss-slate);
	margin-top: 0.5rem;
}

/* Sticky posts. */
.sticky {
	position: relative;
}

article.sticky .entry-title::before {
	content: "\2605";
	display: inline-block;
	margin-right: 0.5rem;
	color: var(--ss-sienna);
	font-size: 0.75em;
	vertical-align: middle;
}

/* Highlights the current author's other comments on a thread. */
.bypostauthor {
	position: relative;
}

.bypostauthor > .comment-body {
	border-left: 2px solid var(--ss-sienna);
	padding-left: 1rem;
}

/* -------------------------------------------------------------------------
   Block editor content styles (used regardless of classic vs FSE — the
   block editor is WordPress's content editor for posts/pages in any theme)
   ---------------------------------------------------------------------- */

.is-style-chapter-card {
	background-color: var(--ss-surface);
	border-radius: var(--ss-radius);
	padding: var(--ss-space-md);
}

hr.is-style-chapter-mark {
	width: 48px;
	height: 3px;
	border: none;
	background-color: var(--ss-sienna);
	opacity: 1;
	margin-left: auto;
	margin-right: auto;
}

.is-style-story-aside {
	border-left: none;
	padding-left: 0;
	font-style: italic;
	color: var(--ss-slate);
	text-align: center;
}

.is-style-chapter-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--ss-ink);
	border: 2px solid var(--ss-ink);
}

.is-style-chapter-outline .wp-block-button__link:hover {
	background-color: var(--ss-ink);
	color: var(--ss-paper);
}

.wp-block-group.is-layout-flex,
.wp-block-columns {
	flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   Pattern-specific utility classes (see inc/patterns.php)
   ---------------------------------------------------------------------- */

/* Section bands. Each section pattern is an align:full outer band (so its
   background can span the viewport) wrapping this inner constrained section
   (so its content stays centred at the wide width). */
.storysaga-pattern-section {
	max-width: var(--ss-wide-width);
	margin-inline: auto;
	padding-inline: var(--ss-gutter);
	padding-block: clamp(3.25rem, 2rem + 4vw, 5.5rem);
}

.storysaga-band-paper {
	background-color: var(--ss-paper);
}

/* .storysaga-services-band is the pre-band class name, kept as a surface alias
   so copies of the Services pattern inserted before the band system existed
   keep their background. */
.storysaga-band-surface,
.storysaga-services-band {
	background-color: var(--ss-surface);
}

/* Patterns are inserted individually and can be ordered freely, so two bands
   of the same tone can end up adjacent. The tone change can't act as the
   separator there, so draw a seam instead. */
.storysaga-band-paper + .storysaga-band-paper,
.storysaga-band-surface + .storysaga-band-surface {
	border-top: 1px solid rgba(107, 101, 96, 0.18);
}

/* Legacy content. Pattern markup is copied into the post at insertion time, so
   sections inserted before the band restructure have no align:full wrapper and
   sit directly in the 720px content column — where a 1280px design is crushed
   to about half its width. In the band structure the section is a child of
   .storysaga-band, never of .entry-content, so this child selector matches only
   the pre-band markup: it makes the section itself the full-bleed band and
   re-centres its content with padding instead of max-width. */
.entry-content > .storysaga-pattern-section {
	width: auto;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	padding-inline: max(
		var(--ss-gutter),
		calc(50vw - var(--ss-wide-width) / 2)
	);
}

/* Prose set across the full 1280px is unreadable — hold it to a measure.
   Centred sections keep their centring. */
.storysaga-pattern-section > p {
	max-width: 68ch;
}

.storysaga-pattern-section.storysaga-text-center > p {
	margin-inline: auto;
}

/* Consistent section opening: eyebrow tight to its heading, heading spaced
   from the body that follows. */
.storysaga-pattern-section > .storysaga-eyebrow {
	margin-bottom: 0.35rem;
}

.storysaga-pattern-section > h2 {
	margin-bottom: var(--ss-space-md);
}

/* These sections declare border-top-color/width via WordPress's border
   support but deliberately omit an explicit "style" in the block JSON
   (matching what save() actually generates — no inline border-style at
   all). Browsers default border-style to "none" without one, so it's
   set here via CSS instead of inline, to keep the border visible without
   introducing an inline property save() wouldn't produce. The legacy selector
   covers pre-band sections, which still carry that hairline in saved content and
   have no band tone to separate them. */
.storysaga-timeline-row[style*="border-top-color"],
.entry-content > .storysaga-pattern-section[style*="border-top-color"] {
	border-top-style: solid;
}

.storysaga-gap-lg {
	gap: var(--ss-space-lg);
}

.storysaga-gap-md {
	gap: var(--ss-space-md);
}

.storysaga-gap-sm {
	gap: var(--ss-space-sm);
}

.storysaga-gap-xl {
	gap: var(--ss-space-xl);
}

.storysaga-chapter-number {
	font-family: var(--ss-font-serif);
	font-size: var(--ss-text-xx-large);
	line-height: 1;
	color: var(--ss-slate);
	opacity: 0.4;
	margin-bottom: 0.5rem;
}

.storysaga-skill-heading {
	font-size: var(--ss-text-small) !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.storysaga-timeline-row {
	align-items: flex-start;
	gap: 1rem;
}

/* -------------------------------------------------------------------------
   13.0 Accessibility
   ---------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Reveal screen-reader-only text when it receives keyboard focus. */
.screen-reader-text:focus {
	background-color: #faf7f2;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #1c1b19;
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	height: auto;
	inset-inline-start: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Skip link: self-contained pair with explicit colors (not only custom
   properties, which could shift under dark mode) and position:fixed so it
   can't get trapped behind the sticky header's stacking context. */
.skip-link {
	position: fixed;
	top: -100px;
	inset-inline-start: 0;
	z-index: 100000;
	background-color: #1c1b19;
	color: #faf7f2;
	padding: 1rem 1.5rem;
	font-family: sans-serif;
	font-size: 0.9rem;
	text-decoration: none;
}

.skip-link:focus {
	clip: auto !important;
	clip-path: none;
	display: block;
	position: fixed !important;
	top: 0;
	background-color: var(--ss-ink);
	color: var(--ss-paper);
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.wp-block-button__link:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   14.0 Responsive
   Breakpoints: mobile ≤767px (default), tablet 768–1024px, desktop 1200px+
   ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	.menu-toggle {
		display: inline-block;
	}

	/* Mobile header: branding on the left, menu toggle on the right (via
	   .site-header-inner's space-between). The open menu is taken out of flow
	   and dropped as a full-width panel below the bar. It is anchored to
	   .site-header — made the positioning context here — so top:100% clears the
	   whole bar (padding + bottom border) and inset-inline:0 spans its full
	   width. The panel's own padding-inline then lines the items up under the
	   branding, which sits in .site-header's matching padding. */
	.site-header {
		position: relative;
	}

	/* Qualified with the ancestor + element type so it matches the specificity
	   of ".main-navigation ul { display: flex }" above; a media query adds no
	   specificity, so a bare ".primary-menu-list" would lose to it and the menu
	   could never collapse. */
	.main-navigation ul.primary-menu-list {
		display: none;
		position: absolute;
		top: 100%;
		inset-inline: 0;
		z-index: 50;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: auto;
		padding: 0.25rem var(--ss-gutter) 1rem;
		background-color: var(--ss-paper);
		border-bottom: 1px solid rgba(107, 101, 96, 0.2);
		box-shadow: 0 10px 20px rgba(28, 27, 25, 0.08);
	}

	.main-navigation ul.primary-menu-list.toggled {
		display: flex;
	}

	.main-navigation ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}

	.main-navigation li {
		width: 100%;
		border-top: 1px solid rgba(107, 101, 96, 0.15);
	}

	.main-navigation .sub-menu {
		position: static;
		border: none;
		padding-left: 1rem;
		min-width: 0;
	}

	.storysaga-has-sidebar .storysaga-main-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.storysaga-post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* -------------------------------------------------------------------------
   15.0 Print
   ---------------------------------------------------------------------- */

@media print {
	.site-header,
	.site-footer,
	.main-navigation,
	.menu-toggle,
	.comments-area {
		display: none;
	}
}