/* ShikaMoo Coming Soon. Colours and type from the ShikaMoo Brand Guide v1. */
:root {
	--sm-teal: #0E4A45;
	--sm-paper: #F7F3EA;
	--sm-cream: #F6EFE2;
	--sm-sunset: #E4572E;
	--sm-coral: #FF7A59;
	--sm-sage: #4F7F78;
	--sm-mint: #A9D6C9;
	--sm-mist: #B1C0B8;
	--sm-rule-teal: #5F847C;
	--sm-serif: 'Lora', Georgia, serif;
	--sm-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sm-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

body.smuc {
	margin: 0;
	background: var(--sm-paper);
	color: var(--sm-teal);
	font-family: var(--sm-sans);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
:where(.smuc) *, :where(.smuc) *::before, :where(.smuc) *::after { box-sizing: border-box; }
:where(.smuc) a { color: inherit; }
:where(.smuc) img { max-width: 100%; height: auto; display: block; }
:where(.smuc) :is(p, h1, ol) { margin: 0; }

.smuc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Labels: Inter Bold caps, wide tracking (poster series label) */
.smuc-label {
	margin: 0;
	font: 700 12px/1.2 var(--sm-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sm-sage);
}
.smuc-rule { padding-bottom: 14px; border-bottom: 1px solid var(--sm-mist); }

/* Wordmark lockup: lowercase Inter Bold + dhow */
.smuc-lock {
	display: inline-flex; align-items: center; gap: 10px;
	font: 700 20px/1 var(--sm-sans); color: var(--sm-teal); text-decoration: none;
}
.smuc-lock:hover { color: var(--sm-teal); }
.smuc-lock img { width: 40px; }
.smuc-lock--sm { font-size: 15px; gap: 8px; }
.smuc-lock--sm img { width: 28px; }

/* Top bar */
.smuc-top__in {
	display: flex; justify-content: space-between; align-items: center;
	padding-top: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--sm-mist);
}
.smuc-top__link {
	font: 700 12px/1 var(--sm-sans); letter-spacing: .18em; text-transform: uppercase;
	text-decoration: none; color: var(--sm-sage);
}
.smuc-top__link:hover { color: var(--sm-sunset); }

/* Hero */
.smuc-hero {
	display: grid; grid-template-columns: .95fr 1.15fr; gap: 48px; align-items: center;
	padding-top: 72px; padding-bottom: 96px;
}
.smuc-h1 {
	margin: 22px 0 0;
	font: 700 clamp(56px, 7.6vw, 104px)/.95 var(--sm-serif);
	letter-spacing: -.02em;
	color: var(--sm-teal);
	text-transform: lowercase;
}
.smuc-h1 span { display: block; color: var(--sm-sunset); }
.smuc-intro { margin: 30px 0 0; max-width: 30em; font-size: 19px; line-height: 1.5; }
.smuc-status {
	margin: 18px 0 0; max-width: 32em; color: var(--sm-sage);
	display: flex; gap: 12px; align-items: baseline;
}
.smuc-dot {
	flex: none; width: 8px; height: 8px; border-radius: 50%;
	background: var(--sm-sunset); transform: translateY(-2px);
	animation: smuc-pulse 2.4s ease-in-out infinite;
}
@keyframes smuc-pulse { 50% { opacity: .35; } }

.smuc-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.smuc-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 22px; border-radius: 2px;
	font: 700 15px/1 var(--sm-sans); text-decoration: none;
	transition: background-color .15s, color .15s, border-color .15s;
}
.smuc-btn--solid { background: var(--sm-teal); color: var(--sm-cream) !important; border: 2px solid var(--sm-teal); }
.smuc-btn--solid:hover { background: #0a3632; border-color: #0a3632; }
.smuc-btn--line { border: 2px solid var(--sm-teal); color: var(--sm-teal); }
.smuc-btn--line:hover { background: var(--sm-teal); color: var(--sm-cream); }
.smuc a:focus-visible { outline: 3px solid var(--sm-sunset); outline-offset: 3px; }

/* Poster fan */
.smuc-fan { position: relative; aspect-ratio: 1 / .54; }
.smuc-fan__p {
	position: absolute; width: 31.5%;
	box-shadow: 0 1px 2px rgba(14, 74, 69, .12), 0 18px 40px -12px rgba(14, 74, 69, .35);
}
.smuc-fan__p--1 { left: 0; top: 8%; }
.smuc-fan__p--2 { left: 34.25%; top: 0; }
.smuc-fan__p--3 { right: 0; top: 12%; }

/* About band: teal, built like a print */
.smuc-about { background: var(--sm-teal); color: var(--sm-cream); padding: 80px 0 88px; }
.smuc-about .smuc-label { color: var(--sm-mint); }
.smuc-about .smuc-rule { border-color: var(--sm-rule-teal); }
.smuc-lines { list-style: none; padding: 0; margin: 34px 0 0; max-width: 760px; }
.smuc-lines li { display: flex; margin-top: 0; gap: 18px; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.4; margin-bottom: 16px; }
.smuc-n { flex: none; min-width: 14px; padding-top: 2px; font: 400 14px/1.6 var(--sm-mono); color: var(--sm-coral); }
.smuc-closing { margin: 26px 0 0; font: italic 400 clamp(20px, 2.3vw, 26px)/1.35 var(--sm-serif); }
.smuc-closing em { color: var(--sm-coral); }

/* Footer: MEANING + lockup, like the print footer */
.smuc-foot { padding: 0 0 28px; }
.smuc-foot__in {
	display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
	padding-top: 40px;
}
.smuc-meaning { margin: 6px 0 0; font: 700 clamp(20px, 2.4vw, 28px)/1.2 var(--sm-sans); }
.smuc-foot__right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 15px; }
.smuc-foot__right a { text-decoration: none; color: var(--sm-sage); }
.smuc-foot__right a:hover { color: var(--sm-sunset); }
.smuc-copy { margin: 28px auto 0; padding-top: 16px; border-top: 1px solid var(--sm-mist); font-size: 13px; color: var(--sm-sage); }

/* Phone and small tablet */
@media (max-width: 860px) {
	.smuc-hero { grid-template-columns: 1fr; gap: 48px; padding-top: 44px; padding-bottom: 64px; }
	.smuc-fan { max-width: 520px; width: 100%; margin: 0 auto; }
	.smuc-about { padding: 56px 0 64px; }
}
@media (max-width: 480px) {
	.smuc-wrap { padding: 0 16px; }
	.smuc-intro { font-size: 17px; }
	.smuc-actions { flex-direction: column; }
	.smuc-btn { width: 100%; }
	.smuc-foot__in { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .smuc-dot { animation: none; } }
