/*
 * CraftCore Works — theme styles
 *
 * theme.json owns the design tokens (color, type scale, spacing). This file
 * owns the things theme.json cannot express: the sculptural details, the
 * gallery-plinth product cards, the app band in its own colours, motion, and
 * the accessibility affordances.
 *
 * Sections
 *   1.  Tokens
 *   2.  Base refinements
 *   3.  Accessibility
 *   4.  Paper grain
 *   5.  Header + navigation
 *   6.  Buttons
 *   7.  Heroes (home, functional art, apps), phones and the proof strip
 *   8.  Section furniture (eyebrows, rules, numerals)
 *   9.  The collection — filters, cards, quick view
 *   9b. Chapter band
 *   9c. Quick view dialog
 *   10. Editorial blocks (story, functional art)
 *   11. Custom block styles
 *   12. Footer
 *   13. Motion
 *   14. Editor + print
 *   15. Doors — Functional Art and Apps
 *   16. App feature — one app, its own colours
 *   17. Why functional art — the reasons
 *   18. The in-the-works strip, and other small furniture
 */

/* ------------------------------------------------------------------ 1 --- */
/* Tokens                                                                    */

:root {
	--cc-rule: color-mix(in srgb, var(--wp--preset--color--graphite) 42%, transparent);
	--cc-rule-strong: color-mix(in srgb, var(--wp--preset--color--graphite) 70%, transparent);
	--cc-header-height: 4.75rem;

	/* The page's side margin. Full-bleed sections lay out their own contents
	   and so miss core's `has-global-padding`; this keeps them on the same
	   vertical line as everything else. The literal is the fallback for
	   contexts where WordPress has not emitted the root padding variable —
	   without it the whole `padding` shorthand would be invalid and drop to
	   zero, putting the hero copy hard against the left edge of a phone. */
	--cc-gutter: var(--wp--style--root--padding-left, clamp(1.25rem, 4.5vw, 3.5rem));

	/* Tracking, by role rather than by guess. Wide tracking only reads as
	   luxury at light weight; wide-plus-bold is the template register. */
	--cc-track-display: -0.028em;
	--cc-track-heading: -0.018em;
	--cc-track-body: 0;
	--cc-track-label: 0.11em;
	--cc-track-button: 0.06em;

	/* Three durations, two easings. Eleven durations is why nothing quite
	   felt authored. */
	--cc-t-fast: 160ms;
	--cc-t: 260ms;
	--cc-t-slow: 420ms;
	--cc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--cc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--cc-arc: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 360" fill="none"><path d="M44 14C18 176 62 296 202 322" stroke="%23938676" stroke-width="27" stroke-linecap="round"/><path d="M202 322C306 332 364 240 396 54" stroke="%23938676" stroke-width="6" stroke-linecap="round"/></svg>');
}

/* Older browsers without color-mix() still get a visible rule. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--cc-rule: rgba(147, 134, 118, 0.42);
		--cc-rule-strong: rgba(147, 134, 118, 0.7);
	}
}

/* ------------------------------------------------------------------ 2 --- */
/* Base refinements                                                          */

html {
	scroll-behavior: smooth;
	/* Anchor targets clear the sticky header. */
	scroll-padding-top: calc(var(--cc-header-height) + 1.5rem);
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

/* Fraunces carries an optical-size axis; let the browser drive it so large
   display settings get finer, more sculptural strokes. */
h1, h2, h3, h4,
.wp-block-site-title {
	font-optical-sizing: auto;
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

/* Keep long product names and email addresses from overflowing narrow screens. */
a, p, h1, h2, h3, h4, h5, h6, li, figcaption {
	overflow-wrap: break-word;
}

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

/* The theme's own full-width containers pad inside their width. WordPress
   does not set a global box-sizing, so this is stated where it matters. */
.cc-hero__inner,
.cc-hero__foot,
.cc-chapter__inner,
.cc-app-feature__inner,
.cc-doors__grid,
.cc-door,
.cc-phone,
.cc-lab__inner,
.cc-benefits__figure {
	box-sizing: border-box;
}

::selection {
	background: var(--wp--preset--color--ember);
	color: #fff;
}

/* ------------------------------------------------------------------ 3 --- */
/* Accessibility                                                             */

/* A single, high-contrast focus treatment everywhere. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--ember-deep);
	outline-offset: 3px;
	border-radius: 2px;
}

/* On the dark footer the ember outline is too low-contrast; use the tint. */
.cc-footer :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--ember-light);
}

/* Core's block-theme skip link, restyled to match the brand. */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--canvas);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 0.9rem 1.4rem;
	border-radius: 0 0 4px 0;
	box-shadow: none;
	z-index: 100000;
}

/* Section landing targets receive focus after an in-page jump. */
[id][tabindex='-1']:focus {
	outline: none;
}

.cc-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ 4 --- */
/* Paper grain                                                               */

/* A 64px tile at very low opacity. Fixed attachment would repaint on scroll,
   so it is painted once on a non-interactive layer. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url('../images/grain.png');
	background-size: 128px 128px;
	opacity: 0.5;
	mix-blend-mode: multiply;
}

.wp-site-blocks {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------------ 5 --- */
/* Header + navigation                                                       */

/*
 * The header must NOT carry backdrop-filter itself.
 *
 * A backdrop-filter other than `none` makes an element a containing block for
 * its position:fixed descendants. Core's mobile navigation overlay is
 * `position: fixed; inset: 0` and lives inside this header, so putting the
 * blur here collapses the full-screen menu into the header's own ~85px box.
 * The blur therefore lives on a ::before layer, which has no descendants.
 */
.cc-header {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid transparent;
	transition: border-color var(--cc-t) var(--cc-ease);
}

.cc-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	/* Plain colour first so browsers without color-mix() still get a header. */
	background-color: var(--wp--preset--color--canvas);
	background-color: color-mix(in srgb, var(--wp--preset--color--canvas) 90%, transparent);
	/* Blur only — saturating a warm beige visibly pushes it pink. */
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	transition: background-color var(--cc-t) var(--cc-ease);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.cc-header::before {
		background-color: var(--wp--preset--color--canvas);
	}
}

/* Set by the enhancement script once the page has scrolled. */
.cc-header[data-cc-stuck='true'] {
	border-bottom-color: var(--cc-rule);
}

.cc-header[data-cc-stuck='true']::before {
	background-color: var(--wp--preset--color--canvas);
	background-color: color-mix(in srgb, var(--wp--preset--color--canvas) 94%, transparent);
}

/*
 * Over a dark hero, the header is glass.
 *
 * The theme adds `cc-dark-hero` to <body> on the homepage and the two section
 * pages (see craftcore_body_class()). There the hero is pulled up by exactly
 * the header's height so the band starts at the top of the window, and while
 * the page is unscrolled the header drops its plate and inverts to
 * light-on-dark. The moment it sticks, the plate and the normal ink palette
 * come back — which is also what happens on every page without the class,
 * since that rule keys off the [data-cc-stuck] attribute the script sets on
 * load.
 *
 * --cc-header-h is published by initHeader(); the fallback here is the measured
 * height at the default logo width, so a no-JS page is a pixel or two out
 * rather than broken.
 */
.cc-dark-hero .cc-hero {
	margin-top: calc(-1 * var(--cc-header-h, 5.25rem));
}

.cc-dark-hero .cc-header:not([data-cc-stuck='true'])::before {
	opacity: 0;
	transition: opacity var(--cc-t) var(--cc-ease);
}

.cc-dark-hero .cc-header:not([data-cc-stuck='true']) {
	color: var(--wp--preset--color--canvas);
}

.cc-dark-hero .cc-header:not([data-cc-stuck='true']) :where(a, .wp-block-navigation-item__content):not(.wp-element-button) {
	color: var(--wp--preset--color--canvas);
}

/* The Etsy button is ink-filled by default, which all but vanishes against a
   dark photograph. Over the hero it inverts to the off-white plate. */
.cc-dark-hero .cc-header:not([data-cc-stuck='true']) .wp-element-button {
	background-color: var(--wp--preset--color--canvas);
	border-color: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--ink);
}

.cc-dark-hero .cc-header:not([data-cc-stuck='true']) .wp-element-button:where(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--ember);
	border-color: var(--wp--preset--color--ember);
	color: var(--wp--preset--color--white);
}

/* The wordmark is dark ink on transparent; over a photograph it needs to flip.
   The logo is a single-colour mark, so a brightness/invert pair is exact and
   costs nothing next to shipping a second file. */
.cc-dark-hero .cc-header:not([data-cc-stuck='true']) .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

.cc-dark-hero .cc-header:not([data-cc-stuck='true']) .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--canvas);
}

/* Once the mobile overlay is open it has its own light background, so the
   inverted palette above must not leak into it. */
.wp-block-navigation__responsive-container.is-menu-open :where(a, .wp-block-navigation-item__content) {
	color: var(--wp--preset--color--ink);
}

.cc-header .wp-block-site-logo img {
	display: block;
	width: var(--cc-logo-width, 190px);
	max-width: 44vw;
	height: auto;
	transition: opacity var(--cc-t) var(--cc-ease);
}

.cc-header .wp-block-site-logo a:hover img {
	opacity: 0.78;
}

/* The header button is a size down from the page buttons. */
.cc-header-cta .wp-block-button__link {
	padding: 0.75rem 1.15rem;
	font-size: 0.8125rem;
}

/* The header Etsy button and the Etsy item inside the mobile overlay are two
   presentations of one link — never show both at once. */
@media (max-width: 781px) {
	.cc-header-cta {
		display: none !important;
	}
}

@media (min-width: 782px) {
	.cc-nav .cc-nav-etsy {
		display: none;
	}
}

/* Between the overlay breakpoint and the button's, the Etsy item sits inline
   with the other links. Dress it as the button it is standing in for. */
@media (min-width: 600px) and (max-width: 781px) {
	.cc-nav .cc-nav-etsy .wp-block-navigation-item__content {
		padding: 0.5rem 0.85rem;
		border: 1px solid currentColor;
		border-radius: 2px;
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	.cc-nav .cc-nav-etsy .wp-block-navigation-item__content::after {
		display: none;
	}

	.cc-nav .cc-nav-etsy .wp-block-navigation-item__content:where(:hover, :focus-visible) {
		background: var(--wp--preset--color--ember);
		border-color: var(--wp--preset--color--ember);
		color: var(--wp--preset--color--white);
	}
}

/* Understated link underline that draws in from the left. */
.cc-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
}

.cc-nav .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--wp--preset--color--ember);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--cc-t) var(--cc-ease-out);
}

.cc-nav .wp-block-navigation-item__content:where(:hover, :focus-visible)::after,
.cc-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Core's mobile overlay: give it the brand canvas rather than stark white. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--canvas) !important;
	padding: clamp(1.5rem, 6vw, 3rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 0.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 7vw, 2.5rem);
	font-weight: 400;
	letter-spacing: -0.02em;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------------ 6 --- */
/* Buttons                                                                   */

.wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	text-transform: uppercase;
	transition: background-color var(--cc-t) var(--cc-ease), border-color var(--cc-t) var(--cc-ease),
		color var(--cc-t) var(--cc-ease), transform var(--cc-t) var(--cc-ease), box-shadow var(--cc-t) var(--cc-ease);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -12px rgba(142, 71, 24, 0.65);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/* Outline variant, for secondary actions on warm backgrounds. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border-color: var(--cc-rule-strong);
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link:where(:hover, :focus) {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--canvas);
}

/* Outbound-link arrow. Keyed to target="_blank" so it marks links that really
   do leave the site and never an in-page one. Decorative only — the visually
   hidden "opens in a new tab" note carries the meaning. */
.cc-btn-etsy .wp-block-button__link[target='_blank']::after {
	content: '';
	width: 0.68em;
	height: 0.68em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--cc-arrow) center / contain no-repeat;
	mask: var(--cc-arrow) center / contain no-repeat;
	transition: transform var(--cc-t) var(--cc-ease-out);
}

.cc-btn-etsy {
	--cc-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4.4 11.6 11.6 4.4M5.6 4.4h6v6" stroke="black" stroke-width="1.7" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.cc-btn-etsy .wp-block-button__link[target='_blank']:hover::after {
	transform: translate(2px, -2px);
}

/* Dark-surface buttons (footer / ink bands). */
.cc-on-ink .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: color-mix(in srgb, var(--wp--preset--color--canvas) 40%, transparent);
	color: var(--wp--preset--color--canvas);
}

.cc-on-ink .wp-block-button.is-style-outline > .wp-block-button__link:where(:hover, :focus) {
	background-color: var(--wp--preset--color--canvas);
	border-color: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--ink);
}


/* ------------------------------------------------------------------ 7 --- */
/* Heroes                                                                    */

/*
 * Three heroes share one base: the studio statement on the homepage, the
 * full-bleed photograph on the Objects page, and the screens on the Apps page.
 * All three are ink, so the header sits over them as glass (see section 5)
 * and each is pulled up by the header's height so the band starts at y=0.
 */
.cc-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--canvas);
}

/* The logo's dot, as a full stop. The one point of orange on the hero. */
.cc-dot {
	display: inline-block;
	width: 0.2em;
	height: 0.2em;
	margin-left: 0.06em;
	border-radius: 50%;
	background: var(--wp--preset--color--ember);
	vertical-align: baseline;
	transform-origin: center;
	animation: cc-dot-breathe 3.2s var(--cc-ease) infinite;
}

@keyframes cc-dot-breathe {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgb(180 94 38 / 0.45); }
	50%      { transform: scale(1.12); box-shadow: 0 0 0 0.35em rgb(180 94 38 / 0); }
}

.cc-hero__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem;
	margin: 0 0 clamp(1rem, 2.4vh, 1.6rem);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: var(--cc-track-label);
	text-transform: uppercase;
	/* Full strength, not tinted back. This is the smallest text on the hero and
	   sits highest in the wash, so it is the line that decides how dark the
	   scrim has to be; every point of contrast here buys back photograph. */
	color: var(--wp--preset--color--canvas);
}

.cc-hero__sep {
	width: 1.75rem;
	height: 1px;
	background: var(--wp--preset--color--ember-light);
	opacity: 0.9;
}

.cc-hero__title {
	margin: 0;
	max-width: 15ch;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(2.9rem, 7.4vw, 5.6rem);
	line-height: 1.02;
	letter-spacing: var(--cc-track-display);
	color: var(--wp--preset--color--canvas);
	text-wrap: balance;
}

/* Emphasis picks up the ember accent — lightened, because the deep burnt
   orange loses too much against a dark ground. */
.cc-hero__title em {
	font-style: normal;
	color: var(--wp--preset--color--ember-light);
}

.cc-hero__note {
	margin: clamp(1rem, 2.6vh, 1.6rem) 0 0;
	max-width: 44ch;
	font-size: clamp(1.02rem, 1.5vw, 1.25rem);
	line-height: 1.6;
	color: rgb(247 242 235 / 0.88);
}

.cc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.25rem;
	margin-top: clamp(1.75rem, 4vh, 2.6rem);
}

/* The one thing to do. Warm off-white on dark, so it reads as the brightest
   element on the screen without needing a colour nobody else uses. */
.cc-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.95rem 1.6rem;
	border: 1px solid var(--wp--preset--color--canvas);
	border-radius: 2px;
	background: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--ink);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: var(--cc-track-button);
	text-transform: uppercase;
	text-decoration: none;
	transition:
		background-color var(--cc-t) var(--cc-ease),
		border-color var(--cc-t) var(--cc-ease),
		color var(--cc-t) var(--cc-ease),
		transform var(--cc-t) var(--cc-ease);
}

.cc-hero__cta svg {
	flex: none;
	transition: transform var(--cc-t) var(--cc-ease-out);
}

.cc-hero__cta:where(:hover, :focus-visible) {
	background: var(--wp--preset--color--ember);
	border-color: var(--wp--preset--color--ember);
	color: var(--wp--preset--color--white);
	transform: translateY(-2px);
}

.cc-hero__cta:where(:hover, :focus-visible) svg {
	transform: translateX(3px);
}

/* Second action: outlined, so the two never compete. */
.cc-hero__cta--ghost {
	background: transparent;
	border-color: rgb(247 242 235 / 0.4);
	color: var(--wp--preset--color--canvas);
}

.cc-hero__cta--ghost:where(:hover, :focus-visible) {
	background: var(--wp--preset--color--canvas);
	border-color: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--ink);
}

.cc-hero__alt {
	position: relative;
	color: rgb(247 242 235 / 0.88);
	font-size: 0.88rem;
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid rgb(247 242 235 / 0.32);
	transition: color var(--cc-t) var(--cc-ease), border-color var(--cc-t) var(--cc-ease);
}

.cc-hero__alt:where(:hover, :focus-visible) {
	color: var(--wp--preset--color--white);
	border-bottom-color: var(--wp--preset--color--ember-light);
}

.cc-hero__alt--static {
	border-bottom: 0;
	padding-bottom: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	color: rgb(247 242 235 / 0.72);
}

/* --- 7a. The home hero: statement beside piece and app ----------------- */

.cc-hero--home .cc-hero__inner,
.cc-hero--apps .cc-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
	width: 100%;
	/* Content box == wideSize, so the copy starts on exactly the same vertical
	   line as every alignwide section further down the page. */
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--cc-gutter));
	margin-inline: auto;
	/* Clears the glass header, then breathes. */
	padding: calc(var(--cc-header-h, 5.25rem) + clamp(2.5rem, 7vh, 5rem)) var(--cc-gutter) clamp(2.5rem, 6vh, 4rem);
	min-height: min(82svh, 860px);
}

.cc-hero--home .cc-hero__title {
	max-width: 12ch;
	font-size: clamp(2.7rem, 6.2vw, 5.2rem);
}

.cc-hero--home .cc-hero__copy,
.cc-hero--apps .cc-hero__copy {
	max-width: 40rem;
}

/*
 * The composition: an object in an arch, the app in a phone, one arc behind
 * both. Everything is positioned in percentages of the visual box, which has a
 * fixed shape, so the three pieces keep their relationship at every width.
 */
.cc-hero__visual {
	position: relative;
	width: 100%;
	max-width: 34rem;
	margin-inline: auto;
	aspect-ratio: 1 / 1.06;
}

.cc-hero__arc {
	position: absolute;
	inset: -4% -8% -4% -10%;
	width: auto;
	height: auto;
	z-index: 0;
	color: var(--wp--preset--color--graphite);
	pointer-events: none;
}

.cc-hero__arc-dot {
	transform-origin: center;
	transform-box: fill-box;
	animation: cc-dot-breathe 3.2s var(--cc-ease) infinite 1.2s;
}

.cc-hero__object,
.cc-hero__phone {
	position: absolute;
	margin: 0;
}

.cc-hero__object {
	top: 0;
	right: 0;
	width: 68%;
	z-index: 1;
}

.cc-hero__phone {
	left: 0;
	bottom: 0;
	width: 37%;
	z-index: 2;
}

.cc-hero__figure-link {
	display: block;
	color: inherit;
	text-decoration: none;
	border-radius: inherit;
}

/* The arch: the sculptural rounded top from the logo's curve. */
.cc-hero__object img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 6;
	object-fit: cover;
	object-position: center 35%;
	border-radius: 50vw 50vw 4px 4px;
	background: var(--wp--preset--color--charcoal);
	box-shadow:
		0 0 0 1px rgb(247 242 235 / 0.08),
		0 40px 80px -30px rgb(0 0 0 / 0.7);
	transition: transform var(--cc-t-slow) var(--cc-ease-out);
}

.cc-hero__object .cc-hero__figure-link:where(:hover, :focus-visible) img {
	transform: translateY(-4px);
}

.cc-hero__phone .cc-phone {
	transition: transform var(--cc-t-slow) var(--cc-ease-out);
}

.cc-hero__phone .cc-hero__figure-link:where(:hover, :focus-visible) .cc-phone {
	transform: translateY(-4px);
}

/* The little labels that say which is which. */
.cc-hero__tag {
	position: absolute;
	display: grid;
	gap: 0.15rem;
	padding: 0.55rem 0.8rem;
	border-radius: 3px;
	background: rgb(20 18 16 / 0.72);
	color: var(--wp--preset--color--canvas);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 0 0 1px rgb(247 242 235 / 0.1);
	pointer-events: none;
	white-space: nowrap;
}

.cc-hero__object .cc-hero__tag {
	right: 1rem;
	bottom: 1rem;
}

.cc-hero__phone .cc-hero__tag {
	left: calc(100% + 0.9rem);
	bottom: 1.4rem;
}

.cc-hero__tag-kicker {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ember-light);
}

.cc-hero__tag-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.2;
}

.cc-hero__tag-status {
	font-size: 0.68rem;
	color: rgb(247 242 235 / 0.7);
}

/* --- the proof strip under the hero ---------------------------------------- */

/*
 * Four things a first-time visitor needs to believe before they scroll. A
 * hairline above, four short claims, each with a one-line reason. It sits on
 * the hero's own ink so the statement and its proof read as one frame.
 */
.cc-hero__foot {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--cc-gutter));
	margin-inline: auto;
	padding: 0 var(--cc-gutter) clamp(1.75rem, 4vh, 2.75rem);
}

.cc-proof {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem clamp(1.25rem, 3vw, 2.5rem);
	margin: 0;
	padding: 1.4rem 0 0;
	list-style: none;
	border-top: 1px solid rgb(247 242 235 / 0.18);
}

.cc-proof__item {
	display: grid;
	gap: 0.3rem;
	padding-left: 1rem;
	border-left: 1px solid rgb(247 242 235 / 0.14);
}

.cc-proof__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--canvas);
}

.cc-proof__label {
	font-size: 0.8rem;
	line-height: 1.5;
	color: rgb(247 242 235 / 0.68);
}

@media (max-width: 799px) {
	.cc-proof {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 419px) {
	.cc-proof {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- 7b. The Objects page hero: one photograph, full bleed ---------------- */

.cc-hero--photo .cc-hero__frame {
	position: relative;
	display: grid;
	/* svh, not vh: on iOS vh is the *largest* viewport height, so a 100vh hero
	   is taller than the screen until the address bar retracts. */
	min-height: min(86svh, 900px);
}

.cc-hero__frame > picture {
	position: absolute;
	inset: 0;
	display: block;
}

.cc-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Above centre. The stored crop is 16:9 but the box is wider than that on
	   most screens, so a second slice comes off the height here; biasing up
	   spends it on the table rather than on the subject. */
	object-position: center 30%;
}

/*
 * Three layers, each doing one job. The radial wash is anchored to the
 * bottom-left corner where the copy lives, so the text gets a dependably dark
 * ground whatever the photograph happens to be doing there, while the object
 * on the right keeps its full brightness. The two linears then carry the foot
 * of the frame and keep the header legible over a pale image.
 */
.cc-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 130% at 12% 100%, rgb(20 18 16 / 0.93) 0%, rgb(20 18 16 / 0.86) 34%, rgb(20 18 16 / 0.6) 55%, rgb(20 18 16 / 0.22) 76%, rgb(20 18 16 / 0) 92%),
		linear-gradient(to top, rgb(20 18 16 / 0.88) 0%, rgb(20 18 16 / 0.62) 22%, rgb(20 18 16 / 0.16) 48%, rgb(20 18 16 / 0) 68%),
		linear-gradient(to bottom, rgb(20 18 16 / 0.42) 0%, rgb(20 18 16 / 0) 26%);
}

.cc-hero--photo .cc-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--cc-gutter));
	margin-inline: auto;
	padding: clamp(6rem, 16vh, 9rem) var(--cc-gutter) clamp(2.75rem, 7vh, 4.5rem);
}

.cc-hero--photo .cc-hero__copy {
	max-width: 46rem;
}

/*
 * The portrait hero: phones, and tablets held upright. Keyed on viewport
 * shape, exactly like the <picture> source in patterns/objects-hero.php — the
 * two must switch together.
 */
@media (max-aspect-ratio: 9/8), (max-height: 560px) {
	.cc-hero__scrim {
		background:
			linear-gradient(to top, rgb(20 18 16 / 0.96) 0%, rgb(20 18 16 / 0.93) 52%, rgb(20 18 16 / 0.8) 70%, rgb(20 18 16 / 0.34) 86%, rgb(20 18 16 / 0) 100%),
			linear-gradient(to bottom, rgb(20 18 16 / 0.42) 0%, rgb(20 18 16 / 0) 16%);
	}
}

/* --- 7c. The Apps page hero: statement beside three screens --------------- */

.cc-hero__visual--screens {
	aspect-ratio: auto;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 4%;
	max-width: 36rem;
	padding-top: 1rem;
}

.cc-hero__screen {
	flex: 0 1 31%;
	margin: 0;
	transform: translateY(calc(var(--cc-i, 0) * 0.9rem - 0.9rem));
}

.cc-hero__screen:nth-child(2) {
	transform: translateY(-1.6rem);
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 899px) {
	.cc-hero--home .cc-hero__inner,
	.cc-hero--apps .cc-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(2.5rem, 7vw, 4rem);
		min-height: 0;
		padding-top: calc(var(--cc-header-h, 5.25rem) + clamp(2rem, 6vh, 3.5rem));
	}

	.cc-hero__visual {
		max-width: 28rem;
	}

	/* Keep the arc's dot inside the frame on a narrow screen. */
	.cc-hero__arc {
		inset: -4% -3% -4% -10%;
	}

	.cc-hero__visual--screens {
		max-width: 30rem;
	}
}

@media (max-width: 599px) {
	.cc-hero--photo .cc-hero__frame {
		min-height: min(78svh, 660px);
	}

	/*
	 * Sized so the first line still fits at 360px. At the shared clamp it broke
	 * to three lines there, which pushed the eyebrow up into the brightest
	 * part of the photograph and cost it a point of contrast.
	 */
	.cc-hero__title {
		max-width: 12ch;
		font-size: clamp(2.35rem, 11.2vw, 3.1rem);
	}

	.cc-hero--home .cc-hero__title {
		max-width: 11ch;
		font-size: clamp(2.3rem, 10.5vw, 3rem);
	}

	/* See the note in patterns/objects-hero.php: keeping both halves wraps the line. */
	.cc-hero--photo .cc-hero__shelf,
	.cc-hero--photo .cc-hero__sep {
		display: none;
	}

	.cc-hero__phone .cc-hero__tag {
		left: calc(100% + 0.6rem);
		bottom: 0.9rem;
		padding: 0.45rem 0.65rem;
	}

	.cc-hero__tag-name {
		font-size: 0.85rem;
	}

	.cc-hero__object .cc-hero__tag {
		right: 0.75rem;
		bottom: 0.75rem;
	}
}

/* ----------------------------------------------------------------- 7d --- */
/* Phones — shared furniture for the app sections                           */

/*
 * A screenshot in a slim device frame. The frame is a dark rounded plate with
 * a hairline highlight; no notch, no buttons — the screen is the point.
 */
.cc-phone {
	display: block;
	position: relative;
	padding: 3.2%;
	border-radius: clamp(1rem, 6.5%, 1.6rem);
	background: #171513;
	box-shadow:
		inset 0 0 0 1px rgb(247 242 235 / 0.12),
		0 2px 4px rgb(0 0 0 / 0.2),
		0 34px 60px -24px rgb(0 0 0 / 0.65);
}

.cc-phone img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	object-position: top;
	border-radius: clamp(0.65rem, 4.5%, 1.1rem);
	background: #f3ede2;
}

/* ------------------------------------------------------------------ 8 --- */
/* Section furniture                                                         */

/* Eyebrow: 01 — THE COLLECTION */
/* Specificity, not !important: these are (0,2,0) so they clear theme.json's
   `:root :where(h1,h2,...)` at (0,1,0) while leaving the editor's own colour
   and typography controls free to override them. */
.wp-block-heading.is-style-craftcore-eyebrow,
.wp-block-paragraph.is-style-craftcore-eyebrow,
p.cc-eyebrow,
h1.cc-eyebrow, h2.cc-eyebrow, h3.cc-eyebrow,
h4.cc-eyebrow, h5.cc-eyebrow, h6.cc-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--cc-track-label);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
	margin-bottom: 1.25rem;
}

.is-style-craftcore-eyebrow::after,
.cc-eyebrow::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	max-width: 5rem;
	background: var(--cc-rule);
}

/* Centred variant: a hairline on each side. */
.cc-eyebrow--center {
	justify-content: center;
}

.cc-eyebrow--center::before {
	content: '';
	flex: 0 0 3rem;
	height: 1px;
	background: var(--cc-rule);
}

.cc-eyebrow--center::after {
	flex: 0 0 3rem;
	max-width: 3rem;
}

.cc-on-ink p.cc-eyebrow,
.cc-on-ink .wp-block-heading.is-style-craftcore-eyebrow,
.cc-on-ink .wp-block-paragraph.is-style-craftcore-eyebrow {
	color: color-mix(in srgb, var(--wp--preset--color--canvas) 62%, transparent);
}

.cc-on-ink .cc-eyebrow::after,
.cc-on-ink .is-style-craftcore-eyebrow::after {
	background: color-mix(in srgb, var(--wp--preset--color--canvas) 26%, transparent);
}

/* Constrain a block to a comfortable reading measure without centring it —
   core's constrained layout always adds auto margins, which we do not want
   for left-aligned editorial copy. */
.cc-measure {
	max-width: 48rem;
}

/* Lede paragraph: larger, lighter, for the first line of a section. */
.is-style-craftcore-lede,
.cc-lede {
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
	line-height: 1.62;
	color: var(--wp--preset--color--stone);
}

.cc-on-ink .cc-lede,
.cc-on-ink .is-style-craftcore-lede {
	color: #c9c1b6;
	color: color-mix(in srgb, var(--wp--preset--color--canvas) 78%, transparent);
}

/* ------------------------------------------------------------------ 9 --- */
/* The collection — filters, cards, quick view                               */

/* --- filter bar ---------------------------------------------------------- */

.cc-collection {
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

.cc-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--cc-rule);
}

.cc-filter {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
	margin: 0;
	padding: 0.6rem 1rem;
	border: 1px solid var(--cc-rule);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--stone);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--cc-t) var(--cc-ease), color var(--cc-t) var(--cc-ease),
		border-color var(--cc-t) var(--cc-ease), transform var(--cc-t) var(--cc-ease);
}

.cc-filter:hover {
	color: var(--wp--preset--color--ink);
	border-color: var(--cc-rule-strong);
	transform: translateY(-1px);
}

.cc-filter.is-active {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--canvas);
}

.cc-filter__n {
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.55;
}

.cc-collection__empty {
	margin: 0;
	padding: var(--wp--preset--spacing--50) 0;
	text-align: center;
	color: var(--wp--preset--color--stone);
}

/* --- the grid ------------------------------------------------------------ */

.cc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	gap: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 2.4vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-card {
	display: flex;
	flex-direction: column;
	/* --cc-i is the card's column position, restaggered on every filter change
	   so the entrance always reads left to right. */
	animation: cc-card-in var(--cc-t-slow) var(--cc-ease-out) both;
	animation-delay: calc(var(--cc-i, 0) * 55ms);
}

@keyframes cc-card-in {
	from { opacity: 0; transform: translateY(10px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

/*
 * Product media. The photograph sits flush; the shell colour underneath is the
 * placeholder that shows while a lazy-loaded WebP decodes, so the card never
 * flashes white on a warm page.
 */
.cc-card {
	cursor: pointer;
}

.cc-card__media {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: 2px;
	background: var(--wp--preset--color--oyster);
	box-shadow: var(--wp--preset--shadow--plinth);
	transition: box-shadow var(--cc-t-slow) var(--cc-ease), transform var(--cc-t-slow) var(--cc-ease);
}

.cc-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform var(--cc-t-slow) var(--cc-ease-out);
}

/* A hairline drawn over the photograph, so every card has a crisp edge even
   where the image itself fades into a pale background. */
.cc-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(34, 31, 28, 0.09);
	pointer-events: none;
}

/* Photo count, so a visitor knows there is more to see before clicking. */
.cc-card__count {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	padding: 0.28rem 0.5rem;
	border-radius: 999px;
	background: rgba(34, 31, 28, 0.62);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transform: translateY(-3px);
	transition: opacity var(--cc-t) var(--cc-ease), transform var(--cc-t) var(--cc-ease);
}

.cc-card__count::before {
	content: '';
	width: 0.6em;
	height: 0.6em;
	border: 1px solid currentColor;
	border-radius: 1px;
	box-shadow: 2px 2px 0 -1px currentColor;
}

.cc-card:hover .cc-card__count,
.cc-card:focus-within .cc-card__count {
	opacity: 1;
	transform: none;
}

.cc-card:hover .cc-card__media,
.cc-card:focus-within .cc-card__media {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--lifted);
}

.cc-card:hover .cc-card__media img,
.cc-card:focus-within .cc-card__media img {
	transform: scale(1.045);
}

.cc-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	/* The fact line and the link sit at the foot of every card whatever the
	   note's length, so a row of cards shares one baseline. */
	justify-content: space-between;
	padding-top: 1.1rem;
}

.cc-card__note {
	flex: 1;
}

/* Product cards no longer carry a kicker — it only repeated the filter chip.
   The blog templates still use it for the post date, so the rule stays. */
.cc-card__kicker {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--cc-track-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
	margin: 0 0 0.45rem;
}

.cc-card__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.012em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.5rem;
}

.cc-card__note {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--stone);
	margin: 0 0 0.7rem;
}

/* --- colour swatches ----------------------------------------------------- */

.cc-card__variants {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0 0 0.9rem;
}

.cc-swatch {
	width: 0.85rem;
	height: 0.85rem;
	flex: none;
	border-radius: 50%;
	background: var(--cc-swatch, var(--wp--preset--color--graphite));
	box-shadow: inset 0 0 0 1px rgba(34, 31, 28, 0.22);
}

.cc-card__variants-label {
	margin-left: 0.35rem;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--stone);
}

/* --- the card's one tab stop --------------------------------------------- */

.cc-card__open {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	align-self: flex-start;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--cc-rule);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ember-deep);
	text-decoration: none;
	transition: border-color var(--cc-t) var(--cc-ease), color var(--cc-t) var(--cc-ease), gap var(--cc-t) var(--cc-ease);
}

.cc-card__open svg {
	transition: transform var(--cc-t) var(--cc-ease-out);
}

.cc-card:hover .cc-card__open,
.cc-card__open:where(:hover, :focus-visible) {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--ember);
	gap: 0.7rem;
}

.cc-card:hover .cc-card__open svg {
	transform: rotate(90deg);
}

/* ----------------------------------------------------------------- 9b --- */
/* Chapter band — two pieces, shown large                                    */

/*
 * A dark full-bleed stop between the studio note and the assurances. It carries
 * the two pieces the old rotating hero used to bury on slides two and three,
 * and it gives a long warm page one moment of contrast.
 */
.cc-chapter {
	padding-block: clamp(4.5rem, 11vw, 8rem);
	overflow: clip;
}

.cc-chapter__inner {
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--cc-gutter));
	margin-inline: auto;
	padding-inline: var(--cc-gutter);
}

.cc-chapter__lead {
	max-width: 34rem;
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.cc-chapter__title {
	margin: 0.35rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(1.9rem, 4vw, 2.9rem);
	line-height: 1.1;
	letter-spacing: var(--cc-track-heading);
	color: var(--wp--preset--color--canvas);
}

.cc-chapter__note {
	margin: 1rem 0 0;
	color: rgb(247 242 235 / 0.78);
	line-height: 1.65;
}

.cc-chapter__pair {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 800px) {
	.cc-chapter__pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Drop the second piece so the pair reads as a hang rather than a table.
	   Margin, not transform: .cc-reveal animates transform and would win. */
	.cc-chapter__item:nth-child(2) {
		margin-top: clamp(1.5rem, 4vw, 3.5rem);
	}
}

.cc-chapter__item {
	margin: 0;
}

.cc-chapter__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.cc-chapter__frame {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 2px;
	background: rgb(247 242 235 / 0.06);
}

.cc-chapter__frame img {
	display: block;
	width: 100%;
	height: auto;
	/* Matches the stored crop, so object-fit never cuts a second time. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform var(--cc-t-slow) var(--cc-ease-out);
}

.cc-chapter__link:where(:hover, :focus-visible) .cc-chapter__frame img {
	transform: scale(1.035);
}

.cc-chapter__caption {
	display: grid;
	gap: 0.4rem;
	margin-top: 1.15rem;
}

.cc-chapter__cat {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: var(--cc-track-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--ember-light);
}

.cc-chapter__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	font-weight: 300;
	line-height: 1.2;
	color: var(--wp--preset--color--canvas);
}

.cc-chapter__line {
	max-width: 40ch;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgb(247 242 235 / 0.74);
}

.cc-chapter__link:where(:hover, :focus-visible) .cc-chapter__name {
	color: var(--wp--preset--color--ember-light);
}

@media (prefers-reduced-motion: reduce) {
	/* Substitute, do not simply remove: the hover still has to register. */
	.cc-chapter__link:where(:hover, :focus-visible) .cc-chapter__frame img {
		transform: none;
		opacity: 0.86;
	}
}

/* ----------------------------------------------------------------- 9c --- */
/* Quick view dialog                                                         */

.cc-dialog-open {
	overflow: hidden;
}

.cc-quick {
	width: min(64rem, calc(100vw - 2rem));
	max-width: none;
	max-height: min(86vh, 52rem);
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--charcoal);
	box-shadow: 0 40px 90px -30px rgba(24, 21, 18, 0.55);
	overflow: visible;
}

.cc-quick::backdrop {
	background: rgba(24, 21, 18, 0.62);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.cc-quick[open] {
	animation: cc-quick-in var(--cc-t-slow) var(--cc-ease-out) both;
}

.cc-quick[open]::backdrop {
	animation: cc-fade-in var(--cc-t) var(--cc-ease) both;
}

@keyframes cc-quick-in {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

@keyframes cc-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.cc-quick__shell {
	position: relative;
	max-height: inherit;
	border-radius: inherit;
	overflow: hidden;
}

.cc-quick__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--cc-rule);
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--canvas) 88%, transparent);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background-color var(--cc-t) var(--cc-ease), transform var(--cc-t) var(--cc-ease);
}

.cc-quick__close:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--canvas);
	transform: rotate(90deg);
}

/*
 * Narrow screens: ordinary block flow inside a scrolling box. As a grid the
 * panel would size its rows to the constrained height and squash the media
 * track below the photograph's aspect ratio, which then spills over the
 * thumbnails. Block flow lets the content be its natural height and scroll.
 */
.cc-quick__panel {
	display: block;
	max-height: min(86vh, 52rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cc-quick__panel[hidden] {
	display: none;
}

@media (min-width: 800px) {
	.cc-quick__panel {
		display: grid;
		grid-template-columns: 1.05fr 1fr;
		overflow: hidden;
	}
}

/* --- gallery ------------------------------------------------------------- */

/*
 * On narrow screens the panel is a single scrolling column, so both rows size
 * to their content and the stage keeps its 4:5 shape. A `1fr` row here would
 * be squeezed shorter than the aspect ratio demands and the photograph would
 * spill over the thumbnail strip.
 */
.cc-quick__media {
	display: grid;
	grid-template-rows: auto auto;
	gap: 0.65rem;
	padding: 0.65rem;
	background: var(--wp--preset--color--shell);
	min-height: 0;
}

.cc-quick__stage {
	position: relative;
	border-radius: 2px;
	overflow: hidden;
	background: var(--wp--preset--color--shell);
	aspect-ratio: 4 / 5;
}

@media (min-width: 800px) {
	/* Two fixed-height columns: the stage now fills whatever is left after the
	   thumbnails, so it must be free to shrink — hence minmax(0, 1fr). */
	.cc-quick__media {
		grid-template-rows: minmax(0, 1fr) auto;
	}

	.cc-quick__stage {
		aspect-ratio: auto;
		min-height: 0;
	}
}

.cc-quick__shot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--cc-t-slow) var(--cc-ease), visibility 0s linear 0.45s;
}

.cc-quick__shot.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--cc-t-slow) var(--cc-ease), visibility 0s;
}

.cc-quick__thumbs {
	display: flex;
	gap: 0.4rem;
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: 0.15rem;
}

.cc-quick__thumb {
	flex: 0 0 auto;
	width: 3.65rem;
	padding: 0;
	border: 0;
	border-radius: 2px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity var(--cc-t) var(--cc-ease), box-shadow var(--cc-t) var(--cc-ease);
	box-shadow: inset 0 0 0 1px rgba(34, 31, 28, 0.1);
}

.cc-quick__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.cc-quick__thumb:hover {
	opacity: 0.85;
}

.cc-quick__thumb.is-active {
	opacity: 1;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--ember);
}

/* --- detail -------------------------------------------------------------- */

.cc-quick__body {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	padding-right: clamp(1.5rem, 3vw, 2.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cc-quick__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.cc-quick__blurb {
	margin: 0;
	font-size: 1rem;
	line-height: 1.62;
	color: var(--wp--preset--color--stone);
}

.cc-quick__spec {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: 0.9rem;
	margin: 0.35rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--cc-rule);
}

.cc-quick__spec dt {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
	margin-bottom: 0.3rem;
}

.cc-quick__spec dd {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
}

.cc-quick__variant-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
	margin: 0 0 0.5rem;
}

.cc-quick__variant-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-quick__variant-list li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--cc-rule);
	border-radius: 999px;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--charcoal);
}

.cc-quick__note {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--stone);
}

.cc-quick__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem;
	margin-top: auto;
	padding-top: 0.5rem;
}

.cc-quick__next {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--stone);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--cc-t) var(--cc-ease), gap var(--cc-t) var(--cc-ease);
}

.cc-quick__next:hover {
	color: var(--wp--preset--color--ink);
	gap: 0.7rem;
}


/* ----------------------------------------------------------------- 10 --- */
/* Editorial blocks                                                          */

/* Framed manifesto box — hairline rule with an ember corner tick. */
.wp-block-group.is-style-craftcore-framed {
	position: relative;
	border: 1px solid var(--cc-rule);
	padding: clamp(1.75rem, 4vw, 3rem);
}

.is-style-craftcore-framed::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	width: 2.5rem;
	height: 2.5rem;
	border-top: 2px solid var(--wp--preset--color--ember);
	border-left: 2px solid var(--wp--preset--color--ember);
	pointer-events: none;
}

/* Principle / fact block: a hairline above a numeral, title and note. */
.cc-def {
	padding-top: 1.1rem;
	border-top: 1px solid var(--cc-rule);
}

.cc-def__num {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--clay);
	margin-bottom: 0.6rem;
}

.cc-def__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.5rem;
}

.cc-def__text {
	font-size: 0.9375rem;
	line-height: 1.62;
	color: var(--wp--preset--color--stone);
	margin: 0;
}

/* Big pull statement set in the display face. */
.cc-statement {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 1rem + 2.4vw, 2.375rem);
	font-weight: 300;
	line-height: 1.28;
	letter-spacing: -0.018em;
	color: var(--wp--preset--color--ink);
}

.cc-on-ink .cc-statement {
	color: var(--wp--preset--color--canvas);
}

/* --- Dark-surface inversions -------------------------------------------
 * Everything below re-points the light-surface colours onto the ink band.
 * Ratios against #212527: canvas 13.9:1, canvas@78% 9.0:1, ember-light 5.4:1
 * — all comfortably past WCAG AA for their text sizes. Plain `ember` is only
 * 3.4:1 on ink, so it is never used for text there.
 */
.cc-on-ink {
	--cc-rule: color-mix(in srgb, var(--wp--preset--color--canvas) 22%, transparent);
	--cc-rule-strong: color-mix(in srgb, var(--wp--preset--color--canvas) 40%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.cc-on-ink {
		--cc-rule: rgba(247, 242, 235, 0.22);
		--cc-rule-strong: rgba(247, 242, 235, 0.4);
	}
}

.cc-on-ink .cc-def__num {
	color: color-mix(in srgb, var(--wp--preset--color--canvas) 55%, transparent);
}

.cc-on-ink .cc-stat__value {
	color: var(--wp--preset--color--canvas);
}

.cc-on-ink .cc-def__title,
.cc-on-ink .cc-card__name {
	color: var(--wp--preset--color--canvas);
}

.cc-on-ink .cc-def__text,
.cc-on-ink .cc-card__note,
.cc-on-ink .cc-card__kicker,
.cc-on-ink .cc-stat__label {
	color: #c9c1b6; /* canvas 78% on ink — 9.0:1 */
	color: color-mix(in srgb, var(--wp--preset--color--canvas) 78%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.cc-on-ink .cc-def__text,
	.cc-on-ink .cc-card__note,
	.cc-on-ink .cc-card__kicker,
	.cc-on-ink .cc-stat__label {
		color: #c9c1b6;
	}
}

.cc-on-ink .cc-card__link {
	color: var(--wp--preset--color--ember-light);
}

.cc-on-ink .cc-card__link:where(:hover, :focus-visible) {
	color: var(--wp--preset--color--canvas);
	border-bottom-color: var(--wp--preset--color--ember-light);
}

/* Assurances: four flat statements, no icons. Icons here would read as a
   template's "why choose us" band, which is the opposite of the intent. */
.cc-assurances__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: clamp(1.75rem, 3.5vw, 3rem);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.cc-assurance__label {
	margin: 0 0 0.55rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--wp--preset--color--clay);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: var(--cc-track-heading);
	color: var(--wp--preset--color--ink);
}

/* Charcoal, not stone: stone is tuned against canvas (5.37:1) and only reaches
   4.22:1 on the darker linen band. Charcoal gets it to 8.2:1. */
.cc-assurance__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--charcoal);
}

/*
 * The signature block. A one-person studio's strongest asset is being a person,
 * and the first-person voice plus a signed name delivers most of that without
 * anyone having to appear on camera. The brand's own figure stands in for a
 * portrait: it is already the studio's avatar, and it costs 1.4 KB.
 */
.cc-signature {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--cc-rule);
}

.cc-signature__mark {
	width: 2.6rem;
	height: 2.6rem;
	flex: none;
	opacity: 0.9;
}

.cc-signature__name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: var(--cc-track-heading);
	color: var(--wp--preset--color--ink);
}

.cc-signature__role {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--stone);
}

/* Story section: studio facts. */
.cc-stat__value {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.cc-stat__label {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}

/* ----------------------------------------------------------------- 11 --- */
/* Custom block styles                                                       */

/* Image — Plinth */
.wp-block-image.is-style-craftcore-plinth img {
	border-radius: 2px;
	box-shadow: var(--wp--preset--shadow--plinth);
}

/* Image — Arch: a sculptural rounded top, echoing the logo curve.
   The hairline keeps the arch legible where the photograph's own corners are
   already near the page colour — without it the silhouette reads as a crop
   on one side and disappears on the other. */
.wp-block-image.is-style-craftcore-arch img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 50vw 50vw 3px 3px;
	box-shadow: 0 0 0 1px var(--cc-rule);
}

/* Separator — Hairline */
.wp-block-separator.is-style-craftcore-hairline {
	border: 0;
	border-top: 1px solid var(--cc-rule);
	opacity: 1;
	width: 100%;
	max-width: none;
}

/* Separator — Arc: a small centred nod to the mark. */
.wp-block-separator.is-style-craftcore-arc {
	border: 0;
	height: 2.25rem;
	width: 100%;
	max-width: none;
	opacity: 1;
	background: var(--cc-arc) center / auto 100% no-repeat;
}

/* List — Ember ticks */
.wp-block-list.is-style-craftcore-ticks {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-craftcore-ticks li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.6rem;
}

.wp-block-list.is-style-craftcore-ticks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.7rem;
	height: 1px;
	background: var(--wp--preset--color--ember);
}

/* ----------------------------------------------------------------- 12 --- */
/* Footer                                                                    */

/*
 * Every colour here is declared twice: a resolved literal first, then the
 * color-mix() upgrade. Without the literal, a browser that lacks color-mix()
 * drops the whole declaration and inherits dark body text onto the charcoal
 * footer — about 1.5:1, effectively invisible. The literals are the mixes
 * pre-computed against #212527.
 */
.cc-footer {
	color: #cbc3b8; /* canvas 82% on ink — 9.4:1 */
	color: color-mix(in srgb, var(--wp--preset--color--canvas) 82%, transparent);
}

.cc-footer :is(h2, h3, h4) {
	color: var(--wp--preset--color--canvas);
}

.cc-footer a {
	color: #cbc3b8;
	color: color-mix(in srgb, var(--wp--preset--color--canvas) 82%, transparent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--cc-t) var(--cc-ease), border-color var(--cc-t) var(--cc-ease);
}

.cc-footer a:where(:hover, :focus-visible) {
	color: var(--wp--preset--color--white);
	border-bottom-color: var(--wp--preset--color--ember-light);
}

.cc-footer__logo {
	margin: 0;
}

.cc-footer__logo img {
	width: 186px;
	max-width: 58vw;
	height: auto;
	aspect-ratio: 674 / 220;
}

.cc-footer__label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #9c9184; /* canvas 58% on ink — 5.1:1 */
	color: color-mix(in srgb, var(--wp--preset--color--canvas) 58%, transparent);
	margin: 0 0 1rem;
}

.cc-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
	font-size: 0.9375rem;
}

.cc-footer__rule {
	border: 0;
	border-top: 1px solid #403a34;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--canvas) 16%, transparent);
	margin: 0;
}

.cc-footer__fine {
	font-size: 0.8125rem;
	color: #a0968a; /* canvas 60% on ink — 5.3:1 */
	color: color-mix(in srgb, var(--wp--preset--color--canvas) 60%, transparent);
}

/* Core social links, logos-only, in the Connect section. */
.cc-social.is-style-logos-only .wp-social-link {
	transition: transform var(--cc-t) var(--cc-ease), opacity var(--cc-t) var(--cc-ease);
}

.cc-social.is-style-logos-only .wp-social-link:hover {
	transform: translateY(-3px);
	opacity: 1;
}

.cc-social.is-style-logos-only .wp-social-link:hover a {
	color: var(--wp--preset--color--ember);
}

/* --------------------------------------------------------------- 12b --- */
/* Core block trim                                                           */

/* Search field, used on the 404 and search templates. */
.wp-block-search__input {
	border: 1px solid var(--cc-rule-strong);
	border-radius: 3px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	padding: 0.85rem 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
}

.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--stone);
	opacity: 1;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
	max-width: 30rem;
}

.wp-block-search__button {
	background: var(--wp--preset--color--ember);
	border: 1px solid var(--wp--preset--color--ember);
	border-radius: 3px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	padding: 0.7rem 1.15rem;
	transition: background-color var(--cc-t) var(--cc-ease);
}

.wp-block-search__button:where(:hover, :focus) {
	background: var(--wp--preset--color--ember-deep);
	border-color: var(--wp--preset--color--ember-deep);
}

/* Query pagination + post navigation. */
.wp-block-query-pagination,
.wp-block-post-navigation-link {
	font-size: 0.875rem;
	letter-spacing: 0.02em;
}

.wp-block-query-pagination .page-numbers {
	padding: 0.2rem 0.55rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.wp-block-query-pagination .page-numbers.current {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--ember);
}

/* Warm band: hairlines top and bottom give the shell section a printed edge. */
.cc-band {
	border-top: 1px solid var(--cc-rule);
	border-bottom: 1px solid var(--cc-rule);
}

/* Featured images reused as card media in the blog templates. */
.wp-block-post-featured-image.cc-card__media img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* ----------------------------------------------------------------- 13 --- */
/* Motion                                                                    */

/* The reveal state only exists once the script has opted in, so a visitor
   without JavaScript — and the block editor — always sees the content. */
html[data-cc-reveal='ready'] .cc-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--cc-t-slow) var(--cc-ease-out), transform var(--cc-t-slow) var(--cc-ease-out);
	transition-delay: var(--cc-reveal-delay, 0ms);
}

/* Stagger the product grid so it does not arrive as one slab. */
html[data-cc-reveal='ready'] .cc-grid-stagger > .cc-reveal:nth-child(2) { --cc-reveal-delay: 70ms; }
html[data-cc-reveal='ready'] .cc-grid-stagger > .cc-reveal:nth-child(3) { --cc-reveal-delay: 140ms; }
html[data-cc-reveal='ready'] .cc-grid-stagger > .cc-reveal:nth-child(4) { --cc-reveal-delay: 210ms; }
html[data-cc-reveal='ready'] .cc-grid-stagger > .cc-reveal:nth-child(5) { --cc-reveal-delay: 70ms; }
html[data-cc-reveal='ready'] .cc-grid-stagger > .cc-reveal:nth-child(6) { --cc-reveal-delay: 140ms; }
html[data-cc-reveal='ready'] .cc-grid-stagger > .cc-reveal:nth-child(7) { --cc-reveal-delay: 210ms; }
html[data-cc-reveal='ready'] .cc-grid-stagger > .cc-reveal:nth-child(8) { --cc-reveal-delay: 280ms; }

html[data-cc-reveal='ready'] .cc-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	/*
	 * A substitution contract rather than a blanket kill. Opacity crossfades
	 * are comfortable for vestibular users and keep the page feeling alive;
	 * it is translation, scaling and parallax that cause trouble. So those go,
	 * and fades stay.
	 */
	*,
	*::before,
	*::after {
		animation-duration: var(--cc-t) !important;
		animation-iteration-count: 1 !important;
		transition-duration: var(--cc-t) !important;
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		transition-property: opacity, color, background-color, border-color, box-shadow !important;
	}

	html[data-cc-reveal='ready'] .cc-reveal {
		opacity: 1;
		transform: none;
	}

	.cc-card:hover .cc-card__media,
	.cc-card:hover .cc-card__media img,
	.wp-block-button__link:hover {
		transform: none;
	}

	.cc-dot,
	.cc-hero__arc-dot,
	.cc-lab__pulse {
		animation: none;
	}

	.cc-door__card,
	.cc-door__art,
	.cc-hero__object img,
	.cc-hero__phone .cc-phone {
		transition: none;
	}
}

/* ----------------------------------------------------------------- 14 --- */
/* Editor + print                                                            */

/*
 * Front-end-only treatments, switched off inside the block editor.
 *
 * Two selector forms are needed on purpose. The iframed Site Editor puts
 * `editor-styles-wrapper` on the canvas <body> itself and injects these rules
 * verbatim; the non-iframed editor instead prefixes every selector with
 * `.editor-styles-wrapper`. Writing only one form silently matches neither.
 */

/* A fixed, full-viewport grain layer can escape the editor canvas. */
body.editor-styles-wrapper::before,
.editor-styles-wrapper::before,
.editor-styles-wrapper body::before {
	display: none !important;
}

/* A sticky header inside the canvas fights the editor's own scrolling. */
body.editor-styles-wrapper .cc-header,
.editor-styles-wrapper .cc-header {
	position: static;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* In the editor the header is static and in flow, so the hero must not be
   pulled up underneath it — that would slide it behind the toolbar. */
body.editor-styles-wrapper .cc-hero,
.editor-styles-wrapper .cc-hero {
	margin-top: 0;
}

body.editor-styles-wrapper .cc-hero__frame,
.editor-styles-wrapper .cc-hero__frame {
	min-height: 32rem;
}

body.editor-styles-wrapper .cc-hero--home .cc-hero__inner,
.editor-styles-wrapper .cc-hero--home .cc-hero__inner,
body.editor-styles-wrapper .cc-hero--apps .cc-hero__inner,
.editor-styles-wrapper .cc-hero--apps .cc-hero__inner {
	min-height: 0;
	padding-top: clamp(2.5rem, 7vh, 5rem);
}

@media print {
	/* Never let the scroll-reveal state hide content from a printer. */
	html[data-cc-reveal='ready'] .cc-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	body::before,
	.cc-header,
	.cc-footer,
	.cc-hero__actions,
	.wp-block-button {
		display: none !important;
	}

	.wp-site-blocks {
		color: #000;
	}

	a[href^='http']::after {
		content: ' (' attr(href) ')';
		font-size: 0.75em;
		word-break: break-all;
	}
}

/* ----------------------------------------------------------------- 15 --- */
/* Doors — Objects and Apps                                                  */

/*
 * Two entry cards, full width, no gap between them: the page literally splits
 * in two. The functional-art door is ink with three pieces fanned across its
 * right half; the apps door is the app's own cream with its cut-paper art in
 * the same place. Same composition, different materials — which is the point.
 */
.cc-doors__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cc-door {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(24rem, 40vw, 32rem);
	padding: clamp(2rem, 4.5vw, 3.75rem) var(--cc-gutter);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

/* The second door's inner edge sits on the same line as the first's. */
@media (min-width: 800px) {
	.cc-door:first-child {
		padding-left: max(var(--cc-gutter), calc((100vw - var(--wp--style--global--wide-size)) / 2));
	}

	.cc-door:last-child {
		padding-right: max(var(--cc-gutter), calc((100vw - var(--wp--style--global--wide-size)) / 2));
	}
}

.cc-door--art {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--canvas);
}

.cc-door--apps {
	background: var(--app-bg, var(--wp--preset--color--shell));
	color: var(--app-ink, var(--wp--preset--color--ink));
}

.cc-door__body {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 0.55rem;
	max-width: 24rem;
}

.cc-door__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: var(--cc-track-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--ember-light);
}

.cc-door--apps .cc-door__kicker {
	color: var(--app-muted, var(--wp--preset--color--stone));
}

.cc-door__icon {
	width: 1.75rem;
	height: 1.75rem;
	flex: none;
}

.cc-door__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.4rem, 4.6vw, 3.8rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: var(--cc-track-display);
	transition: color var(--cc-t) var(--cc-ease);
}

.cc-door--apps .cc-door__title {
	font-weight: 500;
}

.cc-door__line {
	font-size: 0.98rem;
	line-height: 1.6;
	color: rgb(247 242 235 / 0.8);
}

.cc-door--apps .cc-door__line {
	color: var(--app-muted, var(--wp--preset--color--stone));
}

.cc-door__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: 0.6rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--canvas);
	transition: gap var(--cc-t) var(--cc-ease);
}

.cc-door--apps .cc-door__cta {
	color: var(--app-ink, var(--wp--preset--color--ink));
}

.cc-door__cta svg {
	transition: transform var(--cc-t) var(--cc-ease-out);
}

.cc-door:where(:hover, :focus-visible) .cc-door__cta {
	gap: 0.85rem;
}

.cc-door--art:where(:hover, :focus-visible) .cc-door__title {
	color: var(--wp--preset--color--ember-light);
}

.cc-door--apps:where(:hover, :focus-visible) .cc-door__title {
	color: var(--app-ink-2, var(--wp--preset--color--ember-deep));
}

/* --- the fan of product cards -------------------------------------------- */

.cc-door__fan {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.cc-door__card {
	position: absolute;
	width: 31%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 3px;
	box-shadow:
		0 0 0 1px rgb(247 242 235 / 0.1),
		0 30px 50px -22px rgb(0 0 0 / 0.8);
	transition: transform var(--cc-t-slow) var(--cc-ease-out);
}

/* Fanned across the upper right, the way the app door fans its art. */
.cc-door__card:nth-child(1) {
	right: 42%;
	top: 12%;
	transform: rotate(-9deg);
}

.cc-door__card:nth-child(2) {
	right: 19%;
	top: 5%;
	transform: rotate(3deg);
	z-index: 1;
}

.cc-door__card:nth-child(3) {
	right: -3%;
	top: 15%;
	transform: rotate(12deg);
}

.cc-door--art:where(:hover, :focus-visible) .cc-door__card:nth-child(1) { transform: rotate(-12deg) translateY(-6px); }
.cc-door--art:where(:hover, :focus-visible) .cc-door__card:nth-child(2) { transform: rotate(1deg) translateY(-10px); }
.cc-door--art:where(:hover, :focus-visible) .cc-door__card:nth-child(3) { transform: rotate(15deg) translateY(-6px); }

/* A soft ink wash under the copy, so the fan never fights the words. Kept
   off the top-right, where the cards are, so they read at full strength. */
.cc-door--art::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to top, rgb(20 18 16 / 0.94) 0%, rgb(20 18 16 / 0.78) 30%, rgb(20 18 16 / 0.28) 55%, rgb(20 18 16 / 0) 78%),
		linear-gradient(to right, rgb(20 18 16 / 0.75) 0%, rgb(20 18 16 / 0.3) 38%, rgb(20 18 16 / 0) 58%);
}

/* --- the cut-paper art --------------------------------------------------- */

.cc-door__art {
	position: absolute;
	right: -3%;
	top: -8%;
	width: 58%;
	height: auto;
	z-index: 0;
	pointer-events: none;
	transition: transform var(--cc-t-slow) var(--cc-ease-out);
}

.cc-door--apps:where(:hover, :focus-visible) .cc-door__art {
	transform: translateY(-6px) rotate(-1.5deg);
}

.cc-door--apps::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, var(--app-bg, #F9F3E6) 0%, rgb(249 243 230 / 0.85) 30%, rgb(249 243 230 / 0) 62%);
}

@media (max-width: 799px) {
	.cc-doors__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Taller, so the fan sits in the upper half and the words in the lower. */
	.cc-door {
		min-height: clamp(26rem, 110vw, 30rem);
	}

	.cc-door__body {
		max-width: 22rem;
	}

	.cc-door__card {
		width: 34%;
	}

	.cc-door__card:nth-child(1) { right: 46%; top: 7%; }
	.cc-door__card:nth-child(2) { right: 21%; top: 3%; }
	.cc-door__card:nth-child(3) { right: -4%; top: 10%; }

	.cc-door__art {
		width: 54%;
		top: -6%;
		right: -4%;
	}
}

/* ----------------------------------------------------------------- 16 --- */
/* App feature — one app, its own colours                                    */

/*
 * The wrapper publishes the app's palette as --app-* custom properties (see
 * craftcore_app_style()). Nothing below names a colour; it all reads from
 * those, so the next app arrives already dressed.
 */
.cc-app {
	--cc-rule: color-mix(in srgb, var(--app-ink, #0B1C68) 16%, transparent);
	--cc-rule-strong: color-mix(in srgb, var(--app-ink, #0B1C68) 34%, transparent);
	background: var(--app-bg, var(--wp--preset--color--shell));
	color: var(--app-ink, var(--wp--preset--color--ink));
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.cc-app {
		--cc-rule: rgba(11, 28, 104, 0.16);
		--cc-rule-strong: rgba(11, 28, 104, 0.34);
	}
}

.cc-app-feature {
	padding-block: var(--wp--preset--spacing--70);
	overflow: clip;
	border-top: 1px solid var(--cc-rule);
}

.cc-app-feature__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: center;
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--cc-gutter));
	margin-inline: auto;
	padding-inline: var(--cc-gutter);
}

.cc-app__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem;
	margin: 0 0 1.4rem;
}

.cc-app__icon {
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
}

.cc-app__eyebrow-text {
	display: grid;
	gap: 0.1rem;
}

.cc-app__eyebrow-kicker {
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: var(--cc-track-label);
	text-transform: uppercase;
	color: var(--app-muted, var(--wp--preset--color--stone));
}

.cc-app__eyebrow-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--app-ink);
}

/* The status pill — "Coming soon", "Now available". */
.cc-app__status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	border: 1px solid var(--cc-rule-strong);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--app-ink);
}

.cc-app__status::before {
	content: '';
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--app-accent, var(--wp--preset--color--ember));
}

/*
 * The app's headline carries the display face at a heavier weight than the
 * studio uses anywhere else. Same type family, so it reads as "from the same
 * studio"; different weight and colour, so it reads as its own product.
 */
.cc-app__hook {
	margin: 0;
	max-width: 14ch;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 4.6vw, 3.5rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.024em;
	color: var(--app-ink);
	text-wrap: balance;
}

.cc-app__lede {
	margin: clamp(1.1rem, 2.4vw, 1.6rem) 0 0;
	max-width: 52ch;
	font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
	line-height: 1.62;
	color: var(--app-muted, var(--wp--preset--color--stone));
}

.cc-app__features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 2rem;
	margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.cc-app__feature {
	display: flex;
	gap: 0.8rem;
	align-items: flex-start;
}

/* A small gold tile, tilted: the app's own accent, in the app's own shape. */
.cc-app__feature-mark {
	flex: none;
	width: 0.7rem;
	height: 0.7rem;
	margin-top: 0.42rem;
	border-radius: 2px;
	background: var(--app-accent, var(--wp--preset--color--ember));
	transform: rotate(12deg);
}

.cc-app__feature-label {
	display: block;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--app-ink);
	margin-bottom: 0.25rem;
}

.cc-app__feature-text {
	display: block;
	font-size: 0.9rem;
	line-height: 1.58;
	color: var(--app-muted, var(--wp--preset--color--stone));
}

.cc-app__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.25rem;
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* The app's own button shape: a pill, like the ones inside it. */
.cc-app__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.95rem 1.6rem;
	border-radius: 999px;
	background: var(--app-ink);
	color: var(--app-bg, #fff);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color var(--cc-t) var(--cc-ease), transform var(--cc-t) var(--cc-ease), box-shadow var(--cc-t) var(--cc-ease);
}

.cc-app__cta svg {
	transition: transform var(--cc-t) var(--cc-ease-out);
}

.cc-app__cta:where(:hover, :focus-visible) {
	background: var(--app-ink-2, var(--app-ink));
	color: var(--app-bg, #fff);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -14px var(--app-ink);
}

.cc-app__cta:where(:hover, :focus-visible) svg {
	transform: translate(2px, -2px);
}

/* A second store button, outlined, so two never compete. */
.cc-app__cta--ghost {
	background: transparent;
	color: var(--app-ink);
	box-shadow: inset 0 0 0 1px var(--cc-rule-strong);
}

.cc-app__cta--ghost:where(:hover, :focus-visible) {
	background: var(--app-ink);
	color: var(--app-bg, #fff);
}

/* Where it is going next: phones first, then wrists. */
.cc-app__platforms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.cc-app__soon {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 0.95rem;
	border-radius: 999px;
	border: 1px solid var(--cc-rule-strong);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--app-muted, var(--wp--preset--color--stone));
}

.cc-app__more {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--app-ink-2, var(--app-ink));
	text-decoration: none;
	border-bottom: 1px solid var(--cc-rule-strong);
	padding-bottom: 2px;
	transition: border-color var(--cc-t) var(--cc-ease);
}

.cc-app__more:where(:hover, :focus-visible) {
	color: var(--app-ink);
	border-bottom-color: var(--app-accent, var(--app-ink));
}

.cc-app__fine {
	margin: 1.4rem 0 0;
	font-size: 0.78rem;
	color: var(--app-muted, var(--wp--preset--color--stone));
}

.cc-app :where(a, button):focus-visible {
	outline-color: var(--app-ink-2, var(--app-ink));
}

/* --- the screens --------------------------------------------------------- */

.cc-app-feature__visual {
	position: relative;
	width: 100%;
	max-width: 32rem;
	margin-inline: auto;
	aspect-ratio: 1 / 1.02;
}

.cc-app__art {
	position: absolute;
	top: -6%;
	right: -8%;
	width: 72%;
	height: auto;
	z-index: 0;
	pointer-events: none;
}

.cc-app__screens {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 5%;
	padding: 0 4%;
}

.cc-app__screen {
	margin: 0;
	flex: 0 1 44%;
}

.cc-app__screens--2 .cc-app__screen:nth-child(1) {
	transform: translateY(-9%);
}

.cc-app__screens--2 .cc-app__screen:nth-child(2) {
	transform: translateY(4%);
}

.cc-app__screens--3 {
	justify-content: center;
	gap: 3%;
	padding: 0;
}

.cc-app__screens--3 .cc-app__screen {
	flex: 0 1 31%;
}

.cc-app__screens--3 .cc-app__screen:nth-child(1) { transform: translateY(2%); }
.cc-app__screens--3 .cc-app__screen:nth-child(2) { transform: translateY(-7%); }
.cc-app__screens--3 .cc-app__screen:nth-child(3) { transform: translateY(4%); }

.cc-app__screens--1 .cc-app__screen {
	flex-basis: 50%;
	margin-inline: auto;
}

@media (max-width: 899px) {
	.cc-app-feature__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.cc-app-feature__visual {
		max-width: 26rem;
	}
}

@media (max-width: 599px) {
	.cc-app__features {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ----------------------------------------------------------------- 17 --- */
/* Why functional art — the reasons                                          */

.cc-reasons {
	display: grid;
	gap: 1.4rem;
	margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.cc-reason {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	align-items: baseline;
	padding-top: 1.1rem;
	border-top: 1px solid var(--cc-rule);
}

.cc-reason__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--ember-deep);
	font-variant-numeric: tabular-nums;
}

.cc-reason__body {
	display: grid;
	gap: 0.35rem;
}

.cc-reason__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
}

.cc-reason__text {
	font-size: 0.95rem;
	line-height: 1.62;
	color: var(--wp--preset--color--stone);
}

/* The piece beside the reasons: arched, like the About photograph. */
.cc-benefits__figure {
	margin: 0;
}

.cc-benefits__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.cc-benefits__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 50vw 50vw 3px 3px;
	background: var(--wp--preset--color--oyster);
	box-shadow: 0 0 0 1px var(--cc-rule), var(--wp--preset--shadow--plinth);
	transition: transform var(--cc-t-slow) var(--cc-ease-out), box-shadow var(--cc-t-slow) var(--cc-ease);
}

.cc-benefits__link:where(:hover, :focus-visible) .cc-benefits__img {
	transform: translateY(-4px);
	box-shadow: 0 0 0 1px var(--cc-rule), var(--wp--preset--shadow--lifted);
}

.cc-benefits__caption {
	display: grid;
	gap: 0.2rem;
	margin-top: 1rem;
	padding-left: 1rem;
	border-left: 2px solid var(--wp--preset--color--ember);
}

.cc-benefits__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.cc-benefits__note {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--wp--preset--color--stone);
}

/* ----------------------------------------------------------------- 18 --- */
/* The in-the-works strip, and other small furniture                         */

.cc-lab__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.5rem clamp(2rem, 5vw, 4rem);
	align-items: baseline;
	padding-top: 1.5rem;
	border-top: 1px solid var(--cc-rule);
}

.cc-lab__label {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: var(--cc-track-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
	white-space: nowrap;
}

.cc-lab__pulse {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--wp--preset--color--ember);
	animation: cc-dot-breathe 2.4s var(--cc-ease) infinite;
}

.cc-lab__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem clamp(1.75rem, 4vw, 3.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-lab__item {
	display: grid;
	gap: 0.15rem;
}

.cc-lab__what {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.cc-lab__state {
	font-size: 0.82rem;
	color: var(--wp--preset--color--stone);
}

@media (max-width: 599px) {
	.cc-lab__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}
}

/* Heading emphasis: the studio's one point of colour, in running headings. */
h1 em,
h2 em,
.cc-statement em {
	font-style: normal;
	color: var(--wp--preset--color--ember-deep);
}

.cc-on-ink h1 em,
.cc-on-ink h2 em,
.cc-on-ink .cc-statement em {
	color: var(--wp--preset--color--ember-light);
}

/* A wider reading measure, for the manifesto statement. */
.cc-measure--wide {
	max-width: 56rem;
}

/* The collection's foot: the Etsy button and the "see all" link side by side. */
.cc-collection__more {
	margin: 0;
	font-size: 0.9rem;
}

.cc-collection__more a {
	color: var(--wp--preset--color--stone);
	text-decoration: none;
	border-bottom: 1px solid var(--cc-rule-strong);
	padding-bottom: 2px;
	transition: color var(--cc-t) var(--cc-ease), border-color var(--cc-t) var(--cc-ease);
}

.cc-collection__more a:where(:hover, :focus-visible) {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--ember);
}

/* The "next app" framed note on the Apps page sits left, not centred. */
.cc-next-app {
	margin-left: 0;
}

.cc-on-ink .is-style-craftcore-framed :is(h2, h3, h4) {
	color: var(--wp--preset--color--canvas);
}

.cc-on-ink .is-style-craftcore-framed p {
	color: #c9c1b6;
	color: color-mix(in srgb, var(--wp--preset--color--canvas) 78%, transparent);
}