/*
Theme Name: StoryCraft
Theme URI: https://bikramkaji.com.np/storycraft
Author: Bikram
Author URI: https://bikramkaji.com.np/
Description: Every business has a story worth crafting. StoryCraft is a warm, editorial theme for agencies and small studios, with a numbered services grid, team and testimonial patterns, a client logo wall, and a guarded WooCommerce layer that stays completely inert until you install WooCommerce. Built for classic WordPress, with a light and dark palette, accent colour picker, and full keyboard/screen-reader support.
Requires at least: 5.9
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: storycraft
Tags: blog, e-commerce, portfolio, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, threaded-comments, translation-ready, wide-blocks, block-patterns

StoryCraft WordPress Theme, Copyright 2026 Bikram
StoryCraft is distributed under the terms of the GNU General Public License v2 or later.

StoryCraft is based on Underscores https://underscores.me/, (C) 2012-2026 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* =============================================================
   0. Design tokens
   ============================================================= */
:root {
	/* Light palette */
	--sc-paper: #faf8f4;
	--sc-surface: #efeae1;
	--sc-ink: #1b1e1d;
	--sc-slate: #5c625f;
	--sc-accent: #1f6f68;
	--sc-accent-2: #c26b3d;
	--sc-accent-rgb: 31, 111, 104;

	/* Borders / shadow */
	--sc-border: color-mix(in srgb, var(--sc-ink) 12%, transparent);
	--sc-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05);

	/* Spacing scale */
	--sc-space-3xs: 0.25rem;
	--sc-space-2xs: 0.5rem;
	--sc-space-xs: 0.75rem;
	--sc-space-sm: 1rem;
	--sc-space-md: 1.5rem;
	--sc-space-lg: 2.5rem;
	--sc-space-xl: 4rem;
	--sc-space-2xl: 6rem;
	--sc-space-3xl: 9rem;

	/* Fluid type scale */
	--sc-step--1: clamp(0.83rem, 0.8rem + 0.14vw, 0.9rem);
	--sc-step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--sc-step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
	--sc-step-2: clamp(1.44rem, 1.32rem + 0.58vw, 1.75rem);
	--sc-step-3: clamp(1.73rem, 1.54rem + 0.93vw, 2.2rem);
	--sc-step-4: clamp(2.07rem, 1.8rem + 1.37vw, 2.75rem);
	--sc-step-5: clamp(2.49rem, 2.08rem + 2.04vw, 3.5rem);

	/* Layout */
	--sc-content-width: 56rem;
	--sc-wide-width: 66rem;
	--sc-full-width: 90rem;
	--sc-radius: 0.4rem;

	/* Fonts — system stacks only, no bundled webfonts */
	--sc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	--sc-font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	/* Decoupled from --sc-font-sans so a typography preset (see section 13,
	   inc/typography.php) can swap just the heading face. Defaults to the
	   same stack as body text, so this is a no-op until a preset is chosen. */
	--sc-font-heading: var(--sc-font-sans);

	color-scheme: light;
}

body.storycraft-dark {
	--sc-paper: #141613;
	--sc-surface: #1e211d;
	--sc-ink: #f1efe8;
	--sc-slate: #9aa19b;
	--sc-accent: #5bbdb2;
	--sc-accent-2: #e0925f;
	--sc-accent-rgb: 91, 189, 178;
	--sc-border: color-mix(in srgb, var(--sc-ink) 14%, transparent);
	--sc-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
	color-scheme: dark;
}

/* Accent colour override from the Customizer is injected inline by
   storycraft_accent_color_css() in inc/template-functions.php and simply
   redefines --sc-accent on :root, so it inherits everywhere below. */

/* =============================================================
   1. Reset / base
   ============================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background-color: var(--sc-paper);
	color: var(--sc-ink);
	font-family: var(--sc-font-sans);
	font-size: var(--sc-step-0);
	line-height: 1.6;
	transition: background-color 0.2s ease, color 0.2s ease;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

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

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

svg {
	fill: currentColor;
}

/* =============================================================
   2. Typography — sans headings, serif reserved for quotes/accents
   ============================================================= */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--sc-font-heading);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin-block: var(--sc-space-lg) var(--sc-space-sm);
}

h1 { font-size: var(--sc-step-5); }
h2 { font-size: var(--sc-step-4); }
h3 { font-size: var(--sc-step-3); }
h4 { font-size: var(--sc-step-2); }
h5 { font-size: var(--sc-step-1); }
h6 { font-size: var(--sc-step-0); text-transform: uppercase; letter-spacing: 0.06em; }

p { margin-block: 0 var(--sc-space-sm); }

a {
	color: var(--sc-accent);
	text-decoration-thickness: from-font;
	text-underline-offset: 0.15em;
}

a:hover,
a:focus {
	text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--sc-accent);
	outline-offset: 2px;
}

blockquote,
.storycraft-quote {
	font-family: var(--sc-font-serif);
	font-style: italic;
	font-size: var(--sc-step-2);
	line-height: 1.5;
	border-inline-start: 3px solid var(--sc-accent-2);
	margin-inline: 0;
	padding-inline-start: var(--sc-space-md);
	color: var(--sc-ink);
}

.storycraft-decorative-numeral {
	font-family: var(--sc-font-serif);
	font-style: italic;
	color: var(--sc-accent-2);
	font-size: var(--sc-step-4);
	line-height: 1;
}

code, pre, kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	background: var(--sc-surface);
	border-radius: var(--sc-radius);
}

pre { padding: var(--sc-space-sm); overflow-x: auto; }
code { padding: 0.1em 0.35em; }

/* =============================================================
   3. Skip link
   ============================================================= */
.storycraft-skip-link {
	position: fixed;
	inset-block-start: -100px;
	inset-inline-start: var(--sc-space-sm);
	z-index: 100000;
	background: #1b1e1d;
	color: #faf8f4;
	padding: 0.75em 1.25em;
	border-radius: var(--sc-radius);
	font-weight: 700;
	transition: inset-block-start 0.15s ease;
}

.storycraft-skip-link:focus {
	inset-block-start: var(--sc-space-sm);
}

/* =============================================================
   4. Layout / band system
   ============================================================= */
.storycraft-band {
	inline-size: 100%;
	padding-block: var(--sc-space-2xl);
}

.storycraft-band-paper { background-color: var(--sc-paper); }
.storycraft-band-surface { background-color: var(--sc-surface); }

/* Adjacent same-tone seam rule: when two bands of the same tone touch,
   collapse the shared edge to a hairline instead of doubling the padding. */
.storycraft-band-paper + .storycraft-band-paper,
.storycraft-band-surface + .storycraft-band-surface {
	border-block-start: 1px solid var(--sc-border);
	padding-block-start: calc(var(--sc-space-2xl) - 1px);
}

.storycraft-pattern-section {
	max-inline-size: var(--sc-wide-width);
	margin-inline: auto;
	padding-inline: var(--sc-space-md);
}

.storycraft-content-width {
	max-inline-size: var(--sc-content-width);
	margin-inline: auto;
	padding-inline: var(--sc-space-md);
}

.alignwide { max-inline-size: var(--sc-wide-width); margin-inline: auto; }

.alignfull {
	inline-size: 100vw;
	margin-inline-start: calc(50% - 50vw);
	margin-inline-end: calc(50% - 50vw);
	max-inline-size: none;
}

.alignfull > .storycraft-pattern-section,
.alignfull > .storycraft-content-width {
	padding-inline: var(--sc-space-md);
}

@media (min-width: 782px) {
	.storycraft-pattern-section,
	.storycraft-content-width {
		padding-inline: var(--sc-space-lg);
	}
}

/* =============================================================
   5. Site header / navigation
   ============================================================= */
.storycraft-site-header {
	padding-block: var(--sc-space-sm);
	border-block-end: 1px solid var(--sc-border);
}

.storycraft-header-inner {
	max-inline-size: var(--sc-wide-width);
	margin-inline: auto;
	padding-inline: var(--sc-space-md);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sc-space-sm);
}

.storycraft-site-branding .site-title {
	font-size: var(--sc-step-2);
	margin: 0;
}

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

.storycraft-site-branding .site-description {
	margin: 0;
	color: var(--sc-slate);
	font-size: var(--sc-step--1);
}

.storycraft-primary-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-sm);
	align-items: center;
}

.storycraft-primary-navigation .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	flex-direction: column;
	background: var(--sc-paper);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	box-shadow: var(--sc-shadow);
	padding: var(--sc-space-2xs);
	min-inline-size: 12rem;
	display: none;
	z-index: 20;
}

/* A submenu nested inside another submenu (3rd level and deeper) flies out
   to the side of its own parent item, instead of inheriting top-level's
   "open below" position and stacking inside the same dropdown column. */
.storycraft-primary-navigation .sub-menu .sub-menu {
	inset-block-start: calc(-1 * var(--sc-space-2xs));
	inset-inline-start: 100%;
}

.storycraft-primary-navigation li {
	position: relative;
}

.storycraft-primary-navigation .sub-menu.storycraft-submenu-open {
	display: flex;
}

.storycraft-primary-navigation a {
	color: var(--sc-ink);
	text-decoration: none;
	padding: 0.35em 0.15em;
}

.storycraft-primary-navigation a:hover,
.storycraft-primary-navigation .current-menu-item > a {
	color: var(--sc-accent);
}

.storycraft-submenu-toggle {
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	padding: 0.25em;
	line-height: 0;
}

.storycraft-submenu-toggle svg {
	inline-size: 0.7em;
	block-size: 0.7em;
	transition: transform 0.15s ease;
}

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

.storycraft-menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	padding: 0.5em 0.75em;
	cursor: pointer;
	color: var(--sc-ink);
}

@media (max-width: 781px) {
	.storycraft-menu-toggle { display: inline-flex; align-items: center; gap: 0.4em; }
	.storycraft-primary-navigation { flex-basis: 100%; display: none; }
	.storycraft-primary-navigation.storycraft-nav-open {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		background-color: var(--sc-paper);
		overflow-y: auto;
		padding: var(--sc-space-lg) var(--sc-space-md);
	}
	.storycraft-primary-navigation ul { flex-direction: column; align-items: flex-start; }
	.storycraft-primary-navigation .sub-menu { position: static; box-shadow: none; border: none; padding-inline-start: var(--sc-space-sm); }
	.storycraft-primary-navigation.storycraft-nav-open > ul { margin-block-start: var(--sc-space-lg); }
	.storycraft-primary-navigation.storycraft-nav-open a { font-size: var(--sc-step-1); }
	.storycraft-header-inner { flex-wrap: wrap; }
}

.storycraft-menu-close {
	display: none;
	background: none;
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	padding: 0.5em;
	cursor: pointer;
	color: var(--sc-ink);
	line-height: 0;
}

.storycraft-primary-navigation.storycraft-nav-open .storycraft-menu-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset-block-start: var(--sc-space-md);
	inset-inline-end: var(--sc-space-md);
}

body.storycraft-scroll-lock {
	overflow: hidden;
}

/* =============================================================
   6. Buttons / forms
   ============================================================= */
.storycraft-button,
button,
input[type="submit"],
input[type="button"] {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background-color: var(--sc-ink);
	color: var(--sc-paper);
	border: 1px solid var(--sc-ink);
	border-radius: var(--sc-radius);
	padding: 0.7em 1.4em;
	font-weight: 700;
	font-size: var(--sc-step--1);
	letter-spacing: -0.01em;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.storycraft-button:hover,
button:hover {
	opacity: 0.88;
}

@media (prefers-reduced-motion: no-preference) {
	.storycraft-button:hover { transform: translateY(-1px); }
}

.storycraft-button-outline {
	background-color: transparent;
	color: var(--sc-ink);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
textarea,
select {
	width: 100%;
	background: var(--sc-paper);
	color: var(--sc-ink);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	padding: 0.65em 0.9em;
	font-family: inherit;
	font-size: var(--sc-step--1);
}

label {
	display: block;
	font-weight: 600;
	margin-block-end: var(--sc-space-3xs);
}

.storycraft-search-form,
.comment-form {
	display: grid;
	gap: var(--sc-space-sm);
}

/* =============================================================
   7. Agency components
   ============================================================= */

/* Numbered services grid */
.storycraft-services-grid {
	display: grid;
	gap: var(--sc-space-lg);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin-block-start: var(--sc-space-lg);
}

.storycraft-service-number {
	font-family: var(--sc-font-serif);
	font-style: italic;
	color: var(--sc-accent-2);
	font-size: var(--sc-step-3);
	line-height: 1;
	display: block;
	margin-block-end: var(--sc-space-2xs);
}

.storycraft-service h3 { margin-block-start: 0; }

/* Team grid */
.storycraft-team-grid {
	display: grid;
	gap: var(--sc-space-md);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	margin-block-start: var(--sc-space-lg);
}

.wp-block-group.storycraft-team-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wp-block-columns.storycraft-team-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sc-space-md);
	margin-block-start: var(--sc-space-lg);
}

.wp-block-columns.storycraft-team-grid > .wp-block-column {
	min-inline-size: 0;
	width: auto;
	flex-basis: auto !important;
}

.storycraft-team-member {
	background: var(--sc-paper);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	overflow: hidden;
}

.storycraft-team-member img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.storycraft-team-member-body { padding: var(--sc-space-sm); }

.storycraft-team-member-role {
	color: var(--sc-slate);
	font-size: var(--sc-step--1);
	margin-block-end: var(--sc-space-2xs);
}

/* Testimonials */
.storycraft-testimonials-grid {
	display: grid;
	gap: var(--sc-space-md);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	margin-block-start: var(--sc-space-lg);
}

.storycraft-testimonial-card {
	background: var(--sc-paper);
	border-radius: var(--sc-radius);
	box-shadow: var(--sc-shadow);
	padding: var(--sc-space-md);
}

.storycraft-testimonial-card blockquote {
	border: none;
	padding: 0;
	margin: 0 0 var(--sc-space-sm);
	font-size: var(--sc-step-1);
}

.storycraft-testimonial-attribution { font-weight: 700; font-family: var(--sc-font-sans); font-style: normal; }
.storycraft-testimonial-role { color: var(--sc-slate); font-size: var(--sc-step--1); }

/* Clients / logo wall */
.storycraft-clients-wall {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sc-space-lg);
	margin-block-start: var(--sc-space-lg);
}

.storycraft-clients-wall img {
	max-inline-size: 8rem;
	filter: grayscale(1);
	opacity: 0.7;
}

.wp-block-columns.storycraft-clients-wall {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sc-space-lg);
	align-items: center;
	margin-block-start: var(--sc-space-lg);
}

.wp-block-columns.storycraft-clients-wall > .wp-block-column,
.wp-block-columns.storycraft-stats-row > .wp-block-column {
	min-inline-size: 0;
	width: auto;
	flex-basis: auto !important;
}

@media (prefers-reduced-motion: no-preference) {
	.storycraft-clients-wall img { transition: filter 0.2s ease, opacity 0.2s ease; }
	.storycraft-clients-wall img:hover,
	.storycraft-clients-wall img:focus {
		filter: grayscale(0);
		opacity: 1;
	}
}

/* Stats row */
.storycraft-stats-row {
	display: grid;
	gap: var(--sc-space-md);
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	text-align: center;
	margin-block-start: var(--sc-space-lg);
}

.wp-block-group.storycraft-stats-row {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wp-block-columns.storycraft-stats-row {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sc-space-md);
	margin-block-start: var(--sc-space-lg);
}

@media (max-width: 480px) {
	.wp-block-group.storycraft-stats-row,
	.wp-block-columns.storycraft-stats-row {
		grid-template-columns: 1fr;
	}
}

.storycraft-stat-number {
	font-family: var(--sc-font-serif);
	font-style: italic;
	color: var(--sc-accent-2);
	font-size: var(--sc-step-5);
	line-height: 1;
	display: block;
}

.storycraft-stat-label { color: var(--sc-slate); font-size: var(--sc-step--1); }

/* Case study / post cards */
.storycraft-card {
	background: var(--sc-paper);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.storycraft-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.storycraft-card-body { padding: var(--sc-space-sm); }

.storycraft-grid {
	display: grid;
	gap: var(--sc-space-md);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	margin-block-start: var(--sc-space-lg);
}

.storycraft-featured-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wp-block-columns.storycraft-featured-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sc-space-md);
	margin-block-start: var(--sc-space-lg);
}

.wp-block-columns.storycraft-featured-grid > .wp-block-column {
	min-inline-size: 0;
	width: auto;
	flex-basis: auto !important;
}

/* CTA band */
.storycraft-cta-band {
	background-color: var(--sc-ink);
	color: var(--sc-paper);
}

.storycraft-cta-band a.storycraft-button {
	background-color: var(--sc-paper);
	color: var(--sc-ink);
	border-color: var(--sc-paper);
}

.storycraft-cta-band h2 { color: inherit; }

/* =============================================================
   8. Comments
   ============================================================= */
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .children { list-style: none; padding-inline-start: var(--sc-space-md); }
.comment-body { border-block-start: 1px solid var(--sc-border); padding-block: var(--sc-space-sm); }
.comment-metadata { color: var(--sc-slate); font-size: var(--sc-step--1); }

/* =============================================================
   9. Footer
   ============================================================= */
.storycraft-site-footer {
	background: var(--sc-surface);
	border-block-start: 1px solid var(--sc-border);
	padding-block: var(--sc-space-xl);
	margin-block-start: var(--sc-space-2xl);
}

.storycraft-footer-widgets {
	display: grid;
	gap: var(--sc-space-md);
	max-inline-size: var(--sc-wide-width);
	margin-inline: auto;
	padding-inline: var(--sc-space-md);
}

/*
 * Fixed column counts, not auto-fit: auto-fit computes however many
 * tracks satisfy the minmax() basis for the available width, so 2/3/4
 * frequently rendered the same number of columns regardless of the
 * Customizer choice. repeat(N, 1fr) actually gives N columns, with the
 * breakpoints below collapsing that on narrower screens.
 */
.storycraft-footer-widgets.storycraft-footer-columns-2 { grid-template-columns: repeat(2, 1fr); }
.storycraft-footer-widgets.storycraft-footer-columns-3 { grid-template-columns: repeat(3, 1fr); }
.storycraft-footer-widgets.storycraft-footer-columns-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 782px) {
	.storycraft-footer-widgets.storycraft-footer-columns-3,
	.storycraft-footer-widgets.storycraft-footer-columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.storycraft-footer-widgets {
		grid-template-columns: 1fr !important;
	}
}

.storycraft-footer-bottom {
	max-inline-size: var(--sc-wide-width);
	margin-inline: auto;
	padding-inline: var(--sc-space-md);
	margin-block-start: var(--sc-space-lg);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sc-space-sm);
	color: var(--sc-slate);
	font-size: var(--sc-step--1);
}

.storycraft-social-links { display: flex; gap: var(--sc-space-sm); list-style: none; margin: 0; padding: 0; }
.storycraft-social-links a { color: var(--sc-ink); }
.storycraft-social-links svg { inline-size: 1.1em; block-size: 1.1em; }

.storycraft-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-sm) var(--sc-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.storycraft-footer-menu a:hover,
.storycraft-footer-menu a:focus {
	color: var(--sc-accent);
	text-decoration: underline;
}

/* =============================================================
   10. Screen-reader utility
   ============================================================= */
.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;
}

.screen-reader-text:focus {
	background-color: var(--sc-paper);
	border-radius: var(--sc-radius);
	box-shadow: var(--sc-shadow);
	clip: auto !important;
	clip-path: none;
	color: var(--sc-ink);
	display: block;
	height: auto;
	inset-inline-start: var(--sc-space-sm);
	inset-block-start: var(--sc-space-sm);
	padding: var(--sc-space-2xs) var(--sc-space-sm);
	text-decoration: none;
	width: auto;
	z-index: 100000;
}

.alignleft { float: left; margin-inline-end: var(--sc-space-sm); }
.alignright { float: right; margin-inline-start: var(--sc-space-sm); }
.aligncenter { display: block; margin-inline: auto; }

/* =============================================================
   11. Custom block styles
   ============================================================= */
.wp-block-group.is-style-craft-card {
	background: var(--sc-paper);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	box-shadow: var(--sc-shadow);
	padding: var(--sc-space-md);
}

.wp-block-separator.is-style-section-mark {
	border: none;
	border-block-start: 3px solid var(--sc-accent-2);
	max-inline-size: 4rem;
	margin-inline: 0;
}

.wp-block-quote.is-style-highlight-quote {
	font-family: var(--sc-font-serif);
	font-style: italic;
	border-inline-start: 3px solid var(--sc-accent-2);
	padding-inline-start: var(--sc-space-md);
	font-size: var(--sc-step-2);
}

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

/* =============================================================
   11. Elementor compatibility
   ============================================================= */

/* Elementor's built-in "Full Width" page template, and any page/post whose
   content was authored in Elementor's editor: drop the theme's normal
   46rem reading-width cap so Elementor's own section/container width
   controls are in charge, edge to edge, instead of being squeezed into a
   narrow column. Elementor's editor is completely unaffected if unused —
   this selector only ever matches when Elementor itself put it there. */
.storycraft-elementor-content {
	max-inline-size: none;
	padding-inline: 0;
}

/* Elementor renders its own widget markup inside .elementor element, so
   theme heading/link styles should yield to whatever the user sets per
   widget rather than forcing StoryCraft's letter-spacing/weight on text
   authored entirely inside the page builder. */
.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6 {
	letter-spacing: normal;
}

/* =============================================================
   12. Beautification pass — page headers, meta, links, pagination,
       cards, images, tables, widgets, misc polish
   ============================================================= */

/* Slightly richer shadow scale, layered instead of flat */
:root {
	--sc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--sc-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.06), 0 10px 24px rgba(0, 0, 0, 0.05);
	--sc-shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.07), 0 20px 40px rgba(0, 0, 0, 0.08);
}

body.storycraft-dark {
	--sc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
	--sc-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.32), 0 10px 24px rgba(0, 0, 0, 0.3);
	--sc-shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.35), 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Balance heading line-wraps where supported; harmless no-op elsewhere */
h1, h2, h3, .storycraft-cta-band h2 {
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

/* Page headers (archive / search / 404 / case-studies) */
.page-header {
	margin-block-end: var(--sc-space-lg);
	padding-block-end: var(--sc-space-md);
	border-block-end: 1px solid var(--sc-border);
}

.page-header .page-title {
	margin-block-start: 0;
}

.archive-description {
	color: var(--sc-slate);
	max-inline-size: 42rem;
	font-size: var(--sc-step-1);
	margin-block-start: var(--sc-space-2xs);
}

.page-header .page-title span {
	color: var(--sc-accent);
	font-style: normal;
}

/* Entry meta */
.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 0.9em;
	color: var(--sc-slate);
	font-size: var(--sc-step--1);
	margin-block: var(--sc-space-3xs) var(--sc-space-xs);
}

.entry-meta a {
	color: var(--sc-slate);
	text-decoration: none;
	border-block-end: 1px solid transparent;
}

.entry-meta a:hover {
	color: var(--sc-accent);
	border-block-end-color: currentColor;
}

.entry-footer {
	color: var(--sc-slate);
	font-size: var(--sc-step--1);
	margin-block-start: var(--sc-space-sm);
	padding-block-start: var(--sc-space-sm);
	border-block-start: 1px solid var(--sc-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 0.9em;
}

.entry-footer a {
	color: var(--sc-slate);
}

.entry-footer a:hover {
	color: var(--sc-accent);
}

.page-links { clear: both; margin-top: 1.25rem; margin-bottom: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.cat-links a::after {
	content: ",";
	margin-inline-end: 0.3em;
}

.cat-links a:last-child::after {
	content: "";
}

/* "Read more" link with a small directional nudge on hover */
.storycraft-read-more a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-weight: 700;
	text-decoration: none;
	color: var(--sc-accent);
}

.storycraft-read-more a::after {
	content: "\2192";
	display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
	.storycraft-read-more a::after { transition: transform 0.15s ease; }
	.storycraft-read-more a:hover::after,
	.storycraft-read-more a:focus-visible::after { transform: translateX(3px); }
}

/* Cards: consistent lift + border tone shift on hover, guarded */
.storycraft-card {
	box-shadow: var(--sc-shadow-sm);
}

.storycraft-card img {
	transition: none;
}

@media (prefers-reduced-motion: no-preference) {
	.storycraft-card {
		transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	}

	.storycraft-card:hover,
	.storycraft-card:focus-within {
		transform: translateY(-3px);
		box-shadow: var(--sc-shadow-md);
		border-color: color-mix(in srgb, var(--sc-accent) 35%, var(--sc-border));
	}

	.storycraft-card img {
		transition: transform 0.3s ease;
	}

	.storycraft-card:hover img,
	.storycraft-card:focus-within img {
		transform: scale(1.03);
	}
}

.storycraft-card {
	overflow: hidden; /* keeps the image-zoom hover contained to the card's radius */
}

.storycraft-card .storycraft-card-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.storycraft-card .entry-summary {
	flex-grow: 1;
}

.storycraft-testimonial-card,
.storycraft-team-member {
	box-shadow: var(--sc-shadow-sm);
}

@media (prefers-reduced-motion: no-preference) {
	.storycraft-testimonial-card,
	.storycraft-team-member {
		transition: box-shadow 0.18s ease, transform 0.18s ease;
	}

	.storycraft-testimonial-card:hover,
	.storycraft-team-member:hover {
		box-shadow: var(--sc-shadow-md);
		transform: translateY(-2px);
	}
}

/* Pagination — core the_posts_pagination() / the_comments_pagination() markup */
.pagination,
.comments-pagination,
.post-navigation {
	margin-block-start: var(--sc-space-xl);
}

.pagination .nav-links,
.comments-pagination.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sc-space-2xs);
	list-style: none;
	padding: 0;
}

.pagination .page-numbers,
.comments-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.25em;
	min-block-size: 2.25em;
	padding-inline: 0.5em;
	border-radius: var(--sc-radius);
	border: 1px solid var(--sc-border);
	color: var(--sc-ink);
	text-decoration: none;
	font-size: var(--sc-step--1);
	font-weight: 600;
}

.pagination .page-numbers.current,
.comments-pagination .page-numbers.current {
	background: var(--sc-ink);
	border-color: var(--sc-ink);
	color: var(--sc-paper);
}

.pagination .page-numbers.dots {
	border: none;
	background: none;
}

.pagination a.page-numbers:hover,
.comments-pagination a.page-numbers:hover {
	border-color: var(--sc-accent);
	color: var(--sc-accent);
}

/* post-navigation (single post prev/next) */
.post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sc-space-md);
}

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

.post-navigation a {
	display: block;
	text-decoration: none;
	padding: var(--sc-space-sm);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	color: var(--sc-ink);
	font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
	.post-navigation a { transition: border-color 0.15s ease, background-color 0.15s ease; }
}

.post-navigation a:hover {
	border-color: var(--sc-accent);
	background-color: var(--sc-surface);
}

@media (max-width: 600px) {
	.post-navigation .nav-links { grid-template-columns: 1fr; }
	.post-navigation .nav-next { text-align: start; }
}

/* Comments */
.comments-title { margin-block-start: 0; }

.comment-list .avatar {
	border-radius: 50%;
	float: inline-start;
	margin-inline-end: var(--sc-space-sm);
}

.comment-author {
	font-weight: 700;
	font-style: normal;
}

.comment-reply-link {
	font-size: var(--sc-step--1);
	font-weight: 700;
}

.bypostauthor > .comment-body {
	border-inline-start: 3px solid var(--sc-accent-2);
	padding-inline-start: var(--sc-space-sm);
}

/* Not found / 404 */
.error-404 .page-title,
.no-results .page-title {
	font-size: var(--sc-step-4);
}

.error-404 .storycraft-search-form,
.no-results .storycraft-search-form {
	max-inline-size: 28rem;
	margin-block-start: var(--sc-space-sm);
}

/* Widgets */
.widget { margin-block-end: var(--sc-space-lg); }
.widget:last-child { margin-block-end: 0; }
.widget-title {
	font-size: var(--sc-step-0);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-block: 0 var(--sc-space-sm);
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li {
	padding-block: var(--sc-space-3xs);
	border-block-end: 1px solid var(--sc-border);
}
.widget ul li:last-child { border-block-end: none; }
.widget a { text-decoration: none; }
.widget a:hover { text-decoration: underline; }
.widget select { max-inline-size: 100%; }

/* Front Page widget area — each widget added here renders as its own
   storycraft-band section (matching the hero/featured-work/CTA bands
   above it on the front page), but the band's default padding-block
   (~96px top and bottom) is sized for one hero-scale section. Stacked
   widget after widget it reads as far too much empty space, and the
   generic .widget margin below adds even more on top of that — so this
   area gets its own, tighter rhythm instead. .widget.storycraft-band is
   unique to this widget area; Sidebar/Footer widgets aren't affected. */
.widget.storycraft-band {
	padding-block: var(--sc-space-lg);
	margin-block-end: 0;
}

.widget.storycraft-band-paper + .widget.storycraft-band-paper,
.widget.storycraft-band-surface + .widget.storycraft-band-surface {
	padding-block-start: calc(var(--sc-space-lg) - 1px);
}

/* Read as a designed section rather than a raw dropped-in block: an
   eyebrow-style title (matching .storycraft-eyebrow elsewhere) instead of
   a plain heading, softer body copy, and accent-coloured links. */
.widget.storycraft-band .widget-title {
	color: var(--sc-accent);
	font-size: var(--sc-step--1);
	letter-spacing: 0.08em;
	margin-block-end: var(--sc-space-xs);
}

.widget.storycraft-band p {
	color: var(--sc-slate);
	line-height: 1.6;
}

.widget.storycraft-band p:last-child {
	margin-block-end: 0;
}

.widget.storycraft-band a {
	color: var(--sc-accent);
}

/* Core table / caption / gallery polish for block content */
.entry-content table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sc-step--1);
}

@media (max-width: 600px) {
	.entry-content table,
	.wp-block-table table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

.entry-content th,
.entry-content td,
.wp-block-table th,
.wp-block-table td {
	padding: 0.6em 0.8em;
	border: 1px solid var(--sc-border);
	text-align: start;
}

.entry-content th {
	background: var(--sc-surface);
	font-weight: 700;
}

.wp-caption,
.wp-block-image figcaption,
.entry-content figcaption {
	font-size: var(--sc-step--1);
	color: var(--sc-slate);
	text-align: center;
	margin-block-start: var(--sc-space-2xs);
}

.entry-content img,
.wp-block-image img {
	border-radius: var(--sc-radius);
}

.entry-content hr {
	border: none;
	border-block-start: 1px solid var(--sc-border);
	margin-block: var(--sc-space-lg);
}

.entry-content ::selection,
.storycraft-testimonial-card ::selection {
	background-color: var(--sc-accent);
	color: var(--sc-paper);
}

/* Sticky post + tag badges */
.sticky .entry-title::before {
	content: "\2605";
	color: var(--sc-accent-2);
	margin-inline-end: 0.4em;
	font-size: 0.8em;
}

/* Print */
@media print {
	.storycraft-site-header,
	.storycraft-site-footer,
	.storycraft-skip-link,
	.storycraft-menu-toggle,
	.storycraft-social-links,
	.storycraft-cta-band,
	.pagination,
	.comment-respond {
		display: none !important;
	}

	.storycraft-content-width,
	.storycraft-pattern-section {
		max-inline-size: 100%;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* =============================================================
   13. Typography presets (opt-in via Customizer → Appearance →
       Typography). All system font stacks; no webfonts bundled.
       "Modern Sans" (no body class) is the default and is what
       every rule above this section already renders — nothing
       below changes that default in any way.
   ============================================================= */

/* Editorial Serif — serif headings, sans body. Same warm-paper DNA,
   heading weight/tracking loosened slightly since serif faces read
   heavier at the same weight as the sans default. */
body.storycraft-typography-editorial {
	--sc-font-heading: var(--sc-font-serif);
}

body.storycraft-typography-editorial h1,
body.storycraft-typography-editorial h2,
body.storycraft-typography-editorial h3,
body.storycraft-typography-editorial h4,
body.storycraft-typography-editorial h5,
body.storycraft-typography-editorial h6 {
	font-weight: 700;
	letter-spacing: 0;
	font-style: normal;
}

body.storycraft-typography-editorial h6 {
	font-family: var(--sc-font-sans); /* eyebrow/label caps stay sans for legibility at small sizes */
	letter-spacing: 0.06em;
}

/* Classic Serif — serif headings and serif body, for a fully literary feel */
body.storycraft-typography-classic {
	--sc-font-heading: var(--sc-font-serif);
	--sc-font-sans: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

body.storycraft-typography-classic h1,
body.storycraft-typography-classic h2,
body.storycraft-typography-classic h3,
body.storycraft-typography-classic h4,
body.storycraft-typography-classic h5,
body.storycraft-typography-classic h6 {
	font-weight: 700;
	letter-spacing: 0;
	font-style: normal;
}

body.storycraft-typography-classic .storycraft-button,
body.storycraft-typography-classic .storycraft-menu-toggle,
body.storycraft-typography-classic h6,
body.storycraft-typography-classic .entry-meta,
body.storycraft-typography-classic .widget-title {
	/* UI chrome, labels, and buttons stay on a sans stack even in the
	   fully-serif preset — small caps-y UI text in serif hurts legibility. */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}

/* Rounded Sans — a softer, friendlier system stack for headings */
body.storycraft-typography-rounded {
	--sc-font-heading: ui-rounded, "SF Pro Rounded", "Segoe UI Rounded", "Nunito Sans", var(--sc-font-sans);
}

body.storycraft-typography-rounded h1,
body.storycraft-typography-rounded h2,
body.storycraft-typography-rounded h3,
body.storycraft-typography-rounded h4,
body.storycraft-typography-rounded h5,
body.storycraft-typography-rounded h6 {
	letter-spacing: -0.01em;
}

body.storycraft-typography-rounded .storycraft-button {
	border-radius: 999px;
}

/* =============================================================
   14. Grid overflow safety
   ============================================================= */

/* CSS Grid items default to min-width:auto, which means a child with long
   unbroken text or an oversized image won't shrink to fit its track — it
   overflows instead, dragging headings into odd wraps and pushing content
   past the column edge. This is especially visible with user-supplied
   widget content of unpredictable length (footer columns, homepage
   sections widget area), so every grid in the theme gets this reset. */
.storycraft-services-grid > *,
.storycraft-team-grid > *,
.storycraft-testimonials-grid > *,
.storycraft-stats-row > *,
.storycraft-grid > *,
.storycraft-footer-widgets > *,
.storycraft-clients-wall > * {
	min-inline-size: 0;
}

/* Long, unbroken strings (URLs pasted into a widget, run-on words) should
   wrap inside their container instead of forcing it wider. */
.widget-title,
.widget p,
.widget li,
.storycraft-footer-widgets,
.storycraft-team-member-body,
.storycraft-card-body,
.storycraft-testimonial-card {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Images dropped into a footer/sidebar widget shouldn't be able to exceed
   their column width even before JS/lazy-load settles their intrinsic size. */
.widget img {
	max-inline-size: 100%;
	height: auto;
}

/* =============================================================
   15. Hero — front-page.php's automatic hero AND the Hero pattern
       share these classes, so both stay visually identical.
   ============================================================= */

.storycraft-hero {
	padding-block: var(--sc-space-2xl) var(--sc-space-xl);
	overflow: hidden; /* contains the decorative accent shape below */
}

.storycraft-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--sc-space-xl);
	align-items: center;
}

.wp-block-group.storycraft-hero-grid {
	display: grid;
}

.wp-block-columns.storycraft-hero-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--sc-space-xl);
	align-items: center;
	margin-block-start: 0;
}

.wp-block-columns.storycraft-hero-grid > .wp-block-column {
	min-inline-size: 0;
	width: auto;
	flex-basis: auto !important;
}

.storycraft-hero-image-right .storycraft-hero-grid,
.storycraft-hero-image-left .storycraft-hero-grid {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
}

.storycraft-hero-copy {
	max-inline-size: 34rem;
}

.storycraft-hero-title {
	/* Deliberately larger than the generic h1 default — this is the one
	   place on the site that should feel like a headline, not a heading. */
	font-size: clamp(2.75rem, 2.15rem + 3vw, 4.25rem);
	margin-block-start: 0;
}

.storycraft-hero-text {
	font-size: var(--sc-step-1);
	color: var(--sc-slate);
}

.storycraft-hero-text > *:last-child {
	margin-block-end: 0;
}

.storycraft-hero-text .storycraft-button,
.storycraft-hero-text a.storycraft-button {
	color: var(--sc-paper);
	font-size: var(--sc-step--1);
}

.storycraft-hero-media {
	position: relative;
}

.storycraft-hero-media::before {
	content: "";
	position: absolute;
	inset-block-start: -0.85rem;
	inset-inline-end: -0.85rem;
	inline-size: 45%;
	block-size: 45%;
	background-color: var(--sc-accent-2);
	opacity: 0.12;
	border-radius: var(--sc-radius);
	z-index: 0;
}

.storycraft-hero-media img {
	position: relative;
	z-index: 1;
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: var(--sc-radius);
	box-shadow: var(--sc-shadow-lg);
}

/* image-right is the default DOM order (copy, then media) — no override needed */

/* image-left: keep copy first in the DOM/reading order for screen readers
   and keyboard users, flip only the visual position. */
.storycraft-hero-image-left .storycraft-hero-media {
	order: -1;
}

/* centered: no media column renders at all (front-page.php doesn't output
   it, and the pattern variant simply doesn't include one), so this is a
   single centered text column. */
.storycraft-hero-centered .storycraft-hero-grid {
	grid-template-columns: 1fr;
}

.storycraft-hero-centered .storycraft-hero-copy {
	max-inline-size: var(--sc-content-width);
	margin-inline: auto;
	text-align: center;
}

.storycraft-hero-centered .wp-block-buttons {
	justify-content: center !important;
}

@media (max-width: 600px) {
	.storycraft-hero-image-right .storycraft-hero-grid,
	.storycraft-hero-image-left .storycraft-hero-grid,
	.storycraft-hero-grid {
		grid-template-columns: 1fr !important;
	}

	.storycraft-hero-image-left .storycraft-hero-media {
		order: 0; /* stack in natural reading order on small screens regardless of desktop layout choice */
	}

	.storycraft-hero-copy {
		max-inline-size: none;
	}

	.storycraft-hero-media {
		inline-size: 100%;
	}

	.storycraft-hero-media img {
		inline-size: 100%;
	}

	.storycraft-hero-media::before {
		display: none;
	}
}

@media (max-width: 782px) {
	.wp-block-group.storycraft-team-grid,
	.wp-block-columns.storycraft-team-grid,
	.wp-block-columns.storycraft-featured-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.wp-block-columns.storycraft-clients-wall {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 480px) {
	.wp-block-group.storycraft-team-grid,
	.wp-block-columns.storycraft-team-grid,
	.wp-block-columns.storycraft-featured-grid {
		grid-template-columns: 1fr !important;
	}

	.wp-block-columns.storycraft-clients-wall {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* =============================================================
   16. Design refinement — eyebrow labels, section definition,
       and cleaner placeholder-graphic framing
   ============================================================= */

/* Small tracked label above a section heading, the main lever for giving
   each band a distinct, "designed" identity instead of every section
   reading as an undifferentiated heading + paragraph block. */
.storycraft-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--sc-accent);
	font-size: var(--sc-step--1);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-block-end: var(--sc-space-2xs);
}

.storycraft-eyebrow::before {
	content: "";
	display: inline-block;
	inline-size: 1.25em;
	block-size: 2px;
	background-color: currentColor;
}

/* The eyebrow sits directly under the band's top edge, so the following
   heading shouldn't also carry its own large top margin. */
.storycraft-eyebrow + h2 {
	margin-block-start: 0;
}

/* Placeholder photography (team/hero/card) reads as more deliberate when
   it isn't a bare flat rectangle — a hairline frame gives it the sense of
   a defined image slot rather than an unstyled grey box. */
.storycraft-team-member img,
.storycraft-card img,
.storycraft-hero-media img {
	box-shadow: inset 0 0 0 1px var(--sc-border), var(--sc-shadow-sm);
}

.storycraft-card:hover img,
.storycraft-card:focus-within img,
.storycraft-team-member:hover img {
	box-shadow: inset 0 0 0 1px var(--sc-border), var(--sc-shadow-md);
}

.storycraft-hero-media img {
	box-shadow: inset 0 0 0 1px var(--sc-border), var(--sc-shadow-lg);
}

/* Testimonial cards read more like quotes with a real accent mark instead
   of only the block-quote's left rule. */
.storycraft-testimonial-card {
	position: relative;
	padding-block-start: var(--sc-space-lg);
}

.storycraft-testimonial-card::before {
	content: "\201C";
	position: absolute;
	inset-block-start: 0.1em;
	inset-inline-start: var(--sc-space-md);
	font-family: var(--sc-font-serif);
	font-style: italic;
	font-size: 3.5rem;
	line-height: 1;
	color: var(--sc-accent-2);
	opacity: 0.5;
}

.storycraft-testimonial-card blockquote {
	border: none;
	padding: 0;
}

/* Stats row gets a visible divider between figures instead of floating
   loosely in a band with no structure. */
.storycraft-stats-row {
	border-block-start: 1px solid var(--sc-border);
	border-block-end: 1px solid var(--sc-border);
	padding-block: var(--sc-space-lg);
}

.storycraft-stats-row > * {
	position: relative;
}

.storycraft-stats-row > *:not(:first-child)::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(-1 * var(--sc-space-md) / 2);
	inset-block: 0.25em;
	inline-size: 1px;
	background-color: var(--sc-border);
}

/* Services grid: give each numbered item a top rule so three short items
   read as a considered list rather than three loose paragraphs. */
.storycraft-service {
	padding-block-start: var(--sc-space-sm);
	border-block-start: 2px solid var(--sc-border);
}