/*
Theme Name: Joss Dray
Theme URI: https://www.jossdray.com
Author: sur mesure
Description: Thème sur mesure pour le site de la photographe Joss Dray. Noir et blanc, index à gauche, collections classées par pays, presse et vidéos.
Version: 2.0.0
Requires at least: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jossdray
*/

/* =========================================================================
   Tokens

   One geometric sans, no rules, no boxes: the photographs are the only thing
   with an edge. Everything else is separated by air alone.
   ====================================================================== */

:root {
	color-scheme: light;

	--ink:      #222222;
	--ink-soft: #555555;
	--ink-mute: #aaaaaa;
	--paper:    #ffffff;
	--paper-2:  #f4f4f2;
	--focus:    #222222;

	--sans: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', -apple-system,
	        BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--nav-w:   12rem;
	--gutter-w: 4.5rem;

	--t-fast: 160ms cubic-bezier(.2, .6, .3, 1);
	--t-slow: 400ms cubic-bezier(.2, .6, .3, 1);
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--ink:      #e9e9e6;
		--ink-soft: #a9a9a4;
		--ink-mute: #6a6a65;
		--paper:    #0e0e0e;
		--paper-2:  #191919;
		--focus:    #e9e9e6;
	}
}

/* =========================================================================
   Base
   ====================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

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

button { font: inherit; color: inherit; }

.jd-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: var(--paper);
	padding: .75rem 1.25rem;
	z-index: 100;
}
.jd-skip:focus { left: 0; }

/* =========================================================================
   Shell

   The index is inset from the edge rather than pinned to it, and nothing
   rules it off from the work.
   ====================================================================== */

.jd-shell {
	display: flex;
	align-items: flex-start;
	gap: clamp(2rem, 6vw, 6.5rem);
	padding:
		clamp(2.25rem, 5vw, 4.25rem)
		clamp(1.25rem, 7vw, 11rem)
		5rem
		clamp(1.25rem, 6vw, 8.5rem);
	max-width: 110rem;
}

.jd-nav {
	flex: 0 0 var(--nav-w);
	width: var(--nav-w);
	position: sticky;
	top: clamp(2.25rem, 5vw, 4.25rem);
}

.jd-main {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 58rem;
}

/* --- name ------------------------------------------------------------- */

.jd-brand { margin: 0 0 2.5rem; }

.jd-brand__name {
	display: block;
	font-size: 1.7rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: .01em;
	color: var(--ink);
}

.custom-logo-link { display: block; }

/* --- the index -------------------------------------------------------- */

.jd-menu__label {
	margin: 0 0 .45rem;
	font-size: .82rem;
	font-weight: 400;
	color: var(--ink-mute);
}

.jd-menu__list {
	list-style: none;
	margin: 0 0 2.1rem;
	padding: 0;
}
.jd-menu__list:last-child { margin-bottom: 0; }

.jd-item + .jd-item,
.jd-menu__list > li + li { margin-top: .1rem; }

.jd-link {
	display: block;
	padding: .24rem 0;
	font-size: .95rem;
	line-height: 1.38;
	color: var(--ink);
	transition: color var(--t-fast);
}

.jd-link:hover { color: var(--ink-mute); }

/* The page you are on steps out of the list by a chevron's width. */
.jd-link.is-current {
	color: var(--ink-mute);
	position: relative;
}
.jd-link.is-current::before {
	content: '\203A';
	position: absolute;
	left: -.7rem;
	color: var(--ink-mute);
}

.jd-sub {
	list-style: none;
	margin: .1rem 0 .5rem;
	padding: 0 0 0 .85rem;
}

.jd-link--sub {
	font-size: .9rem;
	color: var(--ink-soft);
}
.jd-link--sub:hover { color: var(--ink-mute); }

/* WordPress menu items dropped into the same list */
.jd-menu__list .menu-item a {
	display: block;
	padding: .24rem 0;
	font-size: .95rem;
	line-height: 1.38;
	color: var(--ink);
	transition: color var(--t-fast);
}
.jd-menu__list .menu-item a:hover { color: var(--ink-mute); }
.jd-menu__list .current-menu-item a { color: var(--ink-mute); }

.jd-nav__foot { margin-top: 2rem; font-size: .88rem; color: var(--ink-mute); }
.jd-nav__links { margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.jd-nav__links a { padding: .24rem 0; }
.jd-nav__links a:hover { color: var(--ink-soft); }

/* --- drawer trigger --------------------------------------------------- */

.jd-burger {
	display: none;
	position: fixed;
	top: .75rem;
	left: .75rem;
	z-index: 60;
	align-items: center;
	gap: .55rem;
	padding: .55rem .8rem;
	background: var(--paper);
	border: 0;
	cursor: pointer;
}
.jd-burger__bars { display: grid; gap: 4px; }
.jd-burger__bars i { display: block; width: 18px; height: 1px; background: var(--ink); }
.jd-burger__label { font-size: .8rem; }

.jd-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 40; }

/* =========================================================================
   Content columns

   A narrow gutter carries the country; the work sits in the wide column.
   ====================================================================== */

.jd-cols {
	display: grid;
	grid-template-columns: var(--gutter-w) minmax(0, 1fr);
	gap: 1.5rem;
}

.jd-gutter {
	margin: 0;
	font-size: .95rem;
	line-height: 1.38;
	color: var(--ink-mute);
	padding-top: .24rem;
}
.jd-gutter a { color: inherit; transition: color var(--t-fast); }
.jd-gutter a:hover { color: var(--ink-soft); }

.jd-col { min-width: 0; }

/* Titles stay the size of the text around them: the photograph is the
   headline, not the words above it. */
.jd-title {
	margin: 0 0 1.1rem;
	font-size: .95rem;
	font-weight: 400;
	line-height: 1.38;
	letter-spacing: .005em;
	color: var(--ink);
	padding-top: .24rem;
}

.jd-intro {
	margin: 0 0 1.6rem;
	max-width: 46rem;
	font-size: .95rem;
	line-height: 1.62;
	color: var(--ink);
}
.jd-intro p { margin: 0 0 .8rem; }
.jd-intro p:last-child { margin-bottom: 0; }
.jd-intro a { text-decoration: underline; text-decoration-color: var(--ink-mute); text-underline-offset: .2em; }

.jd-empty { color: var(--ink-mute); }

/* =========================================================================
   The viewer
   ====================================================================== */

.jd-viewer { margin: 0 0 1.75rem; }

.jd-counter {
	margin: 0 0 .7rem;
	font-size: .95rem;
	color: var(--ink-mute);
	font-variant-numeric: tabular-nums;
}
.jd-counter__no { margin-right: .35rem; }

.jd-viewer__stage { position: relative; }

/* The box follows the photograph: a landscape frame is short, a portrait one
   tall, and neither leaves a well of empty space beneath it. */
.jd-viewer__frames { position: relative; }

.jd-frame {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: .7rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--t-slow), visibility var(--t-slow);
}
.jd-frame.is-active { opacity: 1; visibility: visible; }

.jd-frame.is-active { position: relative; }

.jd-photo {
	max-width: 100%;
	max-height: 76vh;
	width: auto;
	height: auto;
	object-fit: contain;
	flex: 0 1 auto;
	min-height: 0;
}

.jd-frame__caption {
	flex: 0 0 auto;
	max-width: 46rem;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--ink-mute);
}

/* --- thumbnail strip: kept, but as quiet as it can be ----------------- */

.jd-strip {
	list-style: none;
	display: flex;
	gap: .4rem;
	margin: 1.1rem 0 0;
	padding: 0 0 .4rem;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
.jd-strip::-webkit-scrollbar { display: none; }

.jd-strip__btn {
	display: block;
	width: 3.4rem;
	height: 3.4rem;
	padding: 0;
	border: 0;
	background: var(--paper-2);
	cursor: pointer;
	opacity: .35;
	transition: opacity var(--t-fast);
}
.jd-strip__btn img { width: 100%; height: 100%; object-fit: cover; }
.jd-strip__btn:hover { opacity: .7; }
.jd-strip__btn.is-active { opacity: 1; }

/* --- the two controls at the foot of the page ------------------------- */

.jd-imagenav {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2rem;
	margin-top: clamp(2rem, 5vh, 3.5rem);
}

.jd-imagenav__btn {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--ink-soft);
	transition: color var(--t-fast), opacity var(--t-fast);
}
.jd-imagenav__btn:hover:not(:disabled) { color: var(--ink); }
.jd-imagenav__btn:disabled { opacity: .22; cursor: default; }

.jd-imagenav__label {
	font-size: .72rem;
	line-height: 1.5;
	letter-spacing: .26em;
	text-transform: uppercase;
}
.jd-imagenav__btn--next .jd-imagenav__label { text-align: right; }

.jd-imagenav__chev svg {
	display: block;
	width: .7rem;
	height: 2rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

/* Without JavaScript the figures stack and the controls step aside. */
html:not(.jd-js) .jd-frame {
	position: static;
	opacity: 1;
	visibility: visible;
	margin-bottom: 2.5rem;
}
html:not(.jd-js) .jd-photo { max-height: none; }
html:not(.jd-js) .jd-counter,
html:not(.jd-js) .jd-strip,
html:not(.jd-js) .jd-imagenav { display: none; }

/* =========================================================================
   Copyright
   ====================================================================== */

.jd-rights { margin-top: 1.5rem; max-width: 46rem; }

.jd-rights__line { margin: 0; font-size: .88rem; color: var(--ink-mute); }

.jd-rights__note {
	margin: .45rem 0 0;
	font-size: .82rem;
	line-height: 1.55;
	color: var(--ink-mute);
}

/* =========================================================================
   Collection to collection
   ====================================================================== */

.jd-jump {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	margin-top: clamp(2.5rem, 6vh, 4rem);
}

.jd-jump__link--next { text-align: right; margin-left: auto; }

.jd-jump__label {
	display: block;
	font-size: .72rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: .3rem;
}

.jd-jump__title {
	display: block;
	font-size: .95rem;
	line-height: 1.38;
	color: var(--ink);
	transition: color var(--t-fast);
}
.jd-jump__link:hover .jd-jump__title { color: var(--ink-mute); }

/* =========================================================================
   Listings: countries, collections
   ====================================================================== */

.jd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.2vw, 2rem);
}

.jd-card__link { display: block; color: inherit; }

.jd-card__frame {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--paper-2);
}

.jd-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--t-slow);
}
.jd-card__link:hover .jd-card__img,
.jd-card__link:focus-visible .jd-card__img { opacity: .78; }

.jd-card__empty {
	position: absolute;
	inset: 0;
	background: var(--paper-2);
}

.jd-card__meta { display: block; padding-top: .6rem; }

.jd-card__title {
	display: block;
	font-size: .95rem;
	line-height: 1.38;
	color: var(--ink);
}

.jd-card__count {
	display: block;
	margin-top: .12rem;
	font-size: .85rem;
	color: var(--ink-mute);
}

/* --- home: one photograph -------------------------------------------- */

.jd-home__photo { margin: 0; }
.jd-home__photo img { width: 100%; height: auto; }
.jd-home__caption { margin: .6rem 0 0; font-size: .88rem; color: var(--ink-mute); }

/* =========================================================================
   Press
   ====================================================================== */

.jd-press { list-style: none; margin: 0; padding: 0; max-width: 46rem; }

.jd-press__item { display: flex; gap: 1.25rem; padding: 0 0 1.75rem; }

.jd-press__thumb { flex: 0 0 4.5rem; }
.jd-press__thumb img { width: 100%; height: auto; object-fit: cover; }

.jd-press__body { flex: 1 1 auto; min-width: 0; }

.jd-press__meta {
	margin: 0 0 .2rem;
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	font-size: .85rem;
	color: var(--ink-mute);
}

.jd-press__title {
	margin: 0;
	font-size: .95rem;
	font-weight: 400;
	line-height: 1.38;
}
.jd-press__title a { transition: color var(--t-fast); }
.jd-press__title a:hover { color: var(--ink-mute); }
.jd-press__ext { color: var(--ink-mute); margin-left: .15em; }

.jd-press__excerpt { margin-top: .3rem; color: var(--ink-soft); font-size: .92rem; }
.jd-press__excerpt p { margin: 0; }

/* =========================================================================
   Video
   ====================================================================== */

.jd-videos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: clamp(1.75rem, 3vw, 2.5rem);
}

.jd-video__player {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}
.jd-video__player--solo { max-width: 52rem; margin-bottom: 1.5rem; }

.jd-video__poster {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}
.jd-video__poster img { width: 100%; height: 100%; object-fit: cover; }

.jd-video__play { position: absolute; inset: 0; display: grid; place-items: center; }
.jd-video__play svg {
	width: 3.25rem;
	height: auto;
	fill: #fff;
	opacity: .85;
	filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .5));
	transition: opacity var(--t-fast);
}
.jd-video__poster:hover .jd-video__play svg { opacity: 1; }

.jd-video__frame { width: 100%; height: 100%; border: 0; display: block; }

.jd-video__title { margin: .6rem 0 0; font-size: .95rem; font-weight: 400; line-height: 1.38; }
.jd-video__excerpt { margin-top: .2rem; color: var(--ink-soft); font-size: .9rem; }
.jd-video__excerpt p { margin: 0; }

/* =========================================================================
   Long-form text
   ====================================================================== */

.jd-prose { max-width: 40rem; font-size: .95rem; line-height: 1.68; color: var(--ink); }
.jd-prose > * + * { margin-top: .9rem; }
.jd-prose p { margin: 0; }

.jd-prose h2, .jd-prose h3 {
	font-weight: 400;
	line-height: 1.38;
	margin-top: 2rem;
	color: var(--ink-mute);
	font-size: .95rem;
}

.jd-prose a { text-decoration: underline; text-decoration-color: var(--ink-mute); text-underline-offset: .2em; }

.jd-prose blockquote {
	margin: 1.5rem 0;
	padding-left: 1.2rem;
	color: var(--ink-soft);
}

.jd-prose img, .jd-prose figure { margin-top: 1.5rem; }
.jd-prose figcaption { font-size: .85rem; color: var(--ink-mute); margin-top: .4rem; }

.jd-single__thumb { max-width: 52rem; margin-bottom: 1.5rem; }

.jd-cta {
	display: inline-block;
	font-size: .72rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--ink-soft);
	transition: color var(--t-fast);
}
.jd-cta:hover { color: var(--ink); }

.pagination { margin-top: 2.5rem; font-size: .9rem; }
.pagination .page-numbers { padding: 0 .35rem; color: var(--ink-soft); }
.pagination .current { color: var(--ink); }

/* =========================================================================
   Small screens
   ====================================================================== */

@media (max-width: 62rem) {

	.jd-burger { display: flex; }

	.jd-shell { display: block; padding: 4.5rem 1.25rem 4rem; }

	.jd-nav {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 50;
		width: min(19rem, 84vw);
		height: 100dvh;
		padding: 4.5rem 1.5rem 2rem;
		background: var(--paper);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(-100%);
		transition: transform var(--t-slow);
	}
	body.jd-nav-open .jd-nav { transform: none; }

	.jd-main { max-width: none; }

	/* The country moves above the title instead of beside it. */
	.jd-cols { display: block; }
	.jd-gutter { padding-top: 0; margin-bottom: .1rem; }
	.jd-title { padding-top: 0; }

	.jd-photo { max-height: 62vh; }

	.jd-imagenav { gap: 1rem; }
	.jd-imagenav__label { letter-spacing: .2em; }

	.jd-jump { flex-direction: column; gap: 1.5rem; }
	.jd-jump__link--next { text-align: left; margin-left: 0; }

	.jd-press__item { flex-direction: column; gap: .7rem; }
	.jd-press__thumb { flex: none; max-width: 7rem; }
}

@media (max-width: 34rem) {
	.jd-strip__btn { width: 2.9rem; height: 2.9rem; }
	.jd-imagenav__label { font-size: .66rem; letter-spacing: .16em; }
}

/* =========================================================================
   Preferences, admin bar, print
   ====================================================================== */

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

body.admin-bar .jd-nav { top: calc(var(--wp-admin--admin-bar--height, 32px) + clamp(2.25rem, 5vw, 4.25rem)); }
body.admin-bar .jd-burger { top: calc(var(--wp-admin--admin-bar--height, 32px) + .75rem); }

@media print {
	.jd-nav, .jd-burger, .jd-imagenav, .jd-strip, .jd-jump { display: none !important; }
	.jd-shell { display: block; padding: 0; }
	.jd-frame { position: static; opacity: 1; visibility: visible; }
	.jd-viewer__frames { height: auto; }
}