/*
Theme Name: Created by Raven
Theme URI: https://createdbyraven.com
Author: Raven
Description: Custom theme for Created by Raven — portfolio now, print studio later.
Version: 0.2.1
Text Domain: createdbyraven
*/

:root {
	--ink: #241934;
	--paper: #f1ebfc;
	--line: #d9d3ec;
	--card: #ffffff;
	color-scheme: light;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: "Segoe UI", system-ui, sans-serif;
	color: var(--ink);
	background: var(--paper);
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
#main-content { flex: 1 0 auto; }

a { color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 3px solid #4ea8ff;
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 100;
	background: #3d2463;
	color: var(--paper);
	padding: 10px 18px;
	border-radius: 0 0 8px 8px;
	font-weight: 700;
	text-decoration: none;
	transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* header / nav */
.site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 32px;
	font-family: "Segoe UI Black", "Arial Rounded MT Bold", "Segoe UI", sans-serif;
	background: var(--paper);
	position: relative;
	z-index: 10;
}
.home .site-header { background: #d9edf6; }
.site-title { display: flex; align-items: center; gap: 10px; font-family: "Fredoka", "Segoe UI Black", "Arial Rounded MT Bold", sans-serif; font-size: 23px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; }
.site-logo { height: 44px; width: auto; display: block; mix-blend-mode: multiply; }
.site-nav { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; font-size: 13px; font-weight: 700; }
.site-nav a { text-decoration: none; opacity: 0.7; }
.site-nav a:hover { opacity: 1; }

.site-footer {
	padding: 20px 32px;
	font-size: 13px;
	opacity: 0.7;
}

/* portfolio hero */
body.post-type-archive-portfolio_item { --paper: #efe1f6; }
body.page-about { --paper: #bce0e5; }
.portfolio-hero { position: relative; padding: 30px 32px 30px; overflow: hidden; }
.portfolio-hero-text { max-width: 1032px; margin: 0 auto; }
.portfolio-eyebrow {
	display: inline-block;
	background: #9558e0;
	color: #fff;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	transform: rotate(-2deg);
}
.portfolio-hero h1 {
	font-family: "Segoe UI Black", "Arial Rounded MT Bold", "Segoe UI", sans-serif;
	font-weight: 900;
	font-size: clamp(28px, 4.2vw, 44px);
	margin: 12px 0 0;
	text-wrap: balance;
	max-width: 38ch;
}
.gear-deco { position: absolute; pointer-events: none; }
.gear-deco.g1 { top: 36px; right: 114px; width: 110px; height: 110px; color: #ff5d8f; opacity: 0.5; animation: cbr-spin-cw 22s linear infinite; }
.gear-deco.g2 { top: 88px; right: 212px; width: 58px; height: 58px; color: #3ddc97; opacity: 0.55; animation: cbr-spin-ccw 15s linear infinite; }
@keyframes cbr-spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cbr-spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .gear-deco { animation: none !important; } }

/* category rows */
.portfolio-rows { padding: 10px 0 20px; }
.category-row { margin: 0 32px 40px; }
.row-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 auto 12px; max-width: 1032px; }
.row-head h2 {
	font-family: "Segoe UI Black", "Arial Rounded MT Bold", "Segoe UI", sans-serif;
	font-size: 18px;
	font-weight: 900;
	margin: 0;
	color: var(--ink);
	opacity: 0.7;
}
.row-count { font-size: 12px; font-weight: 700; opacity: 0.55; white-space: nowrap; }

.rail { position: relative; max-width: 1022px; margin: 0 auto; }
.portfolio-grid {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 18px 14px 10px 4px;
}
.portfolio-grid::-webkit-scrollbar { display: none; }

.scroll-btn {
	position: absolute;
	z-index: 5;
	top: 42%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #d9edf6;
	border: 1px solid var(--ink);
	color: var(--ink);
	cursor: pointer;
	box-shadow: 0 3px 0 var(--ink);
	transition: transform 0.2s ease, background 0.15s ease;
}
.scroll-btn.next:hover { background: #ffb627; }
.scroll-btn.prev:hover { background: #7b93c2; }
.scroll-btn:active { transform: translateY(-50%) rotate(50deg); }
.scroll-btn.prev { left: -10px; }
.scroll-btn.next { right: -10px; }
.scroll-btn[hidden] { display: none; }
.scroll-btn svg { display: block; }

.portfolio-tile {
	position: relative;
	background: var(--card);
	text-decoration: none;
	color: var(--ink);
	flex: 0 0 190px;
	scroll-snap-align: start;
	border: 3px solid color-mix(in srgb, var(--cat-color, var(--ink)) 65%, white);
	border-radius: 16px;
	box-shadow: 0 6px 0 color-mix(in srgb, var(--cat-color, var(--ink)) 55%, transparent);
	transform: rotate(-1.5deg);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.portfolio-tile:nth-child(even) { transform: rotate(1.5deg); }
.portfolio-tile:hover {
	transform: rotate(0deg) translateY(-4px);
	box-shadow: 0 10px 0 color-mix(in srgb, var(--cat-color, var(--ink)) 55%, transparent);
}
.tile-art { aspect-ratio: 1/1; border-radius: 12px 12px 0 0; overflow: hidden; }
.tile-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-title { padding: 10px 12px 14px; font-family: "Segoe UI Black", "Arial Rounded MT Bold", "Segoe UI", sans-serif; font-weight: 800; font-size: 14px; }

.tile-gear {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 26px;
	height: 26px;
	background: color-mix(in srgb, var(--cat-color, var(--ink)) 65%, white);
	color: var(--card);
	border-radius: 50%;
	padding: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.tile-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: rgba(36, 25, 52, 0.85);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
}
@media (prefers-color-scheme: dark) {
	.tile-badge { background: rgba(240, 236, 250, 0.9); color: #241934; }
}

/* single portfolio item */
.single-portfolio { max-width: 760px; margin: 0 auto; padding: 40px 32px; }
.single-portfolio .back-link {
	display: inline-block;
	margin-bottom: 20px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	opacity: 0.65;
}
.single-portfolio .back-link:hover { opacity: 1; }
.single-portfolio .cat {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #fff;
	background: color-mix(in srgb, var(--cat-color, var(--ink)) 65%, white);
	padding: 3px 10px;
	border-radius: 999px;
}
.single-portfolio .sample-flag {
	display: inline-block;
	margin: 8px 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ink);
	border: 2px solid var(--ink);
	padding: 2px 9px;
	border-radius: 999px;
}
.single-portfolio h1 {
	font-family: "Segoe UI Black", "Arial Rounded MT Bold", "Segoe UI", sans-serif;
	font-weight: 900;
	font-size: 30px;
	margin: 12px 0 20px;
}
.single-portfolio .featured-image img {
	width: 100%;
	display: block;
	margin-bottom: 24px;
	border-radius: 16px;
	border: 4px solid color-mix(in srgb, var(--cat-color, var(--ink)) 65%, white);
}
.single-portfolio .entry-content { font-size: 15px; line-height: 1.65; }
.single-portfolio .entry-content img { max-width: 100%; height: auto; }

/* contact form */
.cbr-contact-form { display: flex; flex-direction: column; gap: 6px; max-width: 480px; }
.cbr-contact-form label { font-size: 13px; font-weight: 700; margin-top: 12px; }
.cbr-contact-form input, .cbr-contact-form textarea {
	font-family: inherit;
	font-size: 15px;
	padding: 10px 12px;
	border: 2px solid var(--line, var(--ink));
	border-radius: 10px;
	background: var(--card);
	color: var(--ink);
}
.cbr-contact-form input:focus, .cbr-contact-form textarea:focus {
	outline: 3px solid #4ea8ff;
	outline-offset: 1px;
}
.cbr-submit-btn {
	margin-top: 16px;
	align-self: flex-start;
	font-family: "Segoe UI Black", "Arial Rounded MT Bold", "Segoe UI", sans-serif;
	font-weight: 800;
	font-size: 15px;
	padding: 12px 24px;
	border: none;
	border-radius: 999px;
	background: #9558e0;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 0 #6b3aa3;
}
.cbr-submit-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #6b3aa3; }
.cbr-form-status { padding: 12px 16px; border-radius: 10px; font-weight: 700; }
.cbr-form-success { background: #e1f5ee; color: #0f6e56; }
.cbr-form-error { background: #fbeaf0; color: #993556; }

/* homepage */
:root { --home-gear-hole: #d6e6f2; }
.home-hero {
	position: relative;
	min-height: max(64vh, 560px);
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 0 8vw;
	background: transparent;
}
.home-hero-inner { position: relative; width: 100%; max-width: 1320px; align-self: stretch; margin: 0 auto; display: flex; align-items: center; }
.home-hero-inner { padding-left: clamp(0px, 42vw - 450px, 210px); }
.home-rainbow { left: clamp(0px, 42vw - 450px, 210px); z-index: 1; }
.home-cloud { position: absolute; background: #fffdf9; border-radius: 100px; opacity: .9; z-index: 1; }
.home-cloud::before, .home-cloud::after { content: ""; position: absolute; background: #fffdf9; border-radius: 50%; }
.home-cloud.c1 { width: 260px; height: 74px; top: 10%; left: 5%; }
.home-cloud.c1::before { width: 96px; height: 96px; top: -48px; left: 32px; }
.home-cloud.c1::after { width: 74px; height: 74px; top: -32px; left: 138px; }
.home-cloud.c2 { width: 190px; height: 56px; top: 66%; right: 6%; opacity: .8; }
.home-cloud.c2::before { width: 68px; height: 68px; top: -34px; left: 20px; }
.home-cloud.c2::after { width: 52px; height: 52px; top: -24px; left: 98px; }

.home-sparkle { position: absolute; z-index: 0; color: #f6c9d6; animation: cbr-twinkle 18s ease-in-out infinite; }
.home-sparkle-wide { display: none; }
@media (min-width: 1024px) { .home-sparkle-wide { display: block; } }
.home-scenes .home-sparkle, .home-about-wrap .home-sparkle, .home-contact-wrap .home-sparkle { color: #fffdf9; }
@keyframes cbr-twinkle {
	0% { opacity: 0; transform: scale(.8); }
	15% { opacity: 1; transform: scale(1); }
	35% { opacity: 1; transform: scale(1); }
	50% { opacity: 0; transform: scale(.8); }
	100% { opacity: 0; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) { .home-sparkle { animation: none; } }

.home-gear-cluster { position: absolute; width: 320px; height: 260px; top: min(58%, calc(100% - 272px)); left: 38%; margin-top: 0px; margin-left: -160px; z-index: 2; }
.home-gear-wrap { position: absolute; }
.home-gear-spin { width: 100%; height: 100%; opacity: .85; }
.home-gear-spin.slow { animation: cbr-home-spin 26s linear infinite; }
.home-gear-spin.med { animation: cbr-home-spin-ccw 18s linear infinite; }
.home-gear-spin.fast { animation: cbr-home-spin-ccw 11s linear infinite; }
@keyframes cbr-home-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cbr-home-spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .home-gear-spin, .home-sun-ring { animation: none !important; } }

.home-sun-gear { position: absolute; top: 6%; right: max(6%, calc(50vw - 680px)); width: 130px; height: 130px; z-index: 2; }
.home-sun-ring { width: 100%; height: 100%; animation: cbr-home-spin 14s linear infinite; }
.home-sun-face { position: absolute; inset: 27%; border-radius: 50%; }

.home-hero-copy { position: relative; z-index: 5; max-width: 560px; transform: translateY(100px); }
.home-eyebrow {
	display: inline-block;
	background: #f6c9d6;
	color: var(--ink);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
}
.home-h1 {
	font-family: "Segoe UI Black", "Arial Rounded MT Bold", "Segoe UI", sans-serif;
	font-weight: 900;
	font-size: clamp(30px, 5vw, 52px);
	margin: 14px 0 0;
	text-wrap: balance;
}
.home-lead { font-size: 17px; line-height: 1.6; max-width: 44ch; opacity: .85; margin: 16px 0 26px; }
.home-btn {
	display: inline-block;
	font-family: "Segoe UI Black", "Arial Rounded MT Bold", "Segoe UI", sans-serif;
	font-weight: 800;
	font-size: 15px;
	padding: 13px 26px;
	border-radius: 999px;
	text-decoration: none;
	background: #9558e0;
	color: var(--paper);
}

.home-scenes { padding: 55px 8vw 0; position: relative; }
.home-scene {
	display: flex;
	gap: 44px;
	align-items: center;
	max-width: 900px;
	margin: 0 auto 60px;
	padding: 40px;
	border-radius: 24px;
	text-decoration: none;
	color: var(--ink);
	transform: scale(.9) rotate(-2deg);
	transition: transform .5s cubic-bezier(.2,1.4,.4,1), opacity .5s ease;
	opacity: 0;
	position: relative;
	z-index: 1;
}
.home-scene.visible { opacity: 1; transform: scale(1) rotate(0deg); }
.home-scene:nth-child(even) { flex-direction: row-reverse; transform: scale(.9) rotate(2deg); }
.home-scene:nth-child(even).visible { transform: scale(1) rotate(0deg); }
.home-scene-art { flex: 0 0 175px; aspect-ratio: 1/1; border-radius: 16px; overflow: hidden; background: var(--card); }
.home-scene-text { flex: 1; }
.home-scene-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-scene h3 { font-family: "Segoe UI Black", "Arial Rounded MT Bold", "Segoe UI", sans-serif; font-size: clamp(20px, 1.7vw, 32px); margin: 0 0 8px; }
.home-scene p { font-size: clamp(14px, 1.05vw, 19px); opacity: .75; margin: 0; }

.home-about-wrap, .home-contact-wrap { display: flex; justify-content: center; padding: 0 8vw; position: relative; opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.home-about-wrap.visible, .home-contact-wrap.visible { opacity: 1; transform: translateY(0); }
.home-contact-wrap { padding-bottom: 60px; }
.home-about-card, .home-contact-card { border-radius: 24px; padding: 44px 40px; max-width: 640px; text-align: center; position: relative; z-index: 1; }
.home-about-card p, .home-contact-card p { font-size: 15.5px; line-height: 1.65; opacity: .85; }
.home-about-card { background: #bee6f5; margin-bottom: 60px; }
.home-contact-card { background: #3d2463; color: var(--paper); }
.home-contact-card .home-btn { background: #f6c9d6; color: var(--ink); }
.home-mini-link { font-weight: 800; text-decoration: none; color: var(--ink); font-size: 14px; }

@media (prefers-reduced-motion: reduce) { .home-scene, .home-about-wrap, .home-contact-wrap { opacity: 1 !important; transform: none !important; } }

@media (max-width: 640px) {
	.home-scenes { padding: 40px 6vw; }
	.home-scene { flex-direction: column !important; padding: 24px; text-align: center; }
	.home-gear-cluster { transform: scale(.7); }
	.home-sun-gear { width: 90px; height: 90px; right: 10px; }
}

/* mobile */
@media (max-width: 640px) {
	.site-header { padding: 18px 20px; flex-wrap: wrap; gap: 10px; }
	.site-nav { gap: 16px; flex-wrap: wrap; }
	.portfolio-hero { padding: 22px 20px 20px; }
	.category-row { margin: 0 20px 32px; }
	.portfolio-tile { flex: 0 0 160px; }
	.tile-title { font-size: 13px; padding: 9px 10px 12px; }
	.gear-deco.g1 { width: 70px; height: 70px; right: 12px; }
	.gear-deco.g2 { width: 38px; height: 38px; right: 70px; top: 30px; }
	.single-portfolio { padding: 28px 20px; }
	.scroll-btn { width: 32px; height: 32px; }
}