/* Mary Ann's Closet: base, header, footer, shared components.
   Design rules (see CLAUDE.md): no flat pale off-white fills, no script fonts,
   sections sit on white, white with a hairline, or a deliberate brand colour. */

:root {
	--navy: #2c4a6e;      /* headings, buttons */
	--slate: #46678a;     /* dark band */
	--hero: #c6dff2;      /* soft sky hero */
	--sky: #8ec0e5;       /* brand blue: fills and illustration only */
	--sky-soft: #dcebf7;
	--sky-ink: #2f6c9c;   /* links on white */
	--sun: #f5d58a;       /* butter accent */
	--sun-deep: #e9b949;
	--rose: #9c4a57;      /* accent line on the light hero */
	--butter: #f8e7bd;
	--blush: #f7dbd2;
	--sage: #d5e5cf;
	--ink: #233a55;
	--muted: #5a6d80;
	--line: #dde8f1;
	--white: #ffffff;
	--display: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
	--body: "Mulish", "Helvetica Neue", Arial, sans-serif;
	--radius: 22px;
	--max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--body);
	font-size: 18px;
	line-height: 1.65;
}
img { max-width: 100%; height: auto; }
a { color: var(--sky-ink); }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--sun-deep); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; margin: 0; text-wrap: balance; color: var(--navy); }
p { margin: 0; }

.gut { padding-inline: max(20px, calc((100% - var(--max)) / 2)); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; z-index: 100; top: 8px; left: 8px;
	background: var(--white); padding: 10px 16px; border-radius: 999px;
}

/* ---- Pills ---------------------------------------------------------- */
.pill {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1;
	text-decoration: none; white-space: nowrap;
	border-radius: 999px; padding: 12px 26px; border: 2px solid currentColor;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pill__chev { width: 9px; height: 14px; }
.pill--navy { color: var(--navy); }
.pill--navy:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pill--light { color: var(--white); }
.pill--light:hover { background: var(--white); color: var(--navy); }
.pill--sun { background: var(--sun); border-color: var(--sun); color: var(--navy); }
.pill--sun:hover { background: var(--sun-deep); border-color: var(--sun-deep); color: var(--navy); }

/* ---- Header --------------------------------------------------------- */
.site-head {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding-block: 20px; background: var(--white); border-bottom: 1px solid var(--line);
	position: relative;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); }
.brand__mark { flex: none; }
.brand__wm { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: .95; }
.brand__wm small { display: block; margin-top: 5px; line-height: 1.1; font-size: 14px; font-weight: 600; color: var(--sky-ink); letter-spacing: .02em; }
.custom-logo { max-height: 64px; width: auto; }

.site-nav { margin-left: auto; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; }
.site-nav__list a { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--navy); text-decoration: none; }
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a { color: var(--sky-ink); }

.site-head__actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
	display: none; font: 600 16px var(--display); color: var(--navy); background: none;
	border: 2px solid var(--navy); border-radius: 999px; padding: 9px 18px; cursor: pointer;
}

@media (max-width: 900px) {
	.nav-toggle { display: inline-block; }
	.site-head { flex-wrap: wrap; }
	.site-nav { display: none; order: 3; width: 100%; margin: 0; }
	.site-nav.is-open { display: block; }
	.site-nav__list { flex-direction: column; gap: 4px; padding-block: 12px 4px; }
	.site-nav__list a { display: block; padding: 10px 0; font-size: 20px; border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
	.brand__wm { font-size: 20px; }
	.site-head__actions .pill { padding: 10px 16px; font-size: 16px; }
}

/* ---- Circle photo + swoosh ----------------------------------------- */
.portrait { position: relative; justify-self: center; width: min(100%, 500px); aspect-ratio: 1; color: var(--white); }
.portrait__circle {
	position: absolute; inset: 6%; border-radius: 50%; overflow: hidden;
	display: grid; place-items: center;
	background:
		radial-gradient(circle at 30% 30%, var(--sky-soft) 0 18%, transparent 19%),
		radial-gradient(circle at 70% 64%, var(--butter) 0 14%, transparent 15%),
		radial-gradient(circle at 38% 72%, var(--blush) 0 11%, transparent 12%),
		linear-gradient(160deg, #ffffff, #e6f0f8);
}
.portrait__circle img { width: 100%; height: 100%; object-fit: cover; }
.portrait__circle svg { width: 44%; height: auto; }
.portrait__ph {
	align-self: end; margin-bottom: 12%; font-size: 13px; color: var(--white);
	background: rgba(44, 74, 110, .78); padding: 6px 12px; border-radius: 999px; text-align: center; max-width: 80%;
}
.swoosh { position: absolute; top: -4%; right: -8%; width: 78%; height: auto; overflow: visible; pointer-events: none; }

/* Swoosh draws itself in when its photo comes into view. Only hidden once JS
   has confirmed it can reveal it (html.has-js), so no-JS visitors see it drawn. */
.has-js .swoosh path { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.has-js .portrait.is-drawn .swoosh path {
	stroke-dashoffset: 0;
	opacity: 1;
	transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1) .35s, opacity .1s linear .35s;
}
@media (prefers-reduced-motion: reduce) {
	.has-js .swoosh path { stroke-dashoffset: 0; opacity: 1; transition: none; }
}

/* ---- Prose ---------------------------------------------------------- */
.prose { display: grid; gap: 16px; max-width: 64ch; color: var(--muted); }
.prose > * { margin: 0; }
.prose p:first-child { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.2em; display: grid; gap: 6px; }
.prose strong { color: var(--ink); }

/* ---- Plain pages, news --------------------------------------------- */
.page-plain { padding-block: 64px 96px; display: grid; gap: 22px; }
.page-plain h1 { font-size: clamp(36px, 5vw, 56px); }
.news-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.news-item { display: grid; gap: 8px; align-content: start; }
.news-item h2 { font-size: 24px; }
.news-item h2 a { color: var(--navy); text-decoration: none; }
.news-item__img img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.news-item__date { font-size: 14px; color: var(--muted); }
.post-hero img { border-radius: var(--radius); }

/* ---- Footer --------------------------------------------------------- */
/* Explicit columns: a flexible first track can't be mixed with auto-fit
   (that invalidated the old rule and collapsed the footer to one column). */
.sfoot {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: 28px 40px;
	padding-block: 44px 28px;
	border-top: 1px solid var(--line);
	font-size: 15px; line-height: 1.55; color: var(--muted);
}
.sfoot--cols-2 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.sfoot--cols-3 { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
.sfoot--cols-5 { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); }
.sfoot--cols-6 { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); }
.sfoot__col { display: grid; gap: 6px; align-content: start; }
.sfoot__col--brand p:not(.sfoot__h) { max-width: 34ch; }
.sfoot__h { font: 600 17px var(--display); color: var(--navy); margin-bottom: 2px; }
.sfoot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sfoot a { color: var(--muted); text-decoration: none; }
.sfoot a:hover { color: var(--sky-ink); }
.sfoot__rich p { margin: 0 0 8px; }
.sfoot__rich a { color: var(--sky-ink); }
.sfoot__legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 16px; font-size: 13px; }

@media (max-width: 1000px) {
	.sfoot, .sfoot[class*="sfoot--cols"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sfoot__col--brand, .sfoot__col--signup { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.sfoot, .sfoot[class*="sfoot--cols"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
}

.admin-note { font-size: 14px; background: var(--butter); color: var(--ink); padding: 10px 14px; border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}