:root {
	--bg: #171310;
	--panel: #221b14;
	--paper: #f2e9d8;
	--mut: #a2937c;
	--amber: #e0a43e;
	--amber-hi: #f6c76a;
	--teal: #7fb5a2;
	--rust: #c65f45;
	--line: rgba(242, 233, 216, .13);
	--line-hi: rgba(224, 164, 62, .7);
	--f-disp: 'Lalezar', 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
	--f-body: 'Vazirmatn', 'IRANSansX', 'Segoe UI', Tahoma, sans-serif;
}

* {
	box-sizing: border-box
}

body {
	margin: 0;
	min-height: 100vh;
	color: var(--paper);
	font-family: var(--f-body);
	background:
		radial-gradient(900px 520px at 85% -10%, rgba(224, 164, 62, .13), transparent 60%),
		radial-gradient(760px 540px at 8% 112%, rgba(127, 181, 162, .10), transparent 60%),
		radial-gradient(1100px 700px at 50% 42%, #1e1812 0%, var(--bg) 72%);
	-webkit-tap-highlight-color: transparent;
}

::selection {
	background: rgba(224, 164, 62, .35)
}

.masthead {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 44px clamp(18px, 4vw, 48px) 20px
}

.over {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--amber);
	font-size: 13px;
	font-weight: 700
}

.over::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rust);
	box-shadow: 0 0 0 0 rgba(198, 95, 69, .55);
	animation: pulse 2.2s infinite
}

@keyframes pulse {
	70% {
		box-shadow: 0 0 0 9px rgba(198, 95, 69, 0)
	}

	100% {
		box-shadow: 0 0 0 0 rgba(198, 95, 69, 0)
	}
}

.brand h1 {
	font-family: var(--f-disp);
	font-weight: 400;
	font-size: clamp(46px, 7.5vw, 94px);
	line-height: 1;
	margin: .08em 0 .12em
}

.brand h1 .acc {
	color: var(--amber)
}

.tag {
	margin: 0;
	color: var(--mut);
	font-size: 14.5px;
	max-width: 54ch;
	line-height: 1.9
}

.meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px
}

.stats {
	font-size: 13px;
	color: var(--mut)
}

.stats b {
	color: var(--amber-hi);
	font-weight: 700
}

.dir-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--line);
	background: rgba(242, 233, 216, .03);
	color: var(--paper);
	padding: 9px 15px;
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	transition: border-color .25s, background .25s, transform .25s
}

main {
	position: relative;
	z-index: 200;
	padding: 0 clamp(18px, 4vw, 48px) 8px
}

.sheet {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: clamp(96px, 12vw, 150px)
}

.cell {
	position: relative;
	grid-column: span 12;
	grid-row: span 2;
	margin: 0;
	cursor: zoom-in;
	outline: none
}

.cell:focus-visible .frame {
	border-color: var(--line-hi);
	box-shadow: 0 0 0 3px rgba(224, 164, 62, .25)
}

@media (min-width:780px) {
	.cell:nth-child(1) {
		grid-column: span 7;
		grid-row: span 4
	}

	.cell:nth-child(2) {
		grid-column: span 5;
		grid-row: span 4
	}

	.cell:nth-child(3) {
		grid-column: span 4;
		grid-row: span 3
	}

	.cell:nth-child(4) {
		grid-column: span 4;
		grid-row: span 3
	}

	.cell:nth-child(5) {
		grid-column: span 4;
		grid-row: span 3
	}
}

.frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: #241d16;
	transition: border-color .3s
}

.cell.loading .frame {
	background: linear-gradient(100deg, #221b14 30%, #2f271d 50%, #221b14 70%);
	background-size: 200% 100%;
	animation: sheen 1.4s linear infinite
}

@keyframes sheen {
	to {
		background-position: -200% 0
	}
}

.frame img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transform: scale(1.03);
	transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1)
}

.frame img.ready {
	opacity: 1
}

.cell:hover .frame {
	border-color: var(--line-hi)
}

.cell:hover .frame img {
	transform: scale(1.08)
}

.frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 55%, rgba(14, 10, 7, .62));
	box-shadow: inset 0 0 0 1px transparent;
	transition: box-shadow .3s
}

.cell:hover .frame::after {
	box-shadow: inset 0 0 0 1px var(--line-hi)
}

.frame::before {
	content: "";
	position: absolute;
	inset: 10px;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transform: scale(.97);
	transition: opacity .3s, transform .3s;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(var(--amber-hi), var(--amber-hi)), linear-gradient(var(--amber-hi), var(--amber-hi)),
		linear-gradient(var(--amber-hi), var(--amber-hi)), linear-gradient(var(--amber-hi), var(--amber-hi)),
		linear-gradient(var(--amber-hi), var(--amber-hi)), linear-gradient(var(--amber-hi), var(--amber-hi)),
		linear-gradient(var(--amber-hi), var(--amber-hi)), linear-gradient(var(--amber-hi), var(--amber-hi));
	background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
	background-size: 15px 2px, 2px 15px, 15px 2px, 2px 15px, 15px 2px, 2px 15px, 15px 2px, 2px 15px
}

.cell:hover .frame::before {
	opacity: .95;
	transform: none
}

.cell-meta {
	position: absolute;
	inset-inline-start: 14px;
	inset-block-end: 12px;
	z-index: 3;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	transform: translateY(7px);
	opacity: .85;
	transition: .35s
}

.cell:hover .cell-meta {
	transform: none;
	opacity: 1
}

.cell-meta b {
	font-size: 12px;
	color: var(--amber-hi);
	font-weight: 700
}

.cell-meta i {
	font-style: normal;
	font-size: 13.5px;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .7)
}

.cell.thumb-hide .frame img {
	visibility: hidden
}

.light {
	position: fixed;
	inset: 0;
	z-index: 10000
}

.light[hidden] {
	display: none
}

.lb-bg {
	position: absolute;
	inset: 0;
	background: rgba(15, 11, 8, .965);
	opacity: 0
}

.lb-stage {
	position: absolute;
	inset: 0;
	touch-action: none;
	overflow: hidden
}

.lb-img {
	position: absolute;
	top: 0;
	left: 0;
    max-width: none !important;
	transform-origin: 0 0;
	will-change: transform;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	box-shadow: 0 30px 90px rgba(0, 0, 0, .55)
}

.lb-bar {
	position: absolute;
	inset-inline: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px clamp(14px, 3vw, 26px);
	pointer-events: none;
	z-index: 5
}

.lb-count {
	font-size: 14px;
	color: var(--mut);
	background: rgba(20, 15, 11, .55);
	border: 1px solid var(--line);
	padding: 7px 13px;
	border-radius: 999px
}

.lb-count b {
	color: var(--amber-hi);
	font-weight: 700
}

.lb-close {
	pointer-events: auto;
	width: 42px;
	height: 42px;
    line-height: 44px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 17px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	background: rgba(20, 15, 11, .55);
	color: var(--paper);
	transition: transform .3s, border-color .3s, color .3s
}

.lb-close:hover {
	border-color: var(--line-hi);
	color: var(--amber-hi);
	transform: rotate(90deg)
}

body.lb-lock {
	overflow: hidden;
	overscroll-behavior: none;
	user-select: none
}

body.grabbing,
body.grabbing .lb-img {
	cursor: grabbing !important
}

@media (max-width:780px) {
	.masthead {
		padding-top: 30px
	}

	.meta {
		align-items: flex-start
	}
}