/* ==========================================================================
   Artemisia design system
   One source of truth for colour, type, spacing and the shared components.
   Every Artemisia plugin and the child theme build on these tokens.

   1. Fonts (self-hosted)
   2. Tokens
   3. Kadence theme mapping
   4. Base
   5. Components: button, field, card, tabs, notice, badge, empty state, kicker
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-display: swap;
	font-weight: 400 900;
	src: url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-display: swap;
	font-weight: 400 900;
	src: url("../fonts/playfair-display-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/playfair-display-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Playfair Display";
	font-style: italic;
	font-display: swap;
	font-weight: 400 900;
	src: url("../fonts/playfair-display-latin-wght-italic.woff2") format("woff2-variations"), url("../fonts/playfair-display-latin-wght-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Playfair Display";
	font-style: italic;
	font-display: swap;
	font-weight: 400 900;
	src: url("../fonts/playfair-display-latin-ext-wght-italic.woff2") format("woff2-variations"), url("../fonts/playfair-display-latin-ext-wght-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Tokens --------------------------------------------------------------- */

:root {
	/* Colour: ink and paper */
	--a-ink: #1f1f1f;            /* text, primary buttons, dark sections */
	--a-ink-strong: #000000;     /* primary button hover */
	--a-ink-soft: #3a3632;       /* secondary text on light */
	--a-muted: #6f6558;          /* captions, meta (5.7:1 on white) */
	--a-muted-soft: #7a7064;     /* placeholders (4.8:1), disabled text */
	--a-line: #e4dfd7;           /* hairlines, borders */
	--a-line-strong: #c9c1b4;    /* field borders */
	--a-paper: #ffffff;
	--a-stone: #f8f6f2;          /* quiet panels, footer */
	--a-stone-deep: #efebe4;     /* hovered rows, tracks */

	/* Colour: gold, taken from the logo and the ARTEMISIA kicker */
	--a-gold: #c7a76c;           /* decorative accents, rules */
	--a-gold-light: #d6b777;     /* gold on dark backgrounds */
	--a-gold-kicker: #9a7a3c;    /* original kicker gold, large/decorative only */
	--a-gold-ink: #85692f;       /* gold as small text or links on white (5.2:1) */

	/* Colour: states */
	--a-success: #2f5d3a;
	--a-success-bg: #f1f5f0;
	--a-success-line: #c8d8c8;
	--a-error: #8f1f2a;
	--a-error-bg: #fbf2f2;
	--a-error-line: #e8c6c6;
	--a-warning: #7a5a12;
	--a-warning-bg: #fbf6ea;
	--a-warning-line: #ead9ae;
	--a-info: var(--a-ink-soft);
	--a-info-bg: var(--a-stone);
	--a-info-line: var(--a-line);
	--a-saved: #a4232f;          /* saved heart */
	--a-focus: #85692f;          /* focus ring */

	/* Type */
	--a-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--a-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--a-text-xs: 0.75rem;        /* 12 */
	--a-text-sm: 0.875rem;       /* 14 */
	--a-text-md: 1rem;           /* 16 */
	--a-text-lg: 1.125rem;       /* 18 */
	--a-text-xl: 1.375rem;       /* 22 */
	--a-text-2xl: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);  /* 26–34 */
	--a-text-3xl: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);        /* 32–56 */
	--a-text-4xl: clamp(2.5rem, 1.6rem + 4vw, 5.25rem);       /* 40–84 */
	--a-leading-tight: 1.15;
	--a-leading: 1.6;
	--a-tracking-kicker: 0.18em;

	/* Space (4px base) */
	--a-space-1: 0.25rem;
	--a-space-2: 0.5rem;
	--a-space-3: 0.75rem;
	--a-space-4: 1rem;
	--a-space-5: 1.5rem;
	--a-space-6: 2rem;
	--a-space-7: 3rem;
	--a-space-8: 4rem;
	--a-space-9: 6rem;

	/* Shape and depth */
	--a-radius-sm: 2px;
	--a-radius: 4px;
	--a-radius-pill: 999px;
	--a-shadow-sm: 0 1px 2px rgba(31, 31, 31, 0.06);
	--a-shadow: 0 2px 8px rgba(31, 31, 31, 0.08);
	--a-shadow-lg: 0 12px 32px rgba(31, 31, 31, 0.14);

	/* Controls */
	--a-control-height: 2.875rem; /* 46px: comfortable tap target */
	--a-control-height-sm: 2.25rem;
	--a-transition: 160ms ease;

	/* Legacy names used by older plugin CSS */
	--artemisia-ink: var(--a-ink);
	--artemisia-muted: var(--a-muted);
	--artemisia-line: var(--a-line);
	--artemisia-paper: var(--a-paper);
	--artemisia-saved: var(--a-saved);
	--artemisia-radius: var(--a-radius);
}

/* 3. Kadence theme mapping -------------------------------------------------
   Kadence reads these variables for links, buttons, headings and backgrounds.
   :root:root wins over Kadence's own :root block whatever the load order. */

:root:root {
	--global-palette1: var(--a-ink);        /* links, buttons */
	--global-palette2: var(--a-gold-ink);   /* link and button hover */
	--global-palette3: var(--a-ink);        /* headings */
	--global-palette4: var(--a-ink-soft);   /* strong text */
	--global-palette5: #5f574e;             /* body text on some blocks */
	--global-palette6: var(--a-muted);
	--global-palette7: var(--a-stone-deep);
	--global-palette8: var(--a-stone);      /* site background */
	--global-palette9: var(--a-paper);
	--global-palette9rgb: 255, 255, 255;
	--global-palette-btn-bg: var(--a-ink);
	--global-palette-btn-bg-hover: var(--a-ink-strong);
	--global-palette-btn: var(--a-paper);
	--global-palette-btn-hover: var(--a-paper);
	--global-body-font-family: var(--a-font-body);
	--global-heading-font-family: var(--a-font-display);
	--global-primary-nav-font-family: var(--a-font-display);
	--global-fallback-font: sans-serif;
}

/* 4. Base ----------------------------------------------------------------- */

body {
	font-family: var(--a-font-body);
	color: var(--a-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.site-title {
	font-family: var(--a-font-display);
	color: var(--a-ink);
	letter-spacing: -0.005em;
}

/* Form controls inherit the body face (browsers default them to system UI). */
button,
input,
select,
textarea {
	font-family: var(--a-font-body);
}

/* One visible focus style everywhere; mouse clicks don't show it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--a-focus);
	outline-offset: 2px;
}

::selection {
	background: rgba(199, 167, 108, 0.35);
}

.screen-reader-text:focus {
	clip: auto !important;
}

/* 5. Components ----------------------------------------------------------- */

/* Button ------------------------------------------------------------------
   <a class="artemisia-btn">Primary</a>
   <button class="artemisia-btn artemisia-btn--secondary">Secondary</button>
   <a class="artemisia-btn artemisia-btn--quiet">Quiet</a>
   Modifiers: --secondary, --quiet, --light (on dark), --gold, --small, --block
   (Homepage content still uses the older -secondary / -light / -gold / -primary names;
   they are aliases of the same styles.)
   ----------------------------------------------------------------------- */

.artemisia-btn,
.artemisia-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--a-space-2);
	min-height: var(--a-control-height);
	padding: 0 var(--a-space-5);
	border: 1px solid var(--a-ink);
	border-radius: var(--a-radius-sm);
	background: var(--a-ink);
	color: var(--a-paper);
	font-family: var(--a-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: background-color var(--a-transition), border-color var(--a-transition), color var(--a-transition), box-shadow var(--a-transition);
	-webkit-appearance: none;
	appearance: none;
}

.artemisia-btn:hover {
	border-color: var(--a-ink-strong);
	background: var(--a-ink-strong);
	color: var(--a-paper);
	text-decoration: none;
	box-shadow: var(--a-shadow);
}

.artemisia-btn:active {
	box-shadow: none;
}

.artemisia-btn:focus-visible {
	outline: 2px solid var(--a-focus);
	outline-offset: 3px;
}

.artemisia-btn:disabled,
.artemisia-btn[aria-disabled="true"],
.artemisia-btn.is-disabled {
	border-color: var(--a-line-strong);
	background: var(--a-stone-deep);
	color: var(--a-muted-soft);
	box-shadow: none;
	cursor: not-allowed;
	pointer-events: none;
}

.artemisia-btn.is-busy {
	opacity: 0.7;
	cursor: progress;
}

/* Secondary: outlined */
.artemisia-btn--secondary,
.artemisia-btn-secondary,
.artemisia-btn--secondary:visited,
.artemisia-btn-secondary:visited {
	background: transparent;
	color: var(--a-ink);
}
.artemisia-btn--secondary:hover,
.artemisia-btn-secondary:hover {
	border-color: var(--a-ink);
	background: var(--a-ink);
	color: var(--a-paper);
}
.artemisia-btn--secondary:disabled,
.artemisia-btn-secondary:disabled,
.artemisia-btn--secondary[aria-disabled="true"],
.artemisia-btn-secondary[aria-disabled="true"] {
	background: transparent;
}

/* Quiet: text-style, still clearly actionable */
.artemisia-btn--quiet,
.artemisia-btn--quiet:visited {
	min-height: var(--a-control-height-sm);
	padding: 0 var(--a-space-1);
	border-color: transparent;
	background: transparent;
	color: var(--a-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}
.artemisia-btn--quiet:hover {
	border-color: transparent;
	background: transparent;
	color: var(--a-gold-ink);
	box-shadow: none;
	text-decoration: underline;
}
.artemisia-btn--quiet:disabled,
.artemisia-btn--quiet[aria-disabled="true"] {
	border-color: transparent;
	background: transparent;
	text-decoration: none;
}

/* Light: outlined white, for dark imagery */
.artemisia-btn--light,
.artemisia-btn-light,
.artemisia-btn--light:visited,
.artemisia-btn-light:visited {
	border-color: var(--a-paper);
	background: transparent;
	color: var(--a-paper);
}
.artemisia-btn--light:hover,
.artemisia-btn-light:hover {
	border-color: var(--a-paper);
	background: var(--a-paper);
	color: var(--a-ink);
}
.artemisia-btn--light:focus-visible,
.artemisia-btn-light:focus-visible {
	outline-color: var(--a-gold-light);
}

/* Gold: rare emphasis (dark text keeps it readable) */
.artemisia-btn--gold,
.artemisia-btn-gold,
.artemisia-btn--gold:visited,
.artemisia-btn-gold:visited {
	border-color: var(--a-gold);
	background: var(--a-gold);
	color: var(--a-ink);
}
.artemisia-btn--gold:hover,
.artemisia-btn-gold:hover {
	border-color: var(--a-gold-light);
	background: var(--a-gold-light);
	color: var(--a-ink);
}

.artemisia-btn--small {
	min-height: var(--a-control-height-sm);
	padding: 0 var(--a-space-4);
	font-size: var(--a-text-sm);
}

.artemisia-btn--block {
	display: flex;
	width: 100%;
}

.artemisia-btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--a-space-3);
}

/* Field ---------------------------------------------------------------------
   <div class="artemisia-field">
     <label class="artemisia-field__label" for="x">Label</label>
     <input class="artemisia-input" id="x">
     <p class="artemisia-field__help">Help text</p>
   </div>
   ------------------------------------------------------------------------- */

.artemisia-field {
	display: flex;
	flex-direction: column;
	gap: var(--a-space-2);
	margin: 0 0 var(--a-space-5);
}

.artemisia-field__label {
	color: var(--a-ink);
	font-size: var(--a-text-sm);
	font-weight: 600;
	line-height: 1.4;
}

.artemisia-field__label .is-required,
.artemisia-required {
	color: var(--a-error);
	font-weight: 600;
}

.artemisia-field__help {
	margin: 0;
	color: var(--a-muted);
	font-size: var(--a-text-sm);
	line-height: 1.5;
}

.artemisia-field__error {
	margin: 0;
	color: var(--a-error);
	font-size: var(--a-text-sm);
}

.artemisia-input,
.artemisia-select,
.artemisia-textarea {
	width: 100%;
	min-height: var(--a-control-height);
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--a-line-strong);
	border-radius: var(--a-radius-sm);
	background: var(--a-paper);
	color: var(--a-ink);
	font-family: var(--a-font-body);
	font-size: var(--a-text-md); /* 16px stops iOS zooming on focus */
	line-height: 1.4;
	box-shadow: none;
	transition: border-color var(--a-transition), box-shadow var(--a-transition);
}

.artemisia-textarea {
	min-height: 8rem;
	resize: vertical;
}

.artemisia-input::placeholder,
.artemisia-textarea::placeholder {
	color: var(--a-muted-soft);
}

.artemisia-input:hover,
.artemisia-select:hover,
.artemisia-textarea:hover {
	border-color: var(--a-muted);
}

.artemisia-input:focus,
.artemisia-select:focus,
.artemisia-textarea:focus {
	border-color: var(--a-ink);
	outline: none;
	box-shadow: 0 0 0 3px rgba(133, 105, 47, 0.25);
}

.artemisia-input[aria-invalid="true"],
.artemisia-field.is-invalid .artemisia-input {
	border-color: var(--a-error);
}

.artemisia-input:disabled,
.artemisia-select:disabled,
.artemisia-textarea:disabled {
	background: var(--a-stone);
	color: var(--a-muted);
	cursor: not-allowed;
}

.artemisia-check {
	display: flex;
	align-items: flex-start;
	gap: var(--a-space-3);
	font-size: var(--a-text-md);
	line-height: 1.5;
	cursor: pointer;
}

.artemisia-check input[type="checkbox"],
.artemisia-check input[type="radio"] {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.2em 0 0;
	accent-color: var(--a-ink);
}

/* Card --------------------------------------------------------------------
   <div class="artemisia-card-ui"> … </div>   (.artemisia-card is the homepage link card)
   ------------------------------------------------------------------------- */

.artemisia-card-ui {
	padding: var(--a-space-5);
	border: 1px solid var(--a-line);
	border-radius: var(--a-radius);
	background: var(--a-paper);
}

.artemisia-card-ui--stone {
	border-color: transparent;
	background: var(--a-stone);
}

.artemisia-card-ui__title {
	margin: 0 0 var(--a-space-2);
	font-family: var(--a-font-display);
	font-size: var(--a-text-xl);
	font-weight: 400;
	line-height: 1.25;
}

.artemisia-card-ui__meta {
	margin: 0;
	color: var(--a-muted);
	font-size: var(--a-text-sm);
}

a.artemisia-card-ui {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: border-color var(--a-transition), box-shadow var(--a-transition);
}

a.artemisia-card-ui:hover {
	border-color: var(--a-ink);
	box-shadow: var(--a-shadow);
}

/* Tabs --------------------------------------------------------------------
   <div class="artemisia-tabs" role="tablist">
     <button class="artemisia-tabs__tab" role="tab" aria-selected="true">…</button>
   </div>
   Links work too: <a class="artemisia-tabs__tab" aria-current="page">
   ------------------------------------------------------------------------- */

.artemisia-tabs {
	display: flex;
	gap: var(--a-space-6);
	margin: 0 0 var(--a-space-6);
	border-bottom: 1px solid var(--a-line);
	overflow-x: auto;
	scrollbar-width: none;
}

.artemisia-tabs::-webkit-scrollbar {
	display: none;
}

.artemisia-tabs__tab {
	position: relative;
	flex: 0 0 auto;
	padding: var(--a-space-3) 0;
	border: 0;
	background: none;
	color: var(--a-muted);
	font-family: var(--a-font-body);
	font-size: var(--a-text-md);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.artemisia-tabs__tab:hover {
	color: var(--a-ink);
}

.artemisia-tabs__tab[aria-selected="true"],
.artemisia-tabs__tab[aria-current="page"],
.artemisia-tabs__tab.is-active {
	color: var(--a-ink);
}

.artemisia-tabs__tab[aria-selected="true"]::after,
.artemisia-tabs__tab[aria-current="page"]::after,
.artemisia-tabs__tab.is-active::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: var(--a-ink);
}

.artemisia-tabs__count {
	margin-left: var(--a-space-1);
	color: var(--a-muted);
	font-weight: 400;
}

/* Notice ------------------------------------------------------------------
   <div class="artemisia-notice artemisia-notice--success" role="status">…</div>
   Modifiers: --success, --error, --warning, --info (default)
   ------------------------------------------------------------------------- */

.artemisia-notice {
	margin: 0 0 var(--a-space-5);
	padding: var(--a-space-4) var(--a-space-5);
	border: 1px solid var(--a-info-line);
	border-left-width: 3px;
	border-radius: var(--a-radius-sm);
	background: var(--a-info-bg);
	color: var(--a-ink);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.artemisia-notice > :last-child {
	margin-bottom: 0;
}

.artemisia-notice a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.artemisia-notice__title {
	display: block;
	margin-bottom: var(--a-space-1);
	font-weight: 600;
}

.artemisia-notice--success {
	border-color: var(--a-success-line);
	border-left-color: var(--a-success);
	background: var(--a-success-bg);
}

.artemisia-notice--error {
	border-color: var(--a-error-line);
	border-left-color: var(--a-error);
	background: var(--a-error-bg);
}

.artemisia-notice--warning {
	border-color: var(--a-warning-line);
	border-left-color: var(--a-warning);
	background: var(--a-warning-bg);
}

.artemisia-notice--info {
	border-left-color: var(--a-gold);
}

/* Badge -------------------------------------------------------------------
   <span class="artemisia-badge">Plus</span>
   Modifiers: --dark, --gold, --success, --error, --muted
   ------------------------------------------------------------------------- */

.artemisia-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--a-space-1);
	padding: 0.1875rem 0.5625rem;
	border: 1px solid var(--a-line-strong);
	border-radius: var(--a-radius-sm);
	background: var(--a-paper);
	color: var(--a-ink);
	font-family: var(--a-font-body);
	font-size: var(--a-text-xs);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.artemisia-badge--dark {
	border-color: var(--a-ink);
	background: var(--a-ink);
	color: var(--a-paper);
}

.artemisia-badge--gold {
	border-color: var(--a-gold);
	background: #f6efe1;
	color: #6b5424;
}

.artemisia-badge--success {
	border-color: var(--a-success-line);
	background: var(--a-success-bg);
	color: var(--a-success);
}

.artemisia-badge--error {
	border-color: var(--a-error-line);
	background: var(--a-error-bg);
	color: var(--a-error);
}

.artemisia-badge--muted {
	border-color: var(--a-line);
	background: var(--a-stone);
	color: var(--a-muted);
}

/* Empty state -------------------------------------------------------------
   <div class="artemisia-empty">
     <p class="artemisia-empty__title">Nothing saved yet</p>
     <p class="artemisia-empty__text">…</p>
     <a class="artemisia-btn">Browse artworks</a>
   </div>
   ------------------------------------------------------------------------- */

.artemisia-empty {
	max-width: 32rem;
	margin: var(--a-space-6) auto;
	padding: var(--a-space-7) var(--a-space-5);
	border: 1px dashed var(--a-line-strong);
	border-radius: var(--a-radius);
	text-align: center;
}

.artemisia-empty__title {
	margin: 0 0 var(--a-space-2);
	font-family: var(--a-font-display);
	font-size: var(--a-text-xl);
	line-height: 1.3;
}

.artemisia-empty__text {
	margin: 0 0 var(--a-space-5);
	color: var(--a-muted);
	line-height: 1.6;
}

/* Kicker: the small letter-spaced line above headings --------------------- */

.artemisia-kicker {
	margin: 0 0 var(--a-space-4);
	color: var(--a-gold-ink);
	font-family: var(--a-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: var(--a-tracking-kicker);
	text-transform: uppercase;
}

/* Progress / usage bar ---------------------------------------------------- */

.artemisia-meter {
	height: 6px;
	border-radius: var(--a-radius-pill);
	background: var(--a-stone-deep);
	overflow: hidden;
}

.artemisia-meter > span {
	display: block;
	height: 100%;
	background: var(--a-ink);
}

.artemisia-meter.is-full > span {
	background: var(--a-error);
}

/* Framing offer (10% off at Kings Road Framing) ----------------------------
   artemisia_framing_offer_html(); the member's number is filled in by session.js. */

.artemisia-framing-offer > p {
	margin: 0 0 var(--a-space-2);
}

.artemisia-framing-offer__member strong {
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.artemisia-framing-offer__guest {
	color: var(--a-muted);
	font-size: var(--a-text-sm);
}

.artemisia-framing-offer a {
	color: var(--a-gold-ink);
}

.artemisia-framing-offer__link {
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.artemisia-btn,
	.artemisia-input,
	.artemisia-select,
	.artemisia-textarea,
	a.artemisia-card-ui {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Share (includes/share.php, assets/js/share.js): the button and its panel
 * ------------------------------------------------------------------ */
.artemisia-share {
	display: inline-flex;
	gap: var(--a-space-2);
	align-items: center;
}

.artemisia-share__panel {
	position: absolute;
	z-index: 200;
	width: min(22rem, calc(100vw - 1rem));
	padding: var(--a-space-4);
	border: 1px solid var(--a-line);
	border-radius: var(--a-radius);
	background: var(--a-paper);
	box-shadow: var(--a-shadow-lg);
	color: var(--a-ink);
}

.artemisia-share__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--a-space-3);
}

.artemisia-share__title {
	margin: 0;
	font-weight: 600;
}

.artemisia-share__close {
	padding: 0 var(--a-space-2);
	border: 0;
	background: none;
	color: var(--a-muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.artemisia-share__targets {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
	gap: var(--a-space-2);
	margin: 0 0 var(--a-space-3);
	padding: 0;
	list-style: none;
}

.artemisia-share__target {
	display: grid;
	justify-items: center;
	gap: var(--a-space-1);
	width: 100%;
	padding: var(--a-space-2) 0;
	border: 0;
	border-radius: var(--a-radius);
	background: none;
	color: var(--a-ink);
	font: inherit;
	font-size: var(--a-text-xs);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.artemisia-share__target svg {
	box-sizing: content-box;
	padding: var(--a-space-3);
	border: 1px solid var(--a-line);
	border-radius: var(--a-radius-pill);
}

.artemisia-share__target:hover svg,
.artemisia-share__target:focus-visible svg {
	border-color: var(--a-gold);
	background: var(--a-stone);
}

.artemisia-share__address {
	width: 100%;
	font-size: var(--a-text-sm);
}

@media (max-width: 30rem) {
	.artemisia-share__panel {
		position: fixed;
		top: auto !important;
		right: 0;
		bottom: 0;
		left: 0 !important;
		width: auto;
		border-radius: var(--a-radius) var(--a-radius) 0 0;
	}
}

.artemisia-share__panel .artemisia-share__target:hover,
.artemisia-share__panel .artemisia-share__target:focus,
.artemisia-share__panel .artemisia-share__close:hover,
.artemisia-share__panel .artemisia-share__close:focus {
	background: none;
	color: var(--a-ink);
	box-shadow: none;
}