/* ------------------------------------------------------------
   21. UI DESIGN — style gallery (page-ui-design.php)
   Every card renders ONE skeleton (.ord-style-screen); the
   ord-style-screen--<slug> modifiers below repaint that same
   skeleton into a different UI style, so the gallery compares
   styles like-for-like.
   ------------------------------------------------------------ */
.ord-ui-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.ord-ui-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 18px;
	background: var(--paper);
	border: 2.5px solid var(--ink);
	border-radius: var(--ord-radius);
	box-shadow: var(--ord-shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ord-ui-card:hover {
	transform: translate(-4px, -4px);
	box-shadow: var(--ord-shadow-lg);
}

.ord-ui-card-head {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* The number IS the reference the visitor quotes, so it stays big and loud. */
.ord-ui-card-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	height: 54px;
	padding: 0 12px;
	font-family: var(--ord-font-heading);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	background: var(--mint);
	border: 2px solid var(--ink);
	border-radius: 14px;
	box-shadow: 3px 3px 0 0 var(--ink);
}

.ord-ui-card:nth-child(4n + 2) .ord-ui-card-no { background: #dff3ff; }
.ord-ui-card:nth-child(4n + 3) .ord-ui-card-no { background: #ffe7bd; }
.ord-ui-card:nth-child(4n) .ord-ui-card-no { background: #ece7ff; }

/* Dotted leader — keeps the cards reading like one numbered list. */
.ord-ui-card-rule {
	flex: 1;
	height: 0;
	border-top: 2px dashed rgba(11, 16, 32, 0.22);
}

.ord-ui-card-preview {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* --- Neutral browser chrome ---------------------------------
   The frame must not push its own style on the mockup inside,
   so it stays plain grey/white for every card.
   ------------------------------------------------------------ */
.ord-style-frame {
	--ord-style-fs: clamp(0.5rem, calc((50vw - 100px) / 39), 0.8rem);
	font-size: var(--ord-style-fs);
	line-height: 1.25;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid #dfe3ea;
	border-radius: 12px;
	box-shadow: 0 12px 26px rgba(11, 16, 32, 0.1);
}

.ord-style-bar {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.7em 0.9em;
	background: #f3f5f9;
	border-bottom: 1px solid #e4e8ef;
}

.ord-style-dot {
	flex: 0 0 auto;
	width: 0.75em;
	height: 0.75em;
	border-radius: 50%;
}

.ord-style-dot:nth-child(1) { background: #ff5f57; }
.ord-style-dot:nth-child(2) { background: #febc2e; }
.ord-style-dot:nth-child(3) { background: #28c840; }

.ord-style-url {
	flex: 1;
	min-width: 0;
	margin-left: 0.4em;
	padding: 0.2em 1em;
	font-size: 1.05em;
	font-weight: 600;
	color: #8b95a8;
	background: #ffffff;
	border: 1px solid #e4e8ef;
	border-radius: 999px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- Skeleton defaults --------------------------------------
   Every value below is a variable, so a style modifier only has
   to override variables (plus a few structural extras).
   ------------------------------------------------------------ */
.ord-style-screen {
	--st-bg: #ffffff;
	--st-ink: #0f172a;
	--st-muted: #6b7280;
	--st-accent: #0f172a;
	--st-accent-ink: #ffffff;
	--st-card-bg: #ffffff;
	--st-card-border: 1px solid #e5e7eb;
	--st-radius: 10px;
	--st-btn-radius: 8px;
	--st-card-shadow: none;
	--st-hero-bg: #f8fafc;
	--st-hero-ink: #0f172a;
	--st-hero-sub: #6b7280;
	--st-hero-btn-bg: #0f172a;
	--st-hero-btn-ink: #ffffff;
	--st-eyebrow-bg: transparent;
	--st-eyebrow-ink: #6b7280;
	--st-heading-font: var(--ord-font-heading);
	--st-heading-weight: 700;

	display: flex;
	flex-direction: column;
	gap: 0.875em;
	height: 23em;
	padding: 1.15em;
	background: var(--st-bg);
	color: var(--st-ink);
	font-family: var(--ord-font-body);
	overflow: hidden;
}

.ord-style-nav {
	display: flex;
	align-items: center;
	gap: 0.75em;
	flex: 0 0 auto;
}

.ord-style-logo {
	font-family: var(--st-heading-font);
	font-size: 1.1em;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.ord-style-links {
	display: flex;
	gap: 0.9em;
	margin-left: auto;
	font-size: 0.86em;
	font-weight: 600;
	color: var(--st-muted);
}

.ord-style-links i { font-style: normal; }

.ord-style-navcta {
	flex: 0 0 auto;
	padding: 0.35em 0.9em;
	font-size: 0.82em;
	font-weight: 700;
	color: var(--st-accent-ink);
	background: var(--st-accent);
	border-radius: var(--st-btn-radius);
}

.ord-style-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.55em;
	flex: 1 1 auto;
	min-height: 0;
	padding: 1.25em;
	color: var(--st-hero-ink);
	background: var(--st-hero-bg);
	border-radius: var(--st-radius);
}

.ord-style-eyebrow {
	align-self: flex-start;
	padding: 0.15em 0.7em;
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--st-eyebrow-ink);
	background: var(--st-eyebrow-bg);
	border-radius: 999px;
}

.ord-style-h1 {
	font-family: var(--st-heading-font);
	font-size: 1.62em;
	font-weight: var(--st-heading-weight);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.ord-style-sub {
	font-size: 0.9em;
	font-weight: 600;
	color: var(--st-hero-sub);
}

.ord-style-btn {
	align-self: flex-start;
	margin-top: 0.2em;
	padding: 0.5em 1.15em;
	font-size: 0.9em;
	font-weight: 700;
	color: var(--st-hero-btn-ink);
	background: var(--st-hero-btn-bg);
	border-radius: var(--st-btn-radius);
	white-space: nowrap;
}

.ord-style-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.625em;
	flex: 0 0 auto;
}

.ord-style-card {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	padding: 0.7em 0.75em;
	color: var(--st-ink);
	background: var(--st-card-bg);
	border: var(--st-card-border);
	border-radius: var(--st-radius);
	box-shadow: var(--st-card-shadow);
}

.ord-style-card i {
	font-style: normal;
	font-size: 1.25em;
}

.ord-style-card b {
	font-size: 0.86em;
	font-weight: 700;
}

.ord-style-card em {
	font-style: normal;
	font-size: 0.74em;
	font-weight: 600;
	color: var(--st-muted);
}

.ord-style-form {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex: 0 0 auto;
}

.ord-style-input {
	flex: 1;
	min-width: 0;
	padding: 0.5em 1em;
	font-size: 0.84em;
	font-weight: 600;
	color: var(--st-muted);
	background: var(--st-card-bg);
	border: var(--st-card-border);
	border-radius: var(--st-btn-radius);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Same button, but sitting on the screen instead of the hero. */
.ord-style-btn--ghost {
	align-self: auto;
	margin-top: 0;
	color: var(--st-accent-ink);
	background: var(--st-accent);
}

/* --- 1. Neo-Brutalist --------------------------------------- */
.ord-style-screen--brutalist {
	--st-bg: #f5f7fb;
	--st-accent: #3ecf8e;
	--st-accent-ink: #0b1020;
	--st-card-border: 2px solid #0b1020;
	--st-radius: 0.9em;
	--st-btn-radius: 999px;
	--st-card-shadow: 0.28em 0.28em 0 0 #0b1020;
	--st-hero-bg: linear-gradient(120deg, #7c5cff, #38bdf8);
	--st-hero-ink: #ffffff;
	--st-hero-sub: rgba(255, 255, 255, 0.85);
	--st-hero-btn-bg: #ffffff;
	--st-hero-btn-ink: #0b1020;
	--st-eyebrow-bg: rgba(255, 255, 255, 0.24);
	--st-eyebrow-ink: #ffffff;
}

.ord-style-screen--brutalist .ord-style-hero { border: 2px solid #0b1020; }

/* --- 2. Minimalist ------------------------------------------ */
.ord-style-screen--minimal {
	--st-ink: #14171f;
	--st-muted: #a1a6b0;
	--st-accent: #14171f;
	--st-card-border: 1px solid #f0f1f3;
	--st-radius: 6px;
	--st-btn-radius: 6px;
	--st-hero-bg: #ffffff;
	--st-hero-ink: #14171f;
	--st-hero-sub: #a1a6b0;
	--st-eyebrow-ink: #a1a6b0;
	--st-heading-weight: 600;
}

.ord-style-screen--minimal .ord-style-eyebrow {
	padding-left: 0;
	letter-spacing: 0.24em;
}

.ord-style-screen--minimal .ord-style-h1 {
	font-size: 1.86em;
	letter-spacing: -0.035em;
}

.ord-style-screen--minimal .ord-style-hero {
	padding: 1.6em 1.1em;
	gap: 0.7em;
}

.ord-style-screen--minimal .ord-style-links { font-weight: 500; }

/* --- 3. Stripe SaaS ----------------------------------------- */
.ord-style-screen--stripe {
	--st-ink: #0a2540;
	--st-muted: #425466;
	--st-accent: #635bff;
	--st-accent-ink: #ffffff;
	--st-card-border: 1px solid #e6ebf1;
	--st-radius: 12px;
	--st-btn-radius: 999px;
	--st-card-shadow: 0 3px 10px rgba(50, 50, 93, 0.1);
	--st-hero-bg: linear-gradient(140deg, #f6f9fc, #eef2ff 55%, #fdf2f8);
	--st-hero-ink: #0a2540;
	--st-hero-sub: #425466;
}

.ord-style-screen--stripe .ord-style-h1 {
	font-size: 1.78em;
	letter-spacing: -0.035em;
}

.ord-style-screen--stripe .ord-style-hero {
	box-shadow: inset 0 0 0 1px rgba(99, 91, 255, 0.1);
}

/* --- 4. Supabase Dark --------------------------------------- */
.ord-style-screen--supabase {
	--st-bg: #1c1c1c;
	--st-ink: #ededed;
	--st-muted: #8f8f8f;
	--st-accent: #3ecf8e;
	--st-accent-ink: #1c1c1c;
	--st-card-bg: #232323;
	--st-card-border: 1px solid #2e2e2e;
	--st-radius: 8px;
	--st-btn-radius: 6px;
	--st-hero-bg: #171717;
	--st-hero-ink: #ededed;
	--st-hero-sub: #9a9a9a;
	--st-hero-btn-bg: #3ecf8e;
	--st-hero-btn-ink: #1c1c1c;
	--st-eyebrow-ink: #3ecf8e;
	--st-heading-font: var(--ord-font-body);
	--st-heading-weight: 600;
}

.ord-style-screen--supabase .ord-style-eyebrow { border: 1px solid #3ecf8e; }

.ord-style-screen--supabase .ord-style-btn,
.ord-style-screen--supabase .ord-style-links,
.ord-style-screen--supabase .ord-style-card em {
	font-family: ui-monospace, 'SF Mono', 'Fira Code', Menlo, monospace;
}

/* --- 5. Glassmorphism --------------------------------------- */
.ord-style-screen--glass {
	--st-bg: linear-gradient(135deg, #7c5cff, #38bdf8 55%, #3ecf8e);
	--st-ink: #ffffff;
	--st-muted: rgba(255, 255, 255, 0.78);
	--st-accent: rgba(255, 255, 255, 0.92);
	--st-accent-ink: #241a4d;
	--st-card-bg: rgba(255, 255, 255, 0.16);
	--st-card-border: 1px solid rgba(255, 255, 255, 0.45);
	--st-radius: 16px;
	--st-btn-radius: 999px;
	--st-hero-bg: rgba(255, 255, 255, 0.14);
	--st-hero-ink: #ffffff;
	--st-hero-sub: rgba(255, 255, 255, 0.82);
	--st-hero-btn-bg: #ffffff;
	--st-hero-btn-ink: #241a4d;
	--st-eyebrow-bg: rgba(255, 255, 255, 0.22);
	--st-eyebrow-ink: #ffffff;
}

.ord-style-screen--glass .ord-style-hero,
.ord-style-screen--glass .ord-style-card,
.ord-style-screen--glass .ord-style-input,
.ord-style-screen--glass .ord-style-navcta {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.ord-style-screen--glass .ord-style-hero { border: 1px solid rgba(255, 255, 255, 0.45); }

/* --- 6. Neumorphism (soft UI) ------------------------------- */
.ord-style-screen--neumorph {
	--st-bg: #e6ebf2;
	--st-ink: #47536b;
	--st-muted: #8b96aa;
	--st-accent: #e6ebf2;
	--st-accent-ink: #47536b;
	--st-card-bg: #e6ebf2;
	--st-card-border: none;
	--st-radius: 16px;
	--st-btn-radius: 12px;
	--st-card-shadow: 6px 6px 12px #c6cedb, -6px -6px 12px #ffffff;
	--st-hero-bg: #e6ebf2;
	--st-hero-ink: #47536b;
	--st-hero-sub: #8b96aa;
	--st-hero-btn-bg: #e6ebf2;
	--st-hero-btn-ink: #47536b;
	--st-eyebrow-ink: #8b96aa;
}

.ord-style-screen--neumorph .ord-style-hero {
	box-shadow: inset 6px 6px 12px #c6cedb, inset -6px -6px 12px #ffffff;
}

.ord-style-screen--neumorph .ord-style-btn,
.ord-style-screen--neumorph .ord-style-navcta {
	box-shadow: 4px 4px 10px #c6cedb, -4px -4px 10px #ffffff;
}

.ord-style-screen--neumorph .ord-style-input {
	box-shadow: inset 4px 4px 8px #c6cedb, inset -4px -4px 8px #ffffff;
}

/* --- 7. Material Design ------------------------------------- */
.ord-style-screen--material {
	--st-ink: #202124;
	--st-muted: #5f6368;
	--st-accent: #1a73e8;
	--st-accent-ink: #ffffff;
	--st-card-border: none;
	--st-radius: 8px;
	--st-btn-radius: 4px;
	--st-card-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px rgba(60, 64, 67, 0.15);
	--st-hero-bg: #e8f0fe;
	--st-hero-ink: #202124;
	--st-hero-sub: #5f6368;
	--st-hero-btn-bg: #1a73e8;
	--st-hero-btn-ink: #ffffff;
	--st-eyebrow-ink: #1a73e8;
	--st-heading-font: var(--ord-font-body);
	--st-heading-weight: 500;
}

.ord-style-screen--material .ord-style-btn {
	font-size: 0.82em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ord-style-screen--material .ord-style-navcta {
	padding: 0.4em 1.1em;
	border-radius: 999px;
}

/* --- 8. Flat bold colour ----------------------------------- */
.ord-style-screen--flat {
	--st-bg: #fffdf6;
	--st-ink: #16204a;
	--st-muted: #5c6480;
	--st-accent: #ff5d5d;
	--st-accent-ink: #ffffff;
	--st-card-bg: #ffd76e;
	--st-card-border: none;
	--st-radius: 0;
	--st-btn-radius: 0;
	--st-hero-bg: #38bdf8;
	--st-hero-ink: #0b1020;
	--st-hero-sub: rgba(11, 16, 32, 0.72);
	--st-hero-btn-bg: #0b1020;
	--st-hero-btn-ink: #ffffff;
	--st-eyebrow-bg: #0b1020;
	--st-eyebrow-ink: #ffffff;
	--st-heading-weight: 800;
}

.ord-style-screen--flat .ord-style-card:nth-child(2) { background: #a3e635; }
.ord-style-screen--flat .ord-style-card:nth-child(3) { background: #fda4af; }

.ord-style-screen--flat .ord-style-h1 {
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

/* --- 9. Dark mode SaaS ------------------------------------- */
.ord-style-screen--dark {
	--st-bg: #0d1117;
	--st-ink: #f0f6fc;
	--st-muted: #8b949e;
	--st-accent: #a3e635;
	--st-accent-ink: #0d1117;
	--st-card-bg: #161b22;
	--st-card-border: 1px solid #21262d;
	--st-radius: 12px;
	--st-btn-radius: 10px;
	--st-hero-bg: radial-gradient(120% 130% at 0% 0%, #1b2740, #0d1117 70%);
	--st-hero-ink: #f0f6fc;
	--st-hero-sub: #8b949e;
	--st-hero-btn-bg: #a3e635;
	--st-hero-btn-ink: #0d1117;
	--st-eyebrow-bg: rgba(163, 230, 53, 0.14);
	--st-eyebrow-ink: #a3e635;
}

.ord-style-screen--dark .ord-style-hero { border: 1px solid #21262d; }

.ord-style-screen--dark .ord-style-btn {
	box-shadow: 0 0 14px rgba(163, 230, 53, 0.35);
}

/* --- 10. Corporate professional ---------------------------- */
.ord-style-screen--corporate {
	--st-ink: #0f2a43;
	--st-muted: #5b6b7c;
	--st-accent: #1b5faa;
	--st-accent-ink: #ffffff;
	--st-card-bg: #f7fafc;
	--st-card-border: 1px solid #d8e3ee;
	--st-radius: 4px;
	--st-btn-radius: 4px;
	--st-card-shadow: 0 2px 6px rgba(15, 42, 67, 0.08);
	--st-hero-bg: #eef5fb;
	--st-hero-ink: #0f2a43;
	--st-hero-sub: #5b6b7c;
	--st-eyebrow-ink: #1b5faa;
	--st-heading-font: Georgia, 'Times New Roman', serif;
}

.ord-style-screen--corporate .ord-style-hero { border-top: 0.3em solid #1b5faa; }

.ord-style-screen--corporate .ord-style-eyebrow {
	padding-left: 0;
	letter-spacing: 0.16em;
}

/* --- 11. Playful rounded ----------------------------------- */
.ord-style-screen--playful {
	--st-bg: #fff5fb;
	--st-ink: #3a2350;
	--st-muted: #8b6fa0;
	--st-accent: #ff6fb5;
	--st-accent-ink: #ffffff;
	--st-card-bg: #ffffff;
	--st-card-border: 3px solid #3a2350;
	--st-radius: 22px;
	--st-btn-radius: 999px;
	--st-card-shadow: 0 5px 0 #ffd6ec;
	--st-hero-bg: #ffe07a;
	--st-hero-ink: #3a2350;
	--st-hero-sub: rgba(58, 35, 80, 0.72);
	--st-hero-btn-bg: #ff6fb5;
	--st-hero-btn-ink: #ffffff;
	--st-eyebrow-bg: #ffffff;
	--st-eyebrow-ink: #3a2350;
	--st-heading-weight: 800;
}

.ord-style-screen--playful .ord-style-hero { border: 3px solid #3a2350; }

.ord-style-screen--playful .ord-style-card:nth-child(2) { transform: rotate(-1.5deg); }
.ord-style-screen--playful .ord-style-card:nth-child(3) { transform: rotate(1.5deg); }

.ord-style-screen--playful .ord-style-card i { font-size: 1.6em; }

/* --- 12. Editorial typography ------------------------------ */
.ord-style-screen--editorial {
	--st-bg: #fbf7f3;
	--st-ink: #1c1027;
	--st-muted: #7d6f86;
	--st-accent: #1c1027;
	--st-accent-ink: #fbf7f3;
	--st-card-bg: transparent;
	--st-card-border: none;
	--st-radius: 0;
	--st-btn-radius: 0;
	--st-hero-bg: transparent;
	--st-hero-ink: #1c1027;
	--st-hero-sub: #7d6f86;
	--st-eyebrow-ink: #7d6f86;
	--st-heading-font: Georgia, 'Times New Roman', serif;
}

.ord-style-screen--editorial .ord-style-h1 {
	font-size: 2em;
	letter-spacing: -0.02em;
}

.ord-style-screen--editorial .ord-style-hero {
	padding: 0.5em 0;
	border-top: 1px solid #e3d8ce;
	border-bottom: 1px solid #e3d8ce;
}

.ord-style-screen--editorial .ord-style-card {
	padding: 0.6em 0;
	border-top: 2px solid #1c1027;
}

.ord-style-screen--editorial .ord-style-input { background: #ffffff; }

/* --- 13. Bento grid ---------------------------------------- */
.ord-style-screen--bento {
	--st-bg: #f5f5f7;
	--st-ink: #1d1d1f;
	--st-muted: #86868b;
	--st-accent: #0071e3;
	--st-accent-ink: #ffffff;
	--st-card-border: none;
	--st-radius: 20px;
	--st-btn-radius: 999px;
	--st-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	--st-hero-bg: #ffffff;
	--st-hero-ink: #1d1d1f;
	--st-hero-sub: #86868b;
	--st-heading-weight: 600;
}

.ord-style-screen--bento .ord-style-hero {
	padding: 1.1em 1.25em;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ord-style-screen--bento .ord-style-card i { font-size: 1.5em; }

.ord-style-screen--bento .ord-style-input {
	background: #ffffff;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* --- 14. Aurora gradient glow ------------------------------ */
.ord-style-screen--aurora {
	--st-bg: #070a18;
	--st-ink: #eef2ff;
	--st-muted: #9aa4c7;
	--st-accent: #8b5cf6;
	--st-accent-ink: #ffffff;
	--st-card-bg: rgba(255, 255, 255, 0.05);
	--st-card-border: 1px solid rgba(255, 255, 255, 0.12);
	--st-radius: 18px;
	--st-btn-radius: 999px;
	--st-hero-bg: linear-gradient(120deg, rgba(139, 92, 246, 0.92), rgba(34, 211, 238, 0.85) 55%, rgba(244, 114, 182, 0.85));
	--st-hero-ink: #ffffff;
	--st-hero-sub: rgba(255, 255, 255, 0.85);
	--st-hero-btn-bg: rgba(255, 255, 255, 0.94);
	--st-hero-btn-ink: #1b1440;
	--st-eyebrow-bg: rgba(255, 255, 255, 0.2);
	--st-eyebrow-ink: #ffffff;
}

.ord-style-screen--aurora .ord-style-hero {
	box-shadow: 0 14px 32px rgba(139, 92, 246, 0.42);
}

.ord-style-screen--aurora .ord-style-card {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* --- 15. Swiss monochrome ---------------------------------- */
.ord-style-screen--mono {
	--st-ink: #000000;
	--st-muted: #6b6b6b;
	--st-accent: #000000;
	--st-accent-ink: #ffffff;
	--st-card-border: none;
	--st-radius: 0;
	--st-btn-radius: 0;
	--st-hero-bg: #ffffff;
	--st-hero-ink: #000000;
	--st-hero-sub: #6b6b6b;
	--st-eyebrow-bg: #e11d48;
	--st-eyebrow-ink: #ffffff;
}

.ord-style-screen--mono .ord-style-hero {
	padding: 0.6em 0;
	border-top: 0.32em solid #000000;
}

.ord-style-screen--mono .ord-style-h1 {
	text-transform: uppercase;
	letter-spacing: -0.03em;
}

.ord-style-screen--mono .ord-style-card {
	padding: 0.6em 0;
	border-top: 1px solid #000000;
}

.ord-style-screen--mono .ord-style-links {
	font-size: 0.76em;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ord-style-screen--mono .ord-style-input {
	background: #ffffff;
	border-bottom: 1px solid #000000;
}

/* --- 16. Claymorphism 3D ----------------------------------- */
.ord-style-screen--clay {
	--st-bg: #eef1ff;
	--st-ink: #3b3f5c;
	--st-muted: #7a80a3;
	--st-accent: #8b7bff;
	--st-accent-ink: #ffffff;
	--st-card-bg: #f7f8ff;
	--st-card-border: none;
	--st-radius: 22px;
	--st-btn-radius: 18px;
	--st-card-shadow: 0 10px 20px rgba(90, 90, 140, 0.16), inset -4px -4px 8px rgba(255, 255, 255, 0.9), inset 4px 4px 8px rgba(120, 120, 175, 0.18);
	--st-hero-bg: #f2f4ff;
	--st-hero-ink: #3b3f5c;
	--st-hero-sub: #7a80a3;
}

.ord-style-screen--clay .ord-style-hero {
	box-shadow: 0 12px 24px rgba(90, 90, 140, 0.18), inset -6px -6px 12px rgba(255, 255, 255, 0.9), inset 6px 6px 12px rgba(120, 120, 175, 0.18);
}

.ord-style-screen--clay .ord-style-btn {
	box-shadow: 0 6px 12px rgba(90, 90, 140, 0.22), inset -3px -3px 6px rgba(255, 255, 255, 0.45);
}

.ord-style-screen--clay .ord-style-input {
	box-shadow: inset 4px 4px 8px rgba(120, 120, 175, 0.18), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
}

/* --- Gallery responsive ------------------------------------- */
@media (max-width: 900px) {
	.ord-ui-grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.ord-ui-card:hover {
		transform: none;
		box-shadow: var(--ord-shadow-sm);
	}
}

@media (max-width: 640px) {
	.ord-ui-card { padding: 14px; }

	.ord-ui-card-no {
		min-width: 46px;
		height: 46px;
		font-size: 1rem;
	}
}