/*
Theme Name: mics
Theme URI: https://mics.space
Author: Michele · Mics.space
Author URI: https://mics.space
Description: Dark "darkroom" portfolio theme for mics.space: film series as a typographic index, contact-sheet galleries with lightbox, DJ playlists with click-to-load embeds. No page builder, no premium plugins, self-hosted font.
Version: 2.1.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mics
Tags: portfolio, photography, dark, custom-logo, custom-menu, featured-images, translation-ready
*/

/* Archivo variable (wght 100–900, wdth 62–125) — SIL OFL, see assets/fonts/OFL.txt */
@font-face {
	font-family: "Archivo mics";
	src: url("assets/fonts/archivo-latin.woff2") format("woff2-variations"), url("assets/fonts/archivo-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	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: "Archivo mics";
	src: url("assets/fonts/archivo-latin-ext.woff2") format("woff2-variations"), url("assets/fonts/archivo-latin-ext.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	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;
}

:root {
	--ground: #161411;   /* developer tray */
	--surface: #201d19;
	--raise: #2b2722;
	--line: rgba(236, 230, 218, .12);
	--line-strong: rgba(236, 230, 218, .3);
	--paper: #ece6da;    /* fibre paper */
	--dust: #978e81;
	--safelight: #f2a541;
	--font: "Archivo mics", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--pad: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
	--tabbar-h: 64px;
	--wrap: 1440px;
	--measure: 40rem;
	--header-h: 76px;
	--ease: cubic-bezier(.2, .7, .2, 1);
	color-scheme: dark;
}

/* Base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ground); }

body {
	position: relative;
	isolation: isolate;
	margin: 0;
	background: var(--ground);
	color: var(--paper);
	font: 400 17px/1.6 var(--font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Film grain, behind content only */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	opacity: .06;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.nav-open, body.lb-open { overflow: hidden; }

img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; vertical-align: middle; }

a { color: var(--paper); text-decoration: none; transition: color .15s; }
a:hover { color: var(--safelight); }

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

h1, h2, h3, h4, h5, h6 { margin: 1.8em 0 .5em; color: var(--paper); font-weight: 700; line-height: 1.15; }
h2 { font-size: 28px; font-stretch: 85%; }
h3 { font-size: 22px; }

p { margin: 0 0 1.4em; }
strong, b { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3em 0; }

::selection { background: var(--safelight); color: var(--ground); }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 1001;
	width: auto;
	height: auto;
	padding: 12px 18px;
	clip: auto;
	background: var(--safelight);
	color: var(--ground);
	font-weight: 600;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

.site-main { display: block; overflow-x: clip; min-height: 60vh; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}

/* Display type: condensed, heavy */

.display {
	margin: 0;
	color: var(--paper);
	font-size: clamp(52px, 11vw, 168px);
	font-weight: 800;
	font-stretch: 62%;
	line-height: .86;
	letter-spacing: -.005em;
	overflow-wrap: anywhere;
}

/* Header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(22, 20, 17, .82);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	border-bottom: 1px solid transparent;
	transition: border-color .3s;
}

.site-header.is-scrolled { border-bottom-color: var(--line); }
.admin-bar .site-header { top: 32px; }

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--header-h);
	padding-inline: var(--pad);
}

.site-brand { flex: 0 0 auto; line-height: 0; }
.site-brand .custom-logo { width: auto; max-width: 180px; max-height: 46px; }
.logo-invert .custom-logo { filter: invert(1) hue-rotate(180deg); }

.site-title {
	color: var(--paper);
	font-size: 21px;
	font-weight: 650;
	font-stretch: 125%;
	line-height: 1;
	letter-spacing: -.02em;
}

/* Navigation */

.nav-menu, .nav-menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.nav-menu { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.nav-menu li { position: relative; }

.nav-menu a {
	display: block;
	padding: 10px 0;
	color: var(--paper);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
}

.nav-menu a:hover,
.nav-menu > .current-menu-item > a,
.nav-menu > .current-menu-ancestor > a,
.nav-menu > .current-menu-parent > a { color: var(--safelight); }

.nav-menu .menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 14px;
}

.nav-menu .sub-menu {
	position: absolute;
	top: calc(100% + 12px);
	right: -20px;
	z-index: 10;
	min-width: 270px;
	padding: 8px 0;
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }

.nav-menu .sub-menu a {
	padding: 9px 20px;
	color: var(--dust);
	font-size: 14px;
	white-space: nowrap;
}

.nav-menu .sub-menu a:hover,
.nav-menu .sub-menu .current-menu-item > a { background: var(--raise); color: var(--paper); }

.nav-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--paper);
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	position: absolute;
	left: 10px;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform .25s var(--ease), background-color .1s;
}

.nav-toggle__bars { top: 21px; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; left: 0; }
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg); }

@media (max-width: 860px) {
	:root { --header-h: 64px; }

	.nav-toggle { display: block; }

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: calc(100vh - var(--header-h));
		height: calc(100dvh - var(--header-h));
		padding: 8px var(--pad) 48px;
		overflow-y: auto;
		background: var(--ground);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .2s, transform .25s var(--ease), visibility .2s;
	}

	.site-nav.is-open { opacity: 1; visibility: visible; transform: none; }

	.nav-menu { flex-direction: column; align-items: stretch; gap: 0; }

	.nav-menu > li > a {
		padding: 14px 0 10px;
		border-bottom: 1px solid var(--line);
		font-size: clamp(40px, 12vw, 64px);
		font-weight: 800;
		font-stretch: 62%;
		line-height: 1;
	}

	.nav-menu .sub-menu {
		position: static;
		min-width: 0;
		padding: 10px 0 16px;
		background: none;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.nav-menu .menu-item-has-children::after { display: none; }
	.nav-menu .sub-menu a { padding: 7px 0; font-size: 17px; white-space: normal; }
	.nav-menu .sub-menu a:hover,
	.nav-menu .sub-menu .current-menu-item > a { background: none; }
	.nav-menu .sub-menu .current-menu-item > a { color: var(--safelight); }
}

@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* Page headers */

.page-head { padding-top: clamp(40px, 8vw, 120px); padding-bottom: clamp(32px, 5vw, 64px); }

.lede {
	max-width: var(--measure);
	margin: clamp(18px, 2.4vw, 28px) 0 0;
	color: var(--dust);
	font-size: clamp(17px, 1.7vw, 21px);
	line-height: 1.45;
}

.lede p { margin: 0; }

.entry-date { margin: 18px 0 0; color: var(--dust); font-size: 15px; }

/* Project header */

.project-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 32px;
	margin-top: clamp(24px, 3vw, 40px);
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.project-facts p { margin: 0; }
.project-gear { max-width: 60ch; font-size: clamp(16px, 1.5vw, 19px); }
.project-meta { display: flex; flex-wrap: wrap; gap: 4px 24px; color: var(--dust); font-size: 15px; }
.project-count { color: var(--safelight); font-variant-numeric: tabular-nums; }
.project-meta a { color: var(--dust); }
.project-meta a:hover { color: var(--safelight); }

/* Series index (home, archive, next series) */

.home-index { padding-top: clamp(20px, 4vw, 56px); }

.home-tagline { margin: 0 0 clamp(14px, 2vw, 22px); color: var(--dust); font-size: 15px; }

.index {
	position: relative;
	margin: 0;
	padding: 0 var(--pad);
	list-style: none;
}

.index__row { border-top: 1px solid var(--line); }
.index__row:last-child { border-bottom: 1px solid var(--line); }

.index__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 10px 40px;
	padding: clamp(14px, 1.8vw, 22px) 0 clamp(12px, 1.5vw, 18px);
	color: var(--paper);
}

.index__link:hover { color: var(--paper); }
.index__link:focus-visible { outline-offset: -2px; }

.index__title {
	position: relative;
	z-index: 1;
	display: block;
	font-size: clamp(42px, 7vw, 128px);
	font-weight: 800;
	font-stretch: 62%;
	line-height: .86;
	letter-spacing: -.005em;
	transition: font-stretch .6s var(--ease), opacity .35s, color .35s;
}

.index__meta {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: end;
	gap: 2px;
	max-width: 30ch;
	padding-bottom: .3em;
	color: var(--dust);
	font-size: 14px;
	line-height: 1.4;
	text-align: right;
	transition: color .35s, opacity .35s;
}

.index__label { color: var(--paper); font-weight: 600; }
.index__count { color: var(--safelight); font-variant-numeric: tabular-nums; }

.index__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s var(--ease);
}

.index__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.45) contrast(1.05);
	transform: scale(1.05);
	transition: transform 1.4s var(--ease);
}

@media (hover: hover) {
	.index:has(.index__link:hover, .index__link:focus-visible) .index__link:not(:hover):not(:focus-visible) .index__title,
	.index:has(.index__link:hover, .index__link:focus-visible) .index__link:not(:hover):not(:focus-visible) .index__meta { opacity: .2; }

	.index__link:hover .index__title,
	.index__link:focus-visible .index__title { font-stretch: 74%; }

	.index__link:hover .index__meta,
	.index__link:focus-visible .index__meta { color: var(--paper); }

	.index__link:hover .index__bg,
	.index__link:focus-visible .index__bg { opacity: 1; }

	.index__link:hover .index__bg img,
	.index__link:focus-visible .index__bg img { transform: scale(1); }
}

@media (max-width: 1100px) {
	.index__link { grid-template-columns: minmax(0, 1fr); }
	.index__meta { justify-items: start; max-width: none; padding-bottom: 0; text-align: left; }
}

@media (hover: none) {
	.index__row { border-top: 0; }
	.index__row:last-child { border-bottom: 0; }
	.index__row + .index__row { margin-top: clamp(28px, 6vw, 48px); }
	.index__link { grid-template-columns: minmax(0, 1fr); padding: 0; }
	.index__bg { position: relative; inset: auto; grid-row: 1; aspect-ratio: 3 / 2; opacity: 1; }
	.index__bg img { filter: brightness(.8); transform: none; }
	.index__bg + .index__title { margin-top: -.6em; padding-left: 12px; }
	.index__meta { padding-left: 12px; }
}

.index--intro .index__title,
.index--intro .index__meta { animation: mics-rise .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 80ms); }

@keyframes mics-rise {
	from { opacity: 0; transform: translateY(.4em); }
}

.filter-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	margin: 0;
	padding: 0 var(--pad) clamp(20px, 3vw, 32px);
	list-style: none;
	font-size: 15px;
}

.filter-links a { color: var(--dust); }
.filter-links a:hover { color: var(--paper); }
.filter-links a[aria-current] { color: var(--safelight); }

.next-series { margin-top: clamp(72px, 10vw, 150px); }

/* Contact sheet (project gallery) */

.sheet {
	--row-h: clamp(180px, 24vw, 380px);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(18px, 2.2vw, 30px) clamp(10px, 1.1vw, 16px);
	padding-inline: var(--pad);
}

.sheet::after { content: ""; flex: 999 1 0; }

.frame {
	display: flex;
	flex: var(--r, 1.5) 1 calc(var(--r, 1.5) * var(--row-h));
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	max-width: calc(var(--r, 1.5) * var(--row-h) * 1.7);
	color: var(--dust);
	cursor: zoom-in;
}

.frame__img { display: block; overflow: hidden; background: var(--surface); }

.frame img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--r, 1.5);
	object-fit: cover;
	transition: transform .9s var(--ease), opacity .3s;
}

.frame__no {
	color: var(--dust);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
	line-height: 1;
	transition: color .2s;
}

.frame:hover { color: var(--paper); }
.frame:hover .frame__no { color: var(--safelight); }

@media (max-width: 600px) {
	.frame { flex: 1 1 100%; max-width: none; }
}

@media (hover: hover) {
	.frame:hover img { transform: scale(1.025); }
	.sheet:has(.frame:hover) .frame:not(:hover) img { opacity: .55; }
}

/* Pages: title column + content column */

@media (min-width: 1100px) {
	.page-layout:has(> .page-head) {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
		gap: 0 clamp(40px, 5vw, 96px);
	}

	.page-layout > .page-head { position: sticky; top: var(--header-h); padding-bottom: 0; }
	.page-layout > .page-head .display { font-size: clamp(52px, 7.5vw, 124px); }
	.page-layout > .entry { padding-top: clamp(40px, 8vw, 120px); }
	.admin-bar .page-layout > .page-head { top: calc(var(--header-h) + 32px); }
}

/* Content */

.entry { max-width: var(--measure); }
.entry--wide { max-width: 1080px; }
.entry > :first-child { margin-top: 0; }
.entry img { display: block; }
.entry figure { margin: 2em 0; }
.entry ul, .entry ol { padding-left: 1.3em; }
.entry li { margin: .4em 0; }
.entry a:not([class]) { text-decoration: underline; text-decoration-color: var(--safelight); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.entry .alignwide { width: calc(min(100vw, var(--wrap)) - 2 * var(--pad)); max-width: none; }
.entry .alignfull { width: 100vw; max-width: none; margin-left: calc(-1 * max(0px, (100vw - var(--wrap)) / 2) - var(--pad)); }
.alignleft { float: left; margin: .3em 1.6em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.6em; }
.aligncenter { margin-inline: auto; }

.wp-caption-text, figcaption { margin-top: 10px; color: var(--dust); font-size: 14px; }

blockquote {
	margin: 2em 0;
	padding: 0 0 0 24px;
	border-left: 2px solid var(--safelight);
	font-size: 22px;
	line-height: 1.45;
}

pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
pre { overflow-x: auto; padding: 18px 20px; background: var(--surface); }

.wp-block-embed { margin: 0 0 1.5em; }
.wp-block-embed iframe { display: block; width: 100%; }
.entry iframe { display: block; margin-bottom: 1.5em; }

.home-content { padding-top: clamp(64px, 9vw, 130px); }

/* Embeds placeholder (click-to-load) */

.mics-embed {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	align-content: center;
	gap: 14px 24px;
	margin: 0 0 14px;
	padding: 22px 24px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	transition: border-color .2s;
}

.mics-embed:hover { border-color: var(--line-strong); }
.wp-block-embed .mics-embed { margin: 0; }
.wp-has-aspect-ratio .mics-embed { position: absolute; inset: 0; }

.mics-embed__head { display: grid; gap: 6px; min-width: 0; }
.mics-embed__label { color: var(--dust); font-size: 13px; line-height: 1; }

.mics-embed__title {
	margin: 0;
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 800;
	font-stretch: 62%;
	line-height: .95;
	overflow-wrap: anywhere;
}

.mics-embed__load {
	justify-self: end;
	padding: 11px 22px;
	border: 1px solid var(--paper);
	border-radius: 999px;
	background: transparent;
	color: var(--paper);
	font: 500 15px/1 var(--font);
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}

.mics-embed__load:hover, .mics-embed__load:focus-visible { border-color: var(--safelight); background: var(--safelight); color: var(--ground); }

.mics-embed__note { grid-column: 1 / -1; max-width: 56ch; margin: 0; color: var(--dust); font-size: 13px; line-height: 1.5; }

@media (max-width: 520px) {
	.mics-embed { grid-template-columns: minmax(0, 1fr); }
	.mics-embed__load { justify-self: start; }
}

/* Posts list & pagination */

.post-list { display: grid; gap: clamp(36px, 6vw, 64px); max-width: 960px; }

.post-card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(18px, 4vw, 40px); align-items: center; }
.post-card:not(:has(.post-card__media)) { grid-template-columns: 1fr; }
.post-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__title { margin: 0 0 6px; font-size: clamp(30px, 4vw, 48px); font-weight: 800; font-stretch: 62%; line-height: .95; }
.post-card__title a:hover { color: var(--safelight); }
.post-card__meta { margin: 0 0 12px; color: var(--dust); font-size: 14px; }
.post-card__body p:last-child { margin-bottom: 0; }

@media (max-width: 640px) { .post-card { grid-template-columns: 1fr; } }

.pagination { margin-top: clamp(40px, 6vw, 70px); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pagination .page-numbers { display: inline-block; min-width: 40px; padding: 8px 12px; border: 1px solid var(--line); text-align: center; }
.pagination .page-numbers.current { border-color: var(--safelight); color: var(--safelight); }

.post-navigation { margin-top: clamp(60px, 8vw, 110px); padding-top: 24px; border-top: 1px solid var(--line); }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 24px; }
.post-navigation .nav-next { margin-left: auto; text-align: right; }
.post-navigation a { display: grid; gap: 4px; }
.post-navigation em { color: var(--dust); font-size: 14px; font-style: normal; }
.post-navigation span { font-size: clamp(22px, 3vw, 34px); font-weight: 800; font-stretch: 62%; line-height: 1; }

.empty-state { max-width: 520px; }

/* Search form */

.search-form {
	display: flex;
	align-items: stretch;
	max-width: 380px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	transition: border-color .2s;
}

.search-form:focus-within { border-color: var(--safelight); }

.search-field {
	flex: 1;
	min-width: 0;
	padding: 11px 0 11px 18px;
	border: 0;
	border-radius: 999px 0 0 999px;
	background: transparent;
	color: var(--paper);
	font: 400 15px/1.4 var(--font);
	-webkit-appearance: none;
	appearance: none;
}

.search-field::placeholder { color: var(--dust); opacity: 1; }
.search-field:focus { outline: none; }

.search-submit {
	display: grid;
	place-items: center;
	padding: 0 16px 0 12px;
	border: 0;
	border-radius: 0 999px 999px 0;
	background: none;
	color: var(--dust);
	cursor: pointer;
}

.search-submit:hover { color: var(--safelight); }

/* Footer */

.site-footer {
	margin-top: clamp(80px, 12vw, 160px);
	padding: clamp(32px, 5vw, 56px) 0 28px;
	border-top: 1px solid var(--line);
	font-size: 15px;
}

.footer-top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.4fr);
	align-items: start;
	gap: 32px;
}

.footer-menu { margin: 0; padding: 0; list-style: none; }
.footer-menu li { margin: 0 0 6px; }
.footer-menu a { color: var(--dust); }
.footer-menu a:hover { color: var(--paper); }
.footer-search .search-form { margin-left: auto; }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 24px;
	margin-top: clamp(40px, 6vw, 72px);
	color: var(--dust);
	font-size: 13px;
}

.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--paper); }
.footer-bottom a:hover { color: var(--safelight); }

@media (max-width: 860px) {
	.footer-top { grid-template-columns: 1fr 1fr; }
	.footer-brand, .footer-search { grid-column: 1 / -1; }
	.footer-search .search-form { margin-left: 0; max-width: none; }
}

/* Mobile tab bar */

.tabbar { display: none; }

@media (max-width: 860px) {
	body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

	.tabbar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 45;
		display: block;
		padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
		border-top: 1px solid var(--line);
		background: rgba(22, 20, 17, .9);
		-webkit-backdrop-filter: blur(14px) saturate(1.2);
		backdrop-filter: blur(14px) saturate(1.2);
	}

	.tabbar ul { display: flex; margin: 0; padding: 0; list-style: none; }
	.tabbar li { flex: 1 1 0; min-width: 0; }

	.tabbar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		height: var(--tabbar-h);
		padding: 0 4px;
		color: var(--dust);
		font-size: 11px;
		font-weight: 500;
		line-height: 1;
		-webkit-tap-highlight-color: transparent;
	}

	.tabbar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.tabbar__item svg { flex: none; transition: transform .2s var(--ease); }
	.tabbar__item:hover, .tabbar__item:active { color: var(--paper); }
	.tabbar__item:active svg { transform: scale(.9); }
	.tabbar__item[aria-current] { color: var(--safelight); }
	.tabbar__item:focus-visible { outline-offset: -4px; }

	.footer-nav, .footer-contact { display: none; }
	.site-footer { padding-bottom: 84px; }
	.footer-bottom { flex-direction: column; }
}

.to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 40;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: rgba(32, 29, 25, .9);
	color: var(--paper);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s, transform .25s var(--ease), visibility .25s, border-color .2s, color .2s;
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--safelight); color: var(--safelight); }

@media (max-width: 860px) {
	.to-top { right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px)); }
}

/* Lightbox */

.mics-lb {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(12, 11, 9, .97);
	color: var(--paper);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s, visibility .25s;
}

.mics-lb.is-open { opacity: 1; visibility: visible; }
.mics-lb__stage { display: flex; flex-direction: column; align-items: center; margin: 0; }

.mics-lb__img {
	display: block;
	max-width: calc(100vw - 160px);
	max-height: calc(100vh - 110px);
	max-height: calc(100dvh - 110px);
	object-fit: contain;
	transition: opacity .25s;
	-webkit-user-select: none;
	user-select: none;
}

.mics-lb__img.is-loading { opacity: .2; }

.mics-lb__count { min-height: 1em; margin-top: 16px; color: var(--safelight); font-size: 13px; font-variant-numeric: tabular-nums; }

.mics-lb__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dust);
	cursor: pointer;
	transition: color .15s, transform .2s var(--ease);
}

.mics-lb__btn:hover, .mics-lb__btn:focus-visible { color: var(--paper); }
.mics-lb__close { top: 12px; right: 12px; }
.mics-lb__prev { top: 50%; left: 12px; margin-top: -28px; }
.mics-lb__next { top: 50%; right: 12px; margin-top: -28px; }
.mics-lb__prev:hover { transform: translateX(-3px); }
.mics-lb__next:hover { transform: translateX(3px); }
.mics-lb.is-single .mics-lb__prev, .mics-lb.is-single .mics-lb__next { display: none; }

@media (max-width: 700px) {
	.mics-lb__img { max-width: 100vw; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); }
	.mics-lb__prev, .mics-lb__next { top: auto; bottom: 8px; margin-top: 0; }
}

/* 404 */

.not-found .search-form { margin-top: 28px; }