/* AlphaSoft — base tokens, reset, typography, base accessibility */

:root {
	--ink: #080808;
	--paper: #f1f0eb;
	--white: #fff;
	--blue: #3d5afe;
	--blue-deep: #2739d9;
	--acid: #caff38;
	--rose: #e7c7cf;
	--green: #b8c9b5;
	--metal: #d2d2cc;
	--line: rgb(8 8 8 / 18%);
	--mono: "DM Mono", ui-monospace, "SFMono-Regular", menlo, monospace;
	--sans: "Manrope", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
	--side-padding: 36px;
	--content-max: 1440px;
}

@media (width <= 960px) {
	:root {
		--side-padding: 20px;
	}
}

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

/*
 * WordPress core's global styles add a 24px margin-block-start to every
 * direct child of .wp-site-blocks (the header/main/footer template parts).
 * The :last-child override in that same core stylesheet only zeroes
 * margin-block-END, not -start, so the footer (last child) still got a
 * 24px gap pushing it away from the preceding section — visible as a
 * paper-coloured strip between the last section and the black footer.
 * Every section here manages its own spacing explicitly, so opt out of
 * this default entirely.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

html {
	scroll-behavior: smooth;
}

html body {
	/*
	 * WordPress core's global-styles stylesheet sets body{font-size:
	 * var(--wp--preset--font-size--medium); line-height: 1.5} at the same
	 * specificity as a plain `body{}`/`h1..h6{}` rule, and it's printed
	 * after theme.json's own output — so it silently bumped the inherited
	 * 16px/"normal" browser defaults the design was built against up to
	 * 20px / 1.5, everywhere nothing sets its own font-size or
	 * line-height (most visibly the header wordmark, and every section
	 * with body-copy or a heading that doesn't set its own line-height —
	 * .case-lead, .case-two-col h2, etc. — which then measured taller or
	 * shorter than the design and threw off spacing all the way down the
	 * page). `html body` / `html h1..h6` outrank the core rules.
	 */
	font-size: 16px;
	line-height: normal;
}

html h1,
html h2,
html h3,
html h4,
html h5,
html h6 {
	line-height: normal;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

body.menu-open {
	overflow: hidden;
}

a {
	color: inherit;
	text-decoration: none;
}

/*
 * WordPress core's global-styles stylesheet adds
 * :root :where(a:where(:not(.wp-element-button)):hover){color: blue}.
 * :where() zeroes the specificity of everything inside it, but :root
 * still carries one, so that rule (0,1,0) outranks the plain `a{}`
 * above (0,0,1) and turned every link — nav items, project titles,
 * card descriptions — blue on hover site-wide. `a:hover` (0,1,1) is the
 * cheapest selector that reliably outranks it; more specific hover
 * rules elsewhere (e.g. .service-row:hover) still win over this.
 */
a:hover {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
}

img,
svg {
	max-width: 100%;
	display: block;
}

::selection {
	background: var(--blue);
	color: #fff;
}

/*
 * The "A" mark: two legs + a crossbar, built from three absolutely
 * positioned divs (i, i, b) and reused everywhere across the site
 * (loader, brand mark, hero scaffold, diagrams, project lines, orbs).
 * This rule sets the shared shape mechanics; each context class below
 * sets its own size/position/rotation. Extend the selector list here —
 * do not duplicate the base rule — whenever a new context is added:
 * .case-visual-a, .portrait-a, .contact-page-a and .service-motion-a
 * were missing from this list for a while, which silently left their
 * "i"/"b" legs with no position/background at all (default static,
 * transparent inline elements) — invisible instead of the intended
 * A-shape lines, even though each one already had its own correctly
 * written size/position/colour rule elsewhere.
 */
.loader-a i,
.loader-a b,
.brand-mark i,
.brand-mark b,
.a-scaffold i,
.a-scaffold b,
.diagram-a i,
.diagram-a b,
.contact-a i,
.contact-a b,
.orb-a i,
.orb-a b,
.project-a-lines i,
.project-a-lines b,
.case-visual-a i,
.case-visual-a b,
.portrait-a i,
.portrait-a b,
.contact-page-a i,
.contact-page-a b,
.service-motion-a i,
.service-motion-a b {
	position: absolute;
	display: block;
	background: currentcolor;
	transform-origin: center;
}

/* Accessibility: skip link */
.skip-link {
	position: absolute;
	z-index: 2000;
	top: -100px;
	left: 12px;
	padding: 14px 20px;
	background: var(--ink);
	color: #fff;
	font: 500 13px/1 var(--sans);
	border-radius: 4px;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 12px;
}

/* Accessibility: visible focus for keyboard users */
:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
}

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

/*
 * Shared per-project visual-theme palette (registered choices in
 * Meta::visual_themes()). Applied directly to whichever element needs the
 * background in context — .project-stage on homepage cards (Phase 4),
 * .case-main-visual on single-project pages (Phase 5). The four projects
 * with bespoke homepage illustrations (loglasi, emal, snezana, lorena) get
 * an equivalent flat background here too, overridden by their higher-
 * specificity `.project-{slug} .project-stage` rule in pages.css.
 */
.visual-loglasi {
	background: #101010;
	color: #fff;
}

.visual-emal {
	background: var(--metal);
	color: var(--ink);
}

.visual-snezana {
	background: var(--rose);
	color: var(--ink);
}

.visual-lorena {
	background: var(--green);
	color: var(--ink);
}

.visual-construction {
	background: #34383c;
	color: #fff;
}

.visual-luxury {
	background: #493c2f;
	color: #fff;
}

.visual-food {
	background: #607545;
	color: #fff;
}

.visual-beauty {
	background: #af6d88;
	color: #fff;
}

.visual-ai {
	background: var(--blue);
	color: #fff;
}

.visual-news {
	background: #b9232f;
	color: #fff;
}

.visual-piano {
	background: #202020;
	color: #fff;
}

.visual-renovation {
	background: #a26943;
	color: #fff;
}

.visual-music {
	background: #702d35;
	color: #fff;
}

.visual-mail {
	background: #4e8ba9;
	color: #fff;
}

.visual-radio {
	background: #c13d78;
	color: #fff;
}

.visual-social {
	background: #4396ca;
	color: #fff;
}

/* Generic featured-project fallback illustration (any theme without bespoke homepage art) */
.generic-watermark {
	position: absolute;
	left: 4%;
	right: 4%;
	top: 8%;
	font-size: clamp(40px, 9vw, 140px);
	font-weight: 700;
	letter-spacing: -0.07em;
	line-height: 0.9;
	color: transparent;
	-webkit-text-stroke: 1px currentcolor;
	opacity: 0.4;
}

.generic-caption {
	position: absolute;
	left: 6%;
	bottom: 8%;
	right: 6%;
}

.generic-caption strong {
	font-size: clamp(24px, 3.5vw, 44px);
	font-weight: 500;
	letter-spacing: -0.05em;
}

/*
 * Inner-page hero: used by the work archive, single-project and every
 * content page (services, about, contact, legal). Lives here rather than
 * in portfolio.css or pages.css specifically because inc/assets.php loads
 * exactly one of those two conditionally per request — a class used by
 * both page families has to live somewhere always-loaded, or the pages
 * that "lose" the conditional pick get an unstyled, uncollapsed hero.
 * (.contact-page-hero h1 is grouped in here for the same reason;
 * .case-hero h1 is portfolio-only and stays in portfolio.css.)
 */
.section-index {
	margin: 0 0 25px;
	font: 400 9px/1 var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.inner-hero {
	min-height: 92svh;
	padding: 145px var(--side-padding) 45px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.inner-hero h1,
.contact-page-hero h1 {
	margin: auto 0;
	font-size: clamp(64px, 10vw, 156px);
	font-weight: 500;
	line-height: 0.89;
	letter-spacing: -0.08em;
}

.inner-indent {
	margin-left: 13vw;
}

.inner-hero-bottom {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
}

.inner-hero-bottom p {
	max-width: 560px;
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
}

.inner-hero-bottom span {
	font: 400 9px/1 var(--mono);
	text-transform: uppercase;
}

/* Compact contact CTA (inner pages — see parts/contact-cta.html). Used by
   both portfolio.css pages (work archive, single project) and pages.css
   pages (services, about) via the same contact-cta template part, so it
   has to live here rather than in either conditionally-loaded stylesheet. */
.compact-contact {
	padding: 120px var(--side-padding);
	background: #fff;
}

.compact-contact h2 {
	max-width: 980px;
	margin: 0;
	font-size: clamp(54px, 7.5vw, 110px);
	font-weight: 500;
	line-height: 0.93;
	letter-spacing: -0.07em;
}

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