/*
 * Base styles and the frame: header (three variants), footer, buttons,
 * labels, plain pages, lists and the 404. Sizes and colours from the
 * approved designs (docs/design/pages/).
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--fe-cream);
	color: var(--fe-text);
	font-family: var(--fe-font-sans);
	font-size: var(--fe-size-medium);
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4 {
	font-family: var(--fe-font-serif);
	font-weight: 400;
	font-synthesis: none; /* never a fake bold Alice */
	line-height: 1.2;
}

a {
	color: var(--fe-primary);
}

a:hover {
	color: var(--fe-primary-hover);
}

:focus-visible {
	outline: 2px solid var(--fe-primary);
	outline-offset: 3px;
}

img {
	max-width: 100%;
	height: auto;
}

[tabindex="-1"]:focus {
	outline: none;
}

.skip-link {
	position: absolute;
	z-index: 100;
	left: var(--fe-gutter);
	top: -4rem;
	padding: 0.75rem 1rem;
	background: var(--fe-white);
	color: var(--fe-ink);
	font-weight: 700;
	border-radius: 0 0 8px 8px;
}

.skip-link:focus {
	top: 0;
}

/* Read by screen readers, not shown. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Pill button: accent on dark by default. */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.625rem 1.375rem;
	border-radius: var(--fe-pill);
	background: var(--fe-accent);
	color: var(--fe-on-accent);
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
}

.button:hover {
	background: var(--fe-lilac);
	color: var(--fe-on-accent);
}

/* Uppercase label above a heading. */
.eyebrow {
	margin: 0 0 1.125rem;
	font-size: 0.875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--fe-eyebrow);
}

.eyebrow--center {
	text-align: center;
}

.eyebrow--on-dark {
	color: var(--fe-accent);
}

/* ◆◇◆ between two hairlines. */
.ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--fe-accent);
}

.ornament::before,
.ornament::after {
	content: "";
	display: block;
	width: 64px;
	height: 1px;
	background: var(--fe-line-soft);
}

.ornament span {
	font-size: 10px;
	letter-spacing: 10px;
	margin-right: -10px; /* letter-spacing adds space after the last glyph */
}

/*
 * ---------- Cards that lift ----------
 * One pattern for every card on the site (class fe-lift): on hover (a real
 * mouse only, so it never sticks after a tap) and on keyboard focus, the
 * card rises 5px, its shadow softens outward and its background takes a
 * small step within the same shade. Each card sets only its colours:
 *   --fe-lift-bg-hover   background while lifted (required)
 *   --fe-lift-shadow     shadow while lifted
 *   --fe-lift-shadow-rest shadow at rest (default none)
 * Under prefers-reduced-motion the card does not move; the shade change
 * and the shadow stay.
 */
.fe-lift {
	box-shadow: var(--fe-lift-shadow-rest, 0 0 0 0 transparent);
	transition: transform 250ms ease, box-shadow 250ms ease, background-color 250ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.fe-lift:hover {
		transform: translateY(-5px);
		box-shadow: var(--fe-lift-shadow, 0 18px 36px -18px rgba(26, 5, 51, 0.32));
		background-color: var(--fe-lift-bg-hover);
	}
}

/* Two rules, not one list: :has() is not forgiving, and a browser without it would drop the whole list. */
.fe-lift:focus-visible {
	transform: translateY(-5px);
	box-shadow: var(--fe-lift-shadow, 0 18px 36px -18px rgba(26, 5, 51, 0.32));
	background-color: var(--fe-lift-bg-hover);
}

.fe-lift:has(:focus-visible) {
	transform: translateY(-5px);
	box-shadow: var(--fe-lift-shadow, 0 18px 36px -18px rgba(26, 5, 51, 0.32));
	background-color: var(--fe-lift-bg-hover);
}

/* A row whose whole area is its link (catalog and related rows): the link's box covers the row. */
.fe-lift--row {
	position: relative;
}

.fe-lift--row > a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.fe-lift {
		transition: box-shadow 250ms ease, background-color 250ms ease;
	}

	.fe-lift:hover,
	.fe-lift:focus-visible {
		transform: none;
	}

	.fe-lift:has(:focus-visible) {
		transform: none;
	}
}

/* ---------- Royal button ---------- */

/*
 * A reusable gilded-frame button (D55), first used for "Enter the library"
 * on the homepage: ink with a gold outer line and an inner gold frame, a
 * purple glow rising from below, and on hover or keyboard focus a slow gold
 * shine, a brighter frame and glow, and a 2px lift. Markup:
 * <a class="fe-royal-button"><span class="fe-royal-button__frame" aria-hidden="true"></span><span class="fe-royal-button__gem" aria-hidden="true">◆</span>Label<span class="fe-royal-button__gem" aria-hidden="true">◆</span></a>
 */
.fe-royal-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	padding: 0 34px;
	overflow: hidden;
	isolation: isolate;
	background: var(--fe-ink);
	color: var(--fe-gold);
	font-family: var(--fe-font-serif);
	font-size: 1.3125rem;
	letter-spacing: 0.03em;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px var(--fe-gold-muted), 0 14px 28px -16px rgba(26, 5, 51, 0.6);
	transition: transform 0.6s ease, box-shadow 0.6s ease, color 0.6s ease;
}

/* The purple glow rising from below. */
.fe-royal-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(120% 140% at 50% 115%, rgba(126, 40, 190, 0.55) 0%, rgba(97, 12, 159, 0.22) 45%, transparent 75%);
	opacity: 0.75;
	transition: opacity 0.9s ease;
}

/* The inner gold frame. */
.fe-royal-button__frame {
	position: absolute;
	inset: 5px;
	pointer-events: none;
	border: 1px solid rgba(216, 184, 119, 0.55);
	border-radius: 2px;
	transition: border-color 0.6s ease;
}

.fe-royal-button__gem {
	font-size: 10px;
	color: var(--fe-gold-muted);
}

/* The slow gold shine. */
.fe-royal-button::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	transform: skewX(-20deg);
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(232, 200, 130, 0.22), transparent);
	transition: left 1.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.fe-royal-button:hover,
.fe-royal-button:focus-visible {
	transform: translateY(-2px);
	color: var(--fe-gold-light);
	text-decoration: none;
	box-shadow: inset 0 0 0 1px var(--fe-gold), 0 20px 34px -16px rgba(61, 10, 110, 0.7);
}

.fe-royal-button:hover::before,
.fe-royal-button:focus-visible::before {
	opacity: 1;
}

.fe-royal-button:hover .fe-royal-button__frame,
.fe-royal-button:focus-visible .fe-royal-button__frame {
	border-color: rgba(232, 200, 130, 0.85);
}

.fe-royal-button:hover::after,
.fe-royal-button:focus-visible::after {
	left: 120%;
}

.fe-royal-button:focus-visible {
	outline: 2px solid var(--fe-primary);
	outline-offset: 4px;
}

/* Phones: one line at 390px. */
@media (max-width: 419px) {
	.fe-royal-button {
		padding: 0 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fe-royal-button,
	.fe-royal-button::before,
	.fe-royal-button::after,
	.fe-royal-button__frame {
		transition: none;
	}

	.fe-royal-button:hover,
	.fe-royal-button:focus-visible {
		transform: none;
	}
}

/* ---------- Header ---------- */

.site-header__inner {
	max-width: var(--fe-wide-width);
	margin: 0 auto;
	padding: 22px var(--fe-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/*
 * The brand (parts/brand.php, D57): logo and name, the same in the header
 * and the footer. Its sizes follow the page's header variant (the
 * fe-header-<variant> class on <body>) and the phone rules below, so the
 * footer's brand always matches the header's on the same page.
 */
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
}

.brand:hover {
	color: inherit;
	text-decoration: none;
}

.brand__logo {
	display: block;
	width: 44px;
	height: 44px;
}

.brand__name {
	font-family: var(--fe-font-serif);
	font-size: 1.5rem;
	line-height: 1.2;
}

.site-header__nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1rem;
}

.site-header__nav a:not(.button) {
	display: inline-block;
	padding: 10px 0;
	text-decoration: none;
	text-underline-offset: 8px;
	text-decoration-thickness: 2px;
}

.site-header__nav a:not(.button):hover,
.site-header__nav a[aria-current] {
	text-decoration-line: underline;
}

/* Dark: the challenge. */
.site-header--dark {
	background: var(--fe-ink);
	color: var(--fe-on-dark);
}

.site-header--dark .site-header__nav a:not(.button) {
	color: var(--fe-lilac-pale);
	text-decoration-color: var(--fe-accent);
}

.site-header--dark .site-header__nav a[aria-current] {
	color: var(--fe-on-dark);
}

.site-header--dark :focus-visible,
.site-header--over-dark :focus-visible {
	outline-color: var(--fe-lilac-pale);
}

/* Light cream: the homepage, stories, plain pages. Outlined button. */
.site-header--light {
	background: var(--fe-cream);
	color: var(--fe-ink);
	border-bottom: 1px solid var(--fe-line);
}

.site-header--light .site-header__inner {
	padding-top: 18px;
	padding-bottom: 18px;
}

.fe-header-light .brand__logo {
	width: 40px;
	height: 40px;
}

.fe-header-light .brand__name {
	font-size: 1.375rem;
}

.site-header--light .site-header__nav a:not(.button) {
	color: var(--fe-plum);
	text-decoration-color: var(--fe-accent);
}

.site-header--light .site-header__nav a[aria-current] {
	color: var(--fe-ink);
}

.site-header--light .button {
	background: transparent;
	color: var(--fe-primary);
	border: 1.5px solid var(--fe-primary);
	padding: 0.5rem 1.25rem;
}

.site-header--light .button:hover {
	background: var(--fe-primary);
	color: var(--fe-white);
}

/* Transparent over a dark scene: the library. Gold accents. */
.site-header--over-dark {
	position: relative;
	z-index: 5;
	background: transparent;
	color: var(--fe-on-dark);
}

.site-header--over-dark .site-header__nav a:not(.button) {
	color: var(--fe-lilac-pale);
	text-decoration-color: rgba(255, 230, 176, 0.5);
}

.site-header--over-dark .site-header__nav a[aria-current] {
	color: var(--fe-gold-pale);
}

.site-header--over-dark .button {
	background: var(--fe-gold);
	color: var(--fe-on-gold);
}

.site-header--over-dark .button:hover {
	background: var(--fe-gold-pale);
}

@media (max-width: 560px) {
	.site-header__inner {
		padding-top: 16px;
		padding-bottom: 16px;
		row-gap: 8px;
	}

	.brand__name,
	.fe-header-light .brand__name {
		font-size: 1.25rem;
	}

	.site-header__nav {
		width: 100%;
	}

	.site-header__nav ul {
		column-gap: 20px;
		font-size: 0.9375rem;
	}

	/* The button takes the far end of the row it lands on. */
	.site-header__nav li:last-child {
		margin-left: auto;
	}
}

/*
 * Phones: a Menu button opens a panel with the links and a prominent
 * waitlist button (D44). Keyed on html.fe-js, printed in <head>
 * (inc/assets.php), so the header has this shape from the first paint;
 * assets/js/menu.js opens and closes it (data-menu="open"). Without
 * JavaScript the button stays hidden and the links show as above.
 * Desktop is unchanged.
 */
.site-header__toggle {
	display: none;
}

@media (max-width: 760px) {
	.fe-js .site-header__inner {
		flex-wrap: wrap;
		row-gap: 0;
	}

	.fe-js .brand__logo,
	.fe-js .fe-header-light .brand__logo {
		width: 36px;
		height: 36px;
	}

	.fe-js .brand {
		gap: 10px;
	}

	.fe-js .brand__name,
	.fe-js .fe-header-light .brand__name {
		font-size: 1.125rem;
	}

	.fe-js .site-header__toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		margin: 0 0 0 auto;
		padding: 0 16px;
		border: 1.5px solid currentColor;
		border-radius: var(--fe-pill);
		background: transparent;
		color: inherit;
		font: 700 0.9375rem/1 var(--fe-font-sans);
		cursor: pointer;
	}

	.fe-js .site-header--light .site-header__toggle {
		color: var(--fe-primary);
	}

	.fe-js .site-header--over-dark .site-header__toggle {
		color: var(--fe-gold-pale);
	}

	/* Three lines; a cross while open. */
	.site-header__toggle-icon {
		position: relative;
		width: 16px;
		height: 2px;
		border-radius: 1px;
		background: currentColor;
		box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
	}

	.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon {
		box-shadow: none;
		transform: rotate(45deg);
	}

	.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: currentColor;
		transform: rotate(90deg);
	}

	.fe-js .site-header:not([data-menu="open"]) .site-header__nav {
		display: none;
	}

	.fe-js .site-header[data-menu="open"] .site-header__nav {
		width: 100%;
		margin-top: 14px;
		padding-top: 6px;
		border-top: 1px solid currentColor;
		border-top-color: color-mix(in srgb, currentColor 22%, transparent);
	}

	.fe-js .site-header[data-menu="open"] .site-header__nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		font-size: 1.125rem;
	}

	.fe-js .site-header[data-menu="open"] .site-header__nav a:not(.button) {
		display: block;
		padding: 14px 0;
	}

	.fe-js .site-header[data-menu="open"] .site-header__nav li:last-child {
		margin: 14px 0 6px;
	}

	.fe-js .site-header[data-menu="open"] .site-header__cta {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 52px;
		font-size: 1.0625rem;
	}

	/* On the light header the desktop button is an outline; in the panel it is the main action. */
	.fe-js .site-header--light[data-menu="open"] .site-header__cta {
		background: var(--fe-primary);
		color: var(--fe-white);
	}
}

/* The narrowest phones: brand and button still share one row. */
@media (max-width: 359px) {
	.fe-js .site-header__inner {
		column-gap: 8px;
	}

	.fe-js .brand {
		gap: 8px;
	}

	.fe-js .brand__name,
	.fe-js .fe-header-light .brand__name {
		font-size: 0.9375rem;
	}

	.fe-js .site-header__toggle {
		gap: 6px;
		padding: 0 10px;
		font-size: 0.875rem;
	}
}

/* ---------- Footer ---------- */

/* The approved design, docs/design/pages/footer.dc.html (D54): the brand
   with the social logos, then Explore, About us and Policies, a thin rule,
   the copyright line. Phones (900px and below): two columns, the brand and
   Policies across the full width, Explore and About us side by side. */
.site-footer {
	background: var(--fe-ink-deep);
	color: var(--fe-footer-text);
	padding: 72px var(--fe-gutter) 40px;
	font-family: var(--fe-font-sans);
	font-size: 1rem;
}

.site-footer p {
	margin: 0;
}

.site-footer a {
	color: var(--fe-footer-link);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--fe-white);
	text-decoration: underline;
}

.site-footer :focus-visible {
	outline-color: var(--fe-lilac-pale);
}

.site-footer__inner {
	max-width: var(--fe-wide-width);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: 48px;
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

/* The brand (D57) in white on the footer, as in the dark header; not the footer's link colour or hover underline. */
.site-footer .brand,
.site-footer .brand:hover {
	color: var(--fe-white);
	text-decoration: none;
}

.site-footer__heading {
	font-family: var(--fe-font-serif);
	font-size: 1.3125rem;
	color: var(--fe-lilac);
}

.site-footer__links,
.site-footer__social {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Logos in 44px tap targets. The negative margin starts the first logo
   (Instagram, a rounded square) 3px inside the round brand logo above it:
   the circle only reaches its left edge at mid-height, so with the edges
   equal the square looked further left (D62). */
.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	margin-left: -8px;
}

.site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--fe-footer-text);
	transition: color 0.2s;
}

.site-footer__social a:hover {
	color: var(--fe-white);
}

.site-footer__social a:focus-visible {
	outline: 2px solid var(--fe-lilac-pale);
	outline-offset: 2px;
}

.site-footer__bottom {
	padding-top: 44px; /* with the 44px gap above, the rule sits halfway, as in the design */
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.875rem;
}

.site-footer__copyright {
	color: var(--fe-footer-muted);
}

@media (max-width: 900px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px 24px;
	}

	.site-footer__col--wide {
		grid-column: 1 / -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-footer__social a {
		transition: none;
	}
}

/* ---------- Plain pages, lists, 404 ---------- */

.plain-page,
.site-main {
	max-width: calc(var(--fe-reading-width) + 2 * var(--fe-gutter));
	margin: 0 auto;
	padding: 72px var(--fe-gutter) 112px;
}

.page-title {
	margin: 0 0 2rem;
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--fe-ink);
}

.byline,
.post-card__date,
.pagination__status,
.empty-state {
	color: var(--fe-muted);
	font-size: var(--fe-size-small);
}

.post-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--fe-line);
}

.post-card {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--fe-line);
}

.post-card__title {
	margin: 0 0 0.25rem;
	font-size: 1.625rem;
	line-height: 1.25;
}

.post-card__title a {
	color: var(--fe-ink);
	text-decoration: none;
}

.post-card__title a:hover {
	color: var(--fe-primary);
}

.post-card__date,
.post-card__excerpt {
	margin: 0.25rem 0 0;
}

.post-card__excerpt {
	color: var(--fe-muted);
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: baseline;
	margin-top: 2rem;
}

.not-found__inner {
	text-align: center;
	padding: 2rem 0;
}

.not-found__inner .ornament {
	margin-bottom: 2.5rem;
}

.not-found__text {
	margin: 0 auto 2rem;
	max-width: 26em;
	font-family: var(--fe-font-reading);
	font-style: italic;
	font-size: 1.375rem;
	line-height: 1.5;
	color: var(--fe-muted);
}

.not-found__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 700;
}

.not-found__links a {
	display: inline-block;
	padding: 10px 0;
}