/* Studio — paper white, monochrome, a film frame and numbered index rows. For photographers, creatives, agencies. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
	--bg: #eeece6;
	--fg: #141414;
	--muted: #5f5d57;
	--accent: #141414;
	--accent-fg: #eeece6;
	--accent-glyph: none;
	--font-head: 'Space Grotesk', system-ui, sans-serif;
	--font-body: 'Space Grotesk', system-ui, sans-serif;
	--mono: 'IBM Plex Mono', ui-monospace, monospace;

	--btn-bg: transparent;
	--btn-fg: var(--fg);
	--btn-radius: 0;
	--btn-pad: 18px 2px;

	--chip-bg: transparent;
	--chip-border: 1.5px solid var(--fg);
	--chip-radius: 0;
	--chip-size: 46px;
	--chip-glyph: invert(1);

	--glyph-page: invert(1);
	--pop-bg: #f7f5ef;
	--pop-fg: #141414;
	--pop-border: #141414;
	--pop-shade: rgba(20, 20, 20, .5);
	--field-bg: #fff;
	--star-filter: invert(1);
}

/* the film strip */
.bg {
	width: min(84vw, 330px);
	max-width: none;
	max-height: none;
	aspect-ratio: 4 / 5;
	margin-top: 38px;
	padding: 30px 26px;
	background: #141414;
	border-radius: 4px;
	overflow: visible;
	box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .65);
}
.bg > img { height: 100%; border-radius: 1px; position: relative; z-index: 1; }
.bg::before, .bg::after {
	content: '';
	position: absolute;
	top: 10px; bottom: 10px;
	width: 7px;
	height: auto;
	background: repeating-linear-gradient(180deg, var(--bg) 0 11px, transparent 11px 22px);
	border-radius: 2px;
	-webkit-mask: none; mask: none;
}
.bg::before { left: 10px; }
.bg::after { right: 10px; left: auto; }

.header { margin-top: 26px; gap: 6px; align-items: flex-start; text-align: left; max-width: min(84vw, 330px); padding: 0; }
.header::before { content: 'FRAME 24A  ▸'; font: 500 .68rem var(--mono); letter-spacing: .22em; color: var(--muted); }
.header .title { justify-content: flex-start; }
.header .title h1 { font-weight: 700; font-size: clamp(1.9rem, 8.5vw, 2.5rem); letter-spacing: -.02em; }
.header h2 { font: 500 .85rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.social-media { justify-content: flex-start; max-width: min(84vw, 330px); padding: 20px 0 0; gap: 10px; }
.social-media > a:hover { background: var(--fg); }
.social-media > a:hover > img { filter: none; }

.links { max-width: min(84vw, 330px); padding: 22px 0 0; gap: 0; counter-reset: row; border-bottom: 1.5px solid var(--fg); }
.link {
	counter-increment: row;
	justify-content: flex-start;
	gap: 16px;
	text-align: left;
	border-top: 1.5px solid var(--fg);
	font-size: 1.1rem;
	font-weight: 500;
}
.link::before { content: counter(row, decimal-leading-zero); width: auto; height: auto; margin: 0; background: none; border-radius: 0; font: 500 .72rem var(--mono); color: var(--muted); min-width: 1.6em; }
.link::after { content: '↗'; margin-left: auto; font-size: 1.1rem; transition: transform .15s; }
.link:hover { transform: none; background: var(--fg); color: var(--bg); padding-left: 10px; padding-right: 10px; }
.link:hover::before { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.link:hover::after { transform: translate(2px, -2px); }
#rating-form { border-radius: 0; box-shadow: 8px 8px 0 #141414; }
#rating-form h4 { font-weight: 700; }