/*
Theme Name: Monochrome Studio
Version: 2.1.0
Requires at least: 6.6
Requires PHP: 8.2
Text Domain: monochrome-studio
License: GPL-2.0-or-later
*/

:root { --black: #090909; --white: #fff; --gray: #777; --line: #1d1d1d; --sheet: 90rem; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--black); font-family: "Helvetica Neue", Arial, sans-serif; line-height: 1.45; }
a { color: inherit; text-underline-offset: .18em; }
a:focus-visible { outline: .22rem solid var(--black); outline-offset: .25rem; }
img { display: block; max-width: 100%; height: auto; filter: grayscale(1); }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 20; padding: .75rem; background: var(--black); color: var(--white); }
.skip-link:focus { top: 1rem; }
.studio-header,
.studio-footer {
	display: grid;
	grid-template-columns: 1fr 2fr auto;
	gap: 2rem;
	max-width: var(--sheet);
	margin: auto;
	padding: 1rem clamp(1rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--line);
	font-size: .75rem;
	text-transform: uppercase;
}
.studio-wordmark { font-weight: 800; text-decoration: none; }
.menu { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.studio,
.studio-archive,
.studio-detail { max-width: var(--sheet); margin: auto; padding: 0 clamp(1rem, 3vw, 2.5rem); }
.studio-title { display: grid; grid-template-columns: 1fr 3fr; gap: 2rem; padding: 6rem 0 3rem; border-bottom: 1px solid var(--line); }
.studio-title h1 { grid-column: 2; max-width: 12ch; margin: 0; font-size: clamp(3.5rem, 9vw, 9rem); font-weight: 500; letter-spacing: -.07em; line-height: .82; }
.studio-title__note { grid-column: 2; max-width: 38rem; font-size: 1.1rem; }
.contact-sheet,
.studio-editorial,
.studio-register,
.studio-notes { margin: 5rem 0; }
.contact-sheet > h2,
.studio-editorial > h2,
.studio-register > h2,
.studio-notes > h2 { padding-bottom: .5rem; border-bottom: 1px solid var(--line); font-size: .75rem; text-transform: uppercase; }
.contact-sheet__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.contact { min-width: 0; margin: 0; background: var(--white); }
.contact > a,
.contact--media { display: grid; grid-template-rows: auto 1fr auto auto; height: 100%; padding: .6rem; text-decoration: none; }
.contact__number,
.contact__type,
.contact figcaption { padding: .4rem 0; font-size: .65rem; text-transform: uppercase; }
.contact__image img,
.contact--media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.contact__title { padding-top: .6rem; font-size: 1rem; font-weight: 700; }
.studio-statement { display: grid; grid-template-columns: 1fr 3fr; gap: 2rem; padding: 5rem 0; border-block: 1px solid var(--line); }
.studio-statement > div { max-width: 52rem; font-size: clamp(1.2rem, 2vw, 1.7rem); }
.studio-marker { margin: 0; font-size: .75rem; text-transform: uppercase; }
.studio-register ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.studio-register li a { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.studio-register li span { font-size: .75rem; }
.studio-notes dl { display: grid; grid-template-columns: 1fr 3fr; }
.studio-notes dt,
.studio-notes dd { margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.studio-archive { padding-block: 5rem; }
.studio-archive h1,
.studio-detail h1 { font-size: clamp(3rem, 8vw, 8rem); font-weight: 500; letter-spacing: -.06em; line-height: .85; }
.studio-detail { padding-block: 5rem; }
.studio-detail__meta { display: grid; grid-template-columns: 1fr 3fr; gap: 2rem; }
.studio-detail .entry-content { max-width: 46rem; margin: 4rem 0 0 auto; }
.studio-footer { margin-top: 8rem; border-top: 1px solid var(--line); border-bottom: 0; }

@media (max-width: 48rem) {
	.studio-header,
	.studio-footer,
	.studio-title,
	.studio-statement,
	.studio-detail__meta { grid-template-columns: 1fr; }
	.studio-title h1,
	.studio-title__note { grid-column: 1; }
	.contact-sheet__grid { grid-template-columns: 1fr 1fr; }
	.studio-register li a { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
	.contact-sheet,
	.contact { border: 1px solid CanvasText; }
}