/*
Theme Name: LoreKit
Theme URI: https://lorekit.ai
Template: theme-studio
Author: LoreKit
Author URI: https://lorekit.ai
Description: The LoreKit site. A child of Studio by Intertwine carrying LoreKit's own words, palette, and work. Nothing here belongs in the template: deactivate this child and the parent still renders a complete, generic site.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lorekit
*/

/*
 * Site-only design.
 *
 * The parent owns the whole design. This file exists for the handful of things
 * that are true of LoreKit and of no other buyer of the template, and it should
 * stay short. Anything here that would be useful to a second studio belongs in
 * the parent as a generic default instead.
 *
 * The palette itself is not here: it is theme.json in this child, because that
 * is what keeps a rebrand a palette swap rather than a stylesheet edit.
 */

/*
 * The wordmark, rebuilt from what lorekit.ai actually ships.
 *
 * Measured off the live site rather than approximated: Cinzel for the word,
 * Cinzel Decorative for the L and the K at 1.4em nudged down 0.15em, "Lore" in
 * amber and "Kit" in cyan, each with a three-stop glow. It is mixed case and
 * unletterspaced, which is what makes it read as a name rather than as a label.
 *
 * The glow is the one place on the site where a colour is allowed to bloom. It
 * belongs to the mark and appears nowhere else, so it stays an identity rather
 * than becoming a style.
 */
.lk-mark {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none;
	line-height: 1;
}

.lk-mark__badge {
	display: block;
	width: 44px;
	height: auto;
	flex: none;
}

@media ( max-width: 40rem ) {
	.lk-mark__badge {
		width: 36px;
	}
}

.lk-mark__word {
	font-family: var( --wp--preset--font-family--inscription );
	font-weight: 700;
	font-size: 1.32rem;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* The two display capitals. */
.lk-mark__word i {
	font-family: var( --wp--preset--font-family--inscription-deco );
	font-style: normal;
	font-size: 1.4em;
	display: inline-block;
	transform: translateY( 0.15em );
}

.lk-mark__lore {
	color: #fbbf24;
	text-shadow:
		0 0 10px rgba( 251, 191, 36, 0.6 ),
		0 0 30px rgba( 251, 191, 36, 0.3 ),
		0 0 50px rgba( 251, 191, 36, 0.1 );
}

.lk-mark__kit {
	margin-left: 0.12em;
	color: #22d3ee;
	text-shadow:
		0 0 10px rgba( 34, 211, 238, 0.6 ),
		0 0 30px rgba( 34, 211, 238, 0.3 ),
		0 0 50px rgba( 34, 211, 238, 0.1 );
}

/*
 * Headings are Geist, and that is a decision rather than a fallback.
 *
 * Three display serifs were tried here: Optima, Instrument Serif, Fraunces.
 * Each brought character and each fought the page. The lesson is that this
 * layout already has a strong voice, the mark already carries the brand's
 * personality in Cinzel, and a third opinionated face was one too many.
 *
 * Geist is what lorekit.ai already serves. It is a well-drawn modern grotesque
 * with a full weight range, it is legible at 24px and at 150, and it cannot
 * look wrong on a dark ground. Two faces on the site now: Cinzel on the name,
 * Geist on everything else.
 */
.sd-hero__headline,
.sd-h,
.sd-book__heading,
.sd-offer__name,
.sd-clients__name {
	font-weight: 600;
	font-variation-settings: normal;
}

.sd-hero__headline {
	font-size: clamp( 2.5rem, 0.6rem + 6.9vw, 8rem );
	line-height: 0.98;
	letter-spacing: -0.038em;
	max-width: 18ch;
}

/* A grotesque needs tighter tracking than a serif at display sizes, and it
   needs more leading, because its lowercase is taller and its counters close
   up when lines sit on top of each other. */
.sd-h,
.sd-book__heading {
	font-size: clamp( 1.9rem, 1rem + 3.4vw, 4.4rem );
	letter-spacing: -0.032em;
	line-height: 1.02;
}

.sd-hero__headline em,
.sd-h em,
.sd-book__heading em {
	font-weight: 700;
}

/*
 * Cinzel keeps the two places an inscription belongs: the full-width statement
 * and the name of the universe being documented.
 */
.sd-marquee__item,
.sd-sheet__name {
	font-family: var( --wp--preset--font-family--inscription );
	font-variation-settings: normal;
	font-weight: 400;
}

.sd-marquee__item {
	letter-spacing: 0.06em;
	font-size: clamp( 2.4rem, 1rem + 6vw, 7rem );
}

.sd-sheet__name {
	letter-spacing: 0.18em;
	font-size: clamp( 1.3rem, 1rem + 1.5vw, 2.2rem );
}

/*
 * The hero field is texture, not a portfolio.
 *
 * It sat at full strength while the footage on hand was four stock-feeling
 * clips shown five times each, which put the weakest thing on the site directly
 * behind the strongest sentence and invited a visitor to judge it. Pulled back
 * to atmosphere: darker, softer, and slower, so the headline carries the screen
 * and the work is shown deliberately further down, at size, in the wall.
 *
 * Turn this back up when the reel is worth staring at. It is one number.
 */
.sd-hero__cols {
	opacity: 0.42;
	filter: saturate( 0.82 ) contrast( 0.94 );
}

@media ( max-width: 62rem ) {
	.sd-hero__cols {
		opacity: 0.26;
	}
}

/*
 * Real clips instead of stills.
 *
 * The template ships stills because a template cannot assume a buyer has
 * footage. This site does, so the pieces in the hero and the wall are video.
 * Muted, inline, looping, and never with controls: they are the page's
 * material, not something a visitor is being asked to play.
 */
.sd-hero__col video,
.sd-wall__track video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media ( prefers-reduced-motion: reduce ) {
	.sd-hero__col video,
	.sd-wall__track video {
		/* The poster frame is enough. A page that respects the setting should
		   not have twenty clips playing behind its headline. */
		animation-play-state: paused;
	}
}