/*
 * Midnight Bold - the 12 September 2026 visual rebuild.
 *
 * WHY THIS FILE IS SMALL, AND WHY THAT IS THE POINT.
 *
 * assets/next.css is Tailwind's compiled output from the old Next.js project.
 * It cannot be recompiled here, and it is never hand-edited. But it declares its
 * whole palette, its radii and its three shadows as custom properties on :root,
 * and every captured class in the site - bg-cream, text-plum, bg-paper,
 * shadow-[var(--shadow-lift)] - reads them at use time.
 *
 * So the entire site is re-skinned by redefining those properties. No markup is
 * rewritten. The WooCommerce shop, product page, basket and checkout come along
 * for free, because theme.css already dresses them from the same properties.
 *
 * THE INVERSION IS CLEAN BECAUSE THE OLD NAMES CARRY SEMANTICS, NOT COLOURS.
 * --plum meant "text", --cream meant "the page", --paper meant "a card". Flip the
 * values and the whole site flips coherently. The dark promise band is the nicest
 * case: it is marked up bg-plum/text-cream, so it inverts by itself into a light
 * panel on a dark page - which is exactly the contrast that section always wanted.
 *
 * The names now read oddly - --plum holds an off-white, --butter holds acid
 * green - and that is deliberate. Renaming them would mean editing next.css,
 * which is the one thing this theme does not do. The names are addresses, not
 * descriptions.
 *
 * LOAD ORDER. next.css, then theme.css, then this. Last wins for the :root
 * declarations, which is what makes the redefinition take. Custom properties
 * resolve at computed-value time, so theme.css's own rules pick the new values
 * up regardless of the fact that it loaded first.
 */

/* ------------------------------------------------------------- the faces */

/*
 * Self-hosted, like the two before them. Google Fonts was removed from this
 * theme for speed in 1.0.14 and does not come back.
 *
 * THE ARITHMETIC, HONESTLY. The pair costs 57K. Inter is gone, which saves 48K,
 * but Quicksand stays at 28K because the inline logo names it directly - so the
 * page currently carries 85K of fonts against the 76K it used to. It only
 * becomes the 57K win once the wordmark is converted to outlines, which the
 * brand guide has wanted since v1 and which is the last thing keeping Quicksand
 * alive on this site.
 */
@font-face {
	font-family: 'Space Grotesk';
	src: url('fonts/space-grotesk-latin-var.woff2') format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Archivo';
	src: url('fonts/archivo-latin-var.woff2') format('woff2');
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------ the tokens */

:root {
	/* The new system, under its own names, so this file can be read. */
	--ink: #0f0f10;
	--surface: #141416;
	--raised: #1b1b1d;
	--line: #2a2a2c;
	--line-strong: #333336;
	--acid: #d7ff3e;
	--hot: #ff5a2b;
	--off-white: #f7f5ef;

	/*
	 * The old addresses, repointed. Left column is what next.css calls it and
	 * what the markup asks for; right is what it now means.
	 */
	--cream: #0f0f10;        /* the page */
	--paper: #141416;        /* a card */
	--plum: #f7f5ef;         /* text */
	--plum-muted: #a8a5a0;   /* secondary text */
	--plum-faint: #6f6c68;   /* tertiary text, placeholders */
	--hairline: #2a2a2c;     /* dividers */
	--rose: #d7ff3e;         /* eyebrows, links, small caps - now the accent */
	--butter: #d7ff3e;       /* the primary button */
	/*
	 * --mint is a SURFACE, not the accent - and it took the live site to prove
	 * why. It was pointed at acid so the marquee and the selected quantity tile
	 * would light up, which worked. But the footer is bg-mint/40 and the closing
	 * panel is bg-mint/50, and 40% acid over a near-black page is olive. The
	 * footer of a live shop went olive green.
	 *
	 * The lesson generalises: a token used at full strength AND at 40% cannot
	 * hold an accent. The two places that genuinely wanted the accent now ask
	 * for it by name, below.
	 */
	--mint: #1b1b1d;
	--blush: #1b1b1d;        /* tinted surfaces and the hero's ambient blobs */

	/* Sharper corners read as more premium than the old 16/22px. */
	--radius-card: 8px;
	--radius-panel: 10px;

	/*
	 * On a near-black page a drop shadow is invisible, so the three shadow
	 * tokens become rings. Every card in the captured markup already asks for
	 * one of them, which means every card gets its 1px border from this and
	 * nothing has to be marked up with a border at all.
	 */
	--shadow-soft: 0 0 0 1px #2a2a2c;
	--shadow-lift: 0 0 0 1px #333336, 0 6px 18px rgba(0, 0, 0, .45);
	--shadow-raise: 0 0 0 1px #3a3a3e, 0 14px 34px rgba(0, 0, 0, .55);

	/* Space Grotesk carries display and labels, Archivo carries running text.
	   The variable names are next.css's; the families are not. */

	/* HOVER. The repoint moved every rest state and missed every hover,
	   because the rest states read tokens and the hovers were literals from
	   the pastel palette - so a dark button turned PINK under the cursor.
	   theme.css reads these two with the old hex as its fallback, so the old
	   palette still behaves exactly as it did. */
	--blush-hover: #26262a;   /* a surface button, lifted */
	--butter-hover: #e6ff6b;  /* the accent, brighter */
	--error-bg: #2a1614;      /* an error, still on the dark ground */

	--font-quicksand: 'Space Grotesk';
	--font-inter: 'Archivo';

	/*
	 * The same two under honest names, for theme.css.
	 *
	 * theme.css dresses everything the capture never saw - WordPress page
	 * content and every WooCommerce screen - and it named Quicksand and Inter
	 * literally, in about a dozen rules. Repointing next.css's tokens therefore
	 * did nothing for the shop, the product page, the basket or the checkout:
	 * they kept the old faces while the home page changed. theme.css now reads
	 * these, with the old families still written in as the fallback so wp-admin,
	 * which never loads this file, is unaffected.
	 */
	--lc-display: 'Space Grotesk', system-ui, sans-serif;
	--lc-body: 'Archivo', system-ui, sans-serif;
}

/* --------------------------------------------------------------- the page */

html {
	background: var(--ink);
}

body {
	background: var(--cream);
	color: var(--plum);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--acid);
	color: var(--ink);
}

/* --------------------------------------------------------------- the type */

/*
 * Bigger, tighter, heavier. The captured markup sets its sizes with arbitrary
 * classes it is not worth fighting one by one; what carries the change is the
 * tracking and the weight on .font-display, plus a lift on the two headline
 * steps the design actually uses.
 */
.font-display {
	font-family: var(--font-quicksand), 'Space Grotesk', system-ui, sans-serif;
	letter-spacing: -.04em;
}

/*
 * The headline sizes are set here rather than in the markup because the sizes
 * the capture asks for - text-[2.75rem] and sm:text-6xl - are the old design's,
 * and the only larger steps Tailwind compiled are ones next.css may not contain.
 * An element+class selector beats the utility, and clamp() removes the
 * breakpoint from the argument entirely.
 */
h1.font-display {
	font-size: clamp(2.9rem, 6.4vw, 5.25rem);
	letter-spacing: -.055em;
	line-height: .88;
}

/*
 * The home hero is a router's hero, not a story's: it hands over to the four
 * doors below rather than filling the screen itself, so it takes a smaller
 * step than a category page's headline, which still wants the full size.
 */
h1.lc-hero-title {
	font-size: clamp(2.3rem, 4.2vw, 3.5rem);
	line-height: .95;
}

h2.font-display {
	font-size: clamp(2rem, 3.4vw, 3rem);
	letter-spacing: -.045em;
	line-height: .98;
}

/* The four doors are h2s so the page has one honest heading level below the
   hero, but they are card titles and must not take a section heading's size. */
h2.lc-door-title {
	font-size: 19px;
	line-height: 1.15;
	letter-spacing: -.025em;
}

/* The small uppercase labels - eyebrows, the strip, card feet - are the
   accent's main home outside buttons. */
.tracking-\[3px\],
.tracking-\[2px\] {
	font-family: var(--font-quicksand), 'Space Grotesk', system-ui, sans-serif;
	font-weight: 600;
}

/* ------------------------------------------------ where the inversion trips */

/*
 * THE ONE THING THE FLIP CANNOT DO BY ITSELF.
 *
 * --plum now holds an off-white, because it means "text on the page". An element
 * with a LIGHT background that also carries text-plum therefore ends up with
 * off-white text on acid, which is unreadable. That is the acid button, and the
 * two elements styled explicitly further down - the strip and a selected tile.
 *
 * The descendant selector is deliberate: those elements contain spans that set
 * text-plum and text-faint on themselves, and colour inherits, so setting the
 * parent alone is not enough.
 */
[class*="bg-butter"],
[class*="bg-butter"] * {
	color: var(--ink);
}

/* The inverted band: bg-plum is now a light panel, so its rule needs to darken
   rather than lighten. */
[class*="bg-plum"] .border-hairline,
[class*="bg-plum"] [class*="border-hairline"] {
	border-color: rgba(15, 15, 16, .14);
}

/* --------------------------------------------------------------- controls */

/*
 * Buttons lose the pill. A 4px corner is the single biggest thing separating
 * this from the old look, and the pill is only ever applied through
 * rounded-full, which the basket badge and the design tabs also use - so this
 * is targeted at the buttons themselves rather than at the utility.
 */
a[class*="bg-butter"],
a[class*="bg-plum"],
button[class*="bg-butter"],
button[class*="bg-plum"] {
	border-radius: 4px;
	font-weight: 600;
	letter-spacing: -.01em;
}

a[class*="bg-butter"]:hover,
button[class*="bg-butter"]:hover {
	background: var(--butter-hover);
}

/* THE THREE HOVER COLOURS BAKED INTO THE CAPTURE.

   next.css is compiled Tailwind and cannot be rebuilt, so its arbitrary
   hover classes carry pastel hex literals that no token can reach:
   butter #f9d96a on the money button, dark plum #5c4a4a and mint #aeddc4
   elsewhere. Each one has to be answered by name. */
[class*="hover\:bg-\[\#f9d96a\]"]:hover {
	background: var(--butter-hover) !important;
}

[class*="hover\:bg-\[\#5c4a4a\]"]:hover,
[class*="hover\:bg-\[\#aeddc4\]"]:hover {
	background: var(--blush-hover) !important;
	color: var(--plum) !important;
}

/* Text inputs: a card-coloured field with a real edge, not a floating pill. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
	border-radius: 6px;
	background: var(--raised);
	color: var(--plum);
	border: 1px solid var(--line);
}

input::placeholder,
textarea::placeholder {
	color: var(--plum-faint);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	outline: 2px solid var(--acid);
	outline-offset: 1px;
	border-color: transparent;
}

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

/* The header sits on the page rather than a cream wash. */
header[class*="bg-cream"] {
	background: rgba(15, 15, 16, .82);
	border-bottom: 1px solid var(--line);
}

/* The white photo mount stays white. On near-black it reads as a print laid on
   the page, which is the most flattering thing that can happen to a photograph
   of a white sheet of labels. */

/* Dashed rules keep the logo's cut line alive as the divider of choice. */
.border-dashed {
	border-color: var(--line-strong);
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* ------------------------------------------------------ the category cards */

/*
 * Four tinted panels, written here rather than with the colour utilities.
 *
 * The utilities read tokens this file has repointed, and bg-mint/bg-butter both
 * now resolve to acid - which would have put two full-bleed acid panels on the
 * home page and broken the one-accent rule the brand guide has always had. The
 * washes below keep a memory of the old blush, mint and periwinkle at the low
 * saturation a dark page can carry, and exactly one card gets the accent.
 */
.lc-tint {
	background: linear-gradient(142deg, var(--tint-from, #1d1d20), var(--surface));
	color: var(--plum-muted);
}

.lc-tint--kids     { --tint-from: #43282f; }
.lc-tint--business { --tint-from: #17392b; }
.lc-tint--fun      { --tint-from: #272a4a; }

/* The one card that carries the accent. */
.lc-tint--home {
	--tint-from: #495416;
	color: var(--acid);
}

.lc-cat-icon {
	width: 76px;
	height: 76px;
	opacity: .85;
}

.lc-tint--home .lc-cat-icon {
	opacity: 1;
}

/* ------------------------------------------------- the category landing page */

/*
 * The dispatch badge.
 *
 * Every category page states what happens after you press buy, in the hero,
 * before the products. It is the single most useful line on the page for three
 * of the four audiences: an impulse buyer wants "next working day" and a parent
 * wants to know the clock starts at their approval, not at checkout.
 */
.lc-badge {
	display: inline-block;
	padding: 7px 12px;
	border-radius: 4px;
	background: var(--raised);
	box-shadow: 0 0 0 1px var(--line);
	color: var(--acid);
	font-family: var(--font-quicksand), 'Space Grotesk', system-ui, sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* The category headline takes the full display step; only the home page's
   router hero takes the smaller one. */
.woocommerce-page h1.font-display,
.archive h1.font-display {
	font-size: clamp(2.2rem, 4vw, 3.4rem);
}

/* ------------------------------------------------------------ the calculator */

/*
 * The business lane's price calculator. Written here because none of it exists
 * in next.css - a pill with a subtitle and a three-line quantity tile were not
 * part of the original design, so the utilities for them were never compiled.
 */
.lc-calc-pill {
	cursor: pointer;
	padding: 10px 16px;
	border-radius: 4px;
	background: var(--raised);
	box-shadow: 0 0 0 1px var(--line);
	color: var(--plum);
	font-size: 13.5px;
	font-weight: 500;
	text-align: left;
	transition: box-shadow .15s ease, background .15s ease;
}

.lc-calc-pill small {
	display: block;
	margin-top: 3px;
	color: var(--plum-faint);
	font-size: 11.5px;
}

.lc-calc-pill:hover {
	box-shadow: 0 0 0 1px var(--line-strong);
}

.lc-calc-pill[aria-pressed="true"] {
	background: var(--acid);
	color: var(--ink);
	box-shadow: none;
}

.lc-calc-pill[aria-pressed="true"] small {
	color: rgba(15, 15, 16, .62);
}

.lc-calc-tile {
	cursor: pointer;
	padding: 14px 10px;
	border-radius: 4px;
	background: var(--raised);
	box-shadow: 0 0 0 1px var(--line);
	color: var(--plum);
	text-align: center;
	transition: box-shadow .15s ease, background .15s ease;
}

.lc-calc-tile strong {
	display: block;
	font-family: var(--font-quicksand), 'Space Grotesk', system-ui, sans-serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.lc-calc-tile span {
	display: block;
	margin-top: 1px;
	color: var(--plum-faint);
	font-size: 11px;
}

.lc-calc-tile em {
	display: block;
	margin-top: 8px;
	font-style: normal;
	font-size: 12px;
	color: var(--plum-muted);
}

.lc-calc-tile:hover {
	box-shadow: 0 0 0 1px var(--line-strong);
}

.lc-calc-tile[aria-pressed="true"] {
	background: var(--acid);
	color: var(--ink);
	box-shadow: none;
}

.lc-calc-tile[aria-pressed="true"] span,
.lc-calc-tile[aria-pressed="true"] em {
	color: rgba(15, 15, 16, .7);
}

/* --------------------------------------------------------------- reorder */

/*
 * "Order the same again", on the order-received page and in the account area.
 *
 * The button itself is WooCommerce's .button, which theme.css already dresses,
 * so only the row around it and the line under it are written here.
 */
.labelcut-reorder {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 22px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.labelcut-reorder-note {
	flex: 1 1 16rem;
	color: var(--plum-muted);
	font-size: 13px;
	line-height: 1.45;
}


/* ------------------------------------------------------ the acid, by name */

/*
 * The two places that genuinely want the accent as a background, asking for it
 * directly rather than through a token that is also used at 40% opacity
 * somewhere else. See the note on --mint above for why that distinction cost a
 * live footer.
 */
.lc-strip {
	background: var(--acid);
}

.lc-strip * {
	color: var(--ink);
}

/* The selected quantity tile. assets/tryit.js writes the class, so the styling
   has to meet it where it lands. */
button.bg-mint[aria-pressed="true"] {
	background: var(--acid);
}

button.bg-mint[aria-pressed="true"],
button.bg-mint[aria-pressed="true"] * {
	color: var(--ink);
}

/* --------------------------------------------- the first screen, on a phone -- */
/*
 * "What are you labelling?" and six jobs have to fit above the fold on a
 * 375x812 phone, because that is where 78.7% of UAE orders are placed and
 * because the old first screen gave a customer nothing to do at all - the first
 * price on the page was 3,754px down.
 *
 * The budget is tight, so this is mostly subtraction: the artwork fan comes off
 * below 1024px, the hero's own padding shrinks, and each job tile is two lines
 * with no picture. Everything here is hand-written rather than Tailwind because
 * next.css is the old project's compiled output and cannot be rebuilt.
 */

/* The hero's right-hand column is Puff's stage (it was a fan of sheets until
   9 Oct 2026). Below 1024px the column is never shown as a picture - it would
   be 300px between the headline and the only question on the page - so the
   stage stops being a positioning box and Puff, absolute, falls through to the
   hero grid and sits small beside the intro line. */
.lc-hero-puff {
	position: static;
}

.lc-jobs {
	padding-bottom: 1.25rem;
}

.lc-jobs-ask {
	margin: 0;
}

.lc-job {
	min-height: 76px;
	padding: 0.75rem 0.85rem;
	gap: 0.6rem;
	transition: transform .2s ease, box-shadow .2s ease;
}

.lc-job:hover,
.lc-job:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow-raise);
}

.lc-job-name {
	line-height: 1.15;
	letter-spacing: -.01em;
}

.lc-job-foot {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

/* The hint is the sentence that does the selling - "From fifty. Most printers
   won't" - so it is kept, but it is the first thing to go when there is no
   room for it. */
@media (max-width: 360px) {
	.lc-job-hint {
		display: none;
	}
}

/* --------------------------------------- the stand-in for a missing photograph -- */
/*
 * Three ranges have no photography yet, and WooCommerce's grey placeholder makes
 * a lane look broken. inc/tile.php draws a die-cut diagram instead - the real
 * shape, at its real proportions, with its measurements. It fills the same box
 * an image would, so nothing around it has to know the difference.
 */
.lc-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 180px;
	padding: 1rem;
	background:
		radial-gradient(120% 100% at 50% 0%, rgba(215, 255, 62, .05), transparent 60%),
		var(--raised, #1b1b1d);
}

.lc-tile-svg {
	width: 100%;
	height: auto;
	max-height: 100%;
}

.lc-tile-name {
	font-family: var(--lc-display, 'Space Grotesk', system-ui, sans-serif);
	font-size: clamp(1rem, 3.5vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.1;
	text-align: center;
	text-wrap: balance;
	color: var(--plum-muted, #a8a5a0);
}

/* ------------------------------------------------ the page must survive no JS -- */
/*
 * Every section below the hero ships with an inline opacity:0 and is revealed by
 * assets/reveal.js. That made the whole page conditional on one script: blocked,
 * failed, or thrown in, and the home page became a hero and a marquee.
 *
 * An inline style beats a stylesheet, so undoing it needs !important. The class
 * is added by an inline script in <head>, so no JavaScript means no class means
 * nothing is hidden; and if reveal.js loads but never runs, that same script
 * removes the class after 2.5 seconds and this rule takes over.
 */
html:not(.lc-js) [style*="opacity:0"] {
	opacity: 1 !important;
	transform: none !important;
}

/*
 * The product page's stand-in, where a photograph has not been taken.
 *
 * inc/tile.php swaps WooCommerce's grey "Awaiting product image" square for the
 * die-cut diagram on products with no picture. Left at .lc-tile's own 180px it
 * sits short beside a summary three times its height, so it is given a shape
 * closer to the gallery it replaced.
 */
.labelcut-tile-images .lc-tile {
	min-height: 22rem;
	border-radius: var(--radius-card, 1rem);
}

/*
 * The header's "Shop everything" pill, off a phone.
 *
 * The markup asks for this with Tailwind's own hidden sm:inline-flex, but
 * next.css lists .inline-flex after .hidden, so the base class wins and the
 * pill renders at 375px. It does not fit next to the basket and the menu
 * button: the row overflowed by 11px and every phone page scrolled sideways.
 * The menu button leads to the same place.
 */
@media (max-width: 639px) {
	a.lc-shop-all {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Puff, the mascot (inc/puff.php).
 *
 * The images are transparent 3D fur renders, so they sit straight on the
 * near-black page with no frame. The bob is slow and small; anyone who has
 * asked for less motion gets a still Puff.
 * ------------------------------------------------------------------ */
.lc-puff {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto 1.25rem;
}
.lc-puff--bob {
	animation: lc-puff-bob 3.2s ease-in-out infinite;
}
@keyframes lc-puff-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
.lc-puff-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.lc-puff-row .lc-puff {
	margin: 0;
	width: 96px;
	flex: none;
}
@media (min-width: 640px) {
	.lc-puff-row .lc-puff {
		width: 120px;
	}
}

/* The empty basket. The block basket draws a sad face there with a CSS mask,
   from cart.css, which loads AFTER this file - so the selector carries the
   page wrapper to outrank it rather than relying on order. */
.lc-shop-page .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	-webkit-mask-image: none;
	mask-image: none;
	background-color: transparent;
	background-image: url("img/puff/puff-wait-240.webp");
	background-image: image-set(url("img/puff/puff-wait-240.webp") 1x, url("img/puff/puff-wait-480.webp") 2x);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 180px;
	height: 180px;
	margin: 0 auto 1rem;
	animation: lc-puff-bob 3.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.lc-puff--bob,
	.lc-shop-page .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
		animation: none;
	}
}

/* ------------------------------------------------------------------
 * Puff in the home hero (labelcut_puff_hero, assets/puff.js).
 *
 * Three stacked layers. The eye layer moves by --lc-lx / --lc-ly, which
 * puff.js sets; the body leans a little the same way by --lc-tilt. The
 * transform-origin is where the eyes sit in the render, so a blink closes
 * them in place instead of squashing towards the middle of the picture.
 *
 * On a phone Puff sits small beside the intro line, which gives up room on
 * its right for it. On a desktop it fills the right-hand column on its own.
 * ------------------------------------------------------------------ */
.lc-puff-hero {
	position: absolute;
	right: 1rem;
	bottom: 0.75rem;
	z-index: 40;
	width: 96px;
	height: 96px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	animation: lc-puff-bob 3.2s ease-in-out infinite;
}
.lc-puff-hero:focus-visible {
	outline: 2px solid var(--rose, #d7ff3e);
	outline-offset: 4px;
	border-radius: 50%;
}
.lc-puff-hero__inner {
	position: absolute;
	inset: 0;
	display: block;
	transform: rotate(var(--lc-tilt, 0deg));
	transform-origin: 50% 90%;
	transition: transform 0.35s ease-out;
}
.lc-puff-hero__inner img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	user-select: none;
}
.lc-puff-hero__wave {
	opacity: 0;
}
.lc-puff-hero.is-waving .lc-puff-hero__wave {
	opacity: 1;
}
.lc-puff-hero.is-waving .lc-puff-hero__body {
	opacity: 0;
}
.lc-puff-hero__eyes {
	transform: translate(var(--lc-lx, 0), var(--lc-ly, 0));
	transform-origin: 44.9% 51.5%;
	transition: transform 0.18s ease-out;
}
.lc-puff-hero.is-blink .lc-puff-hero__eyes {
	transform: translate(var(--lc-lx, 0), var(--lc-ly, 0)) scaleY(0.1);
	transition-duration: 0.06s;
}
.lc-puff-hero.is-hop .lc-puff-hero__inner {
	animation: lc-puff-hop 0.65s cubic-bezier(0.3, 0.7, 0.4, 1);
}
@keyframes lc-puff-hop {
	0% { transform: translateY(0) scale(1, 1); }
	15% { transform: translateY(0) scale(1.08, 0.9); }
	45% { transform: translateY(-28%) scale(0.95, 1.06); }
	75% { transform: translateY(0) scale(1.06, 0.94); }
	100% { transform: translateY(0) scale(1, 1); }
}
@media (max-width: 1023px) {
	.lc-hero-sub {
		padding-right: 104px;
	}
}
@media (min-width: 1024px) {
	.lc-hero-puff {
		position: relative;
		height: 300px;
	}
	.lc-puff-hero {
		top: 0;
		right: auto;
		bottom: auto;
		left: 50%;
		width: 300px;
		height: 300px;
		margin-left: -150px;
	}
	/* A 300px Puff hopping 28% of itself would put its head through the top
	   of the hero, which is overflow-hidden. */
	.lc-puff-hero.is-hop .lc-puff-hero__inner {
		animation-name: lc-puff-hop-big;
	}
	/* theme.css holds 5-6.5rem under the hero for the old fan of sheets, whose
	   lowest card hung below its box. Puff stands inside its stage. */
	.bg-cream.relative.overflow-hidden > .max-w-6xl.grid {
		padding-bottom: 1.5rem;
	}
}
@keyframes lc-puff-hop-big {
	0% { transform: translateY(0) scale(1, 1); }
	15% { transform: translateY(0) scale(1.06, 0.92); }
	45% { transform: translateY(-11%) scale(0.97, 1.04); }
	75% { transform: translateY(0) scale(1.04, 0.96); }
	100% { transform: translateY(0) scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) {
	.lc-puff-hero,
	.lc-puff-hero.is-hop .lc-puff-hero__inner {
		animation: none;
	}
}