/*
Theme Name:   Luminary Child — Ηώ Αγγελή
Template:     luminary
Description:  Site-specific fixes for ioangeli.com on top of the Luminary theme.
Author:       Michelle Kondou
Version:      1.0.0
Text Domain:  luminary-child
*/

/* ------------------------------------------------------------------
 * Gutters: align page content with the header and footer.
 * The theme pads header/footer by 3.15% of the viewport on desktop
 * (".full-width-header-footer-enabled #header", 15px from 1024px down),
 * but #main gets nothing, so content sat at the 15px WPBakery column
 * padding — 30px outside the logo/menu at 1440px.
 * ------------------------------------------------------------------ */
@media (min-width: 1025px) {
	.full-width-header-footer-enabled #main {
		/* + the 15px WPBakery column padding = 3.15%, same as #header */
		padding-left: calc(3.15% - 15px);
		padding-right: calc(3.15% - 15px);
	}
}

/* ------------------------------------------------------------------
 * Space under the menu bar, the same on every template. Above 1024px the
 * header is fixed and 112px tall but the theme pads #main by only 94px, so
 * the first 18px of content sat under it; at 1024px and below the header
 * is static and content touched it. The gap is measured from the header's
 * bottom edge to the first content.
 * ------------------------------------------------------------------ */
#page #main {
	padding-top: 160px; /* 112px fixed header + 48px */
}
/* the thin menu bar from the start (body.menu-thin, functions.php) -- only
 * where the bar is fixed; below 1025px it is part of the page (32px, above) */
@media (min-width: 1025px) {
	.menu-thin #page #main {
		padding-top: 121px; /* 73px + 48px */
	}
}
@media (max-width: 1024px) {
	#page #main {
		padding-top: 32px;
	}
}

/* Menu bar: no bottom rule. The theme prints a 1px #f5f5f5 line on #access as
 * inline CSS after this file, so this needs the extra #header to win. */
#header #access {
	border-bottom: 0;
}

/* Body container: cap content at 1536px and centre it on wide screens. The
 * header, menu and footer stay full width. (#page outranks the theme's
 * ".page-template-default.wpb-js-composer #main #content { max-width: 100% }".) */
#page #main #content {
	max-width: 1536px;
	margin-left: auto;
	margin-right: auto;
}

/* Artwork galleries ([gallery_alternative], rendered by the child theme: see
 * functions.php): a plain four-column grid in its WPBakery column, in place
 * of the parent's Isotope masonry. Two columns on phones. */
.io-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* shared by all the layouts below */
	--gap-x: 16px;
	--gap-y: 16px;
	gap: var(--gap-y) var(--gap-x);
}
@media (max-width: 599px) {
	.io-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.io-gallery {
	align-items: start; /* images sit at the top of their row */
}
.io-gallery__item {
	display: block;
	cursor: zoom-in;
}
.io-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
}
/* Artwork and commission pages: the same split everywhere -- text 40%, the
 * gallery 60% -- whatever column widths each page was built with in
 * WPBakery (1/2 + 1/2, 1/3 + 2/3, an inner row on 1995, text and gallery
 * stacked in one column on 2019). Matched by what a column holds, so the
 * content is untouched. From 768px, where WPBakery puts columns side by side;
 * below that they stack as before. */
@media (min-width: 768px) {
	/* the column holding the gallery, and the text column just before it */
	.single-portfolio #content .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .io-gallery),
	.single-commission #content .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .io-gallery) {
		width: 60%;
	}
	/* 64px between text and images: the text column's 15px padding + 49px
	 * here (not on 2019's shared column -- its grid has the gap, below) */
	.single-portfolio #content .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .io-gallery):not(:has(> .vc_column-inner > .wpb_wrapper > .wpb_text_column)) > .vc_column-inner,
	.single-commission #content .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .io-gallery):not(:has(> .vc_column-inner > .wpb_wrapper > .wpb_text_column)) > .vc_column-inner {
		padding-left: 49px;
	}
	.single-portfolio #content .wpb_column:has(+ .wpb_column > .vc_column-inner > .wpb_wrapper > .io-gallery),
	.single-commission #content .wpb_column:has(+ .wpb_column > .vc_column-inner > .wpb_wrapper > .io-gallery) {
		width: 40%;
	}
	/* text and gallery stacked in one column (2019): the column full width,
	 * its two blocks side by side; its empty sibling columns out of the way */
	.single-portfolio #content .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .io-gallery):has(> .vc_column-inner > .wpb_wrapper > .wpb_text_column),
	.single-commission #content .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .io-gallery):has(> .vc_column-inner > .wpb_wrapper > .wpb_text_column) {
		width: 100%;
	}
	.single-portfolio #content .wpb_column > .vc_column-inner > .wpb_wrapper:has(> .io-gallery):has(> .wpb_text_column),
	.single-commission #content .wpb_column > .vc_column-inner > .wpb_wrapper:has(> .io-gallery):has(> .wpb_text_column) {
		display: grid;
		/* as wide as a 40% column's text: 40% of (this + the 30px of padding
		 * around it), less its own 30px of padding */
		grid-template-columns: calc(40% - 18px) minmax(0, 1fr);
		column-gap: 64px; /* as between the columns elsewhere */
		align-items: start;
	}
	/* an inner row holding the split (1995): its -15px margins only line up if
	 * it may grow past its column (something sets width: 100%) */
	.single-portfolio #content .vc_row.vc_inner:has(.io-gallery),
	.single-commission #content .vc_row.vc_inner:has(.io-gallery) {
		width: auto;
	}
	.single-portfolio #content .wpb_column:not(:has(.wpb_wrapper > *)),
	.single-commission #content .wpb_column:not(:has(.wpb_wrapper > *)) {
		display: none;
	}
}

/* The title (the text's first element: an h1, h2 or p) starts level with
 * the top of the works: no top margin (theme: 14px), and pulled up by the
 * space its line height leaves above the letters, so the tops of the
 * letters meet the top of the first image (measured: 5px for the 28px /
 * 40px headings, 6-7px for the 15-18px paragraphs). An empty heading left
 * by the block editor (2019) is skipped. */
.single-portfolio #content .wpb_text_column > .wpb_wrapper > :is(h1, h2, h3):empty,
.single-commission #content .wpb_text_column > .wpb_wrapper > :is(h1, h2, h3):empty {
	display: none;
}
.single-portfolio #content .wpb_text_column > .wpb_wrapper > :first-child,
.single-commission #content .wpb_text_column > .wpb_wrapper > :first-child,
.single-portfolio #content .wpb_text_column > .wpb_wrapper > :empty:first-child + *,
.single-commission #content .wpb_text_column > .wpb_wrapper > :empty:first-child + * {
	margin-top: -5px;
}
.single-portfolio #content .wpb_text_column > .wpb_wrapper > p:first-child,
.single-commission #content .wpb_text_column > .wpb_wrapper > p:first-child,
.single-portfolio #content .wpb_text_column > .wpb_wrapper > :empty:first-child + p,
.single-commission #content .wpb_text_column > .wpb_wrapper > :empty:first-child + p {
	margin-top: -4px; /* -6px at the theme's 1.825 line-height; 1.6 now (below) */
}

/* A work marked "Large work" in the Media Library (functions.php) spans two
 * columns: twice the width, so sizes read relative to each other. Gaps a
 * wide one leaves at the end of a row are filled by moving later works up
 * (dense), which can change the order slightly. On phones (two columns) it
 * takes the full row. Not in the masonry / justified previews. */
.io-gallery {
	grid-auto-flow: row dense;
}
.io-gallery__item--large {
	grid-column: span 2;
}
.io-gallery.io-gallery--cells .io-gallery__item--large { /* over the cells rule below */
	grid-row: span 2; /* a 2 × 2 cell */
	aspect-ratio: auto;
	align-self: stretch;
}

/* Layout previews (?gallery=justified / cells / masonry, see functions.php).
 * Justified: every image in a row is the same height, widths follow each
 * work's proportions (--ar = width / height), rows flush both sides; the
 * last row keeps the target height instead of stretching. */
.io-gallery--justified {
	--row-h: 200px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-y) var(--gap-x);
}
.io-gallery--justified::after {
	content: "";
	flex-grow: 999999;
}
.io-gallery--justified .io-gallery__item {
	flex-grow: var(--ar);
	flex-basis: calc(var(--ar) * var(--row-h));
}
@media (max-width: 599px) {
	.io-gallery--justified {
		--row-h: 120px;
	}
}
/* Cells: same-shape square cells, each work fitted whole inside and centred. */
.io-gallery--cells {
	--gap-y: 0; /* trying none: the cells' own white space already separates the rows */
}
.io-gallery--cells .io-gallery__item {
	aspect-ratio: 1;
}
.io-gallery--cells .io-gallery__item img {
	height: 100%;
	object-fit: contain;
}
/* Masonry: four CSS columns, each work at its own proportions, no gaps;
 * images run down each column, not across (no script, unlike the old one). */
.io-gallery--masonry {
	display: block;
	columns: 4;
	column-gap: var(--gap-x);
}
.io-gallery--masonry .io-gallery__item {
	break-inside: avoid;
	margin-bottom: var(--gap-y);
}
@media (max-width: 599px) {
	.io-gallery--masonry {
		columns: 2;
	}
}

/* Artwork and commission descriptions: the body text colour (--text, see
 * "Accessibility" below; headings stay #111). */
.single-portfolio .entry-content .wpb_text_column,
.single-commission .entry-content .wpb_text_column {
	color: var(--text);
}

/* Nested WPBakery rows: a later js_composer rule resets .vc_row margins to 0,
 * which drops the standard -15px correction, so inner columns were indented
 * twice (e.g. "1995 Πόλεις και Παρατηρητήρια"). Restore it for inner rows. */
#main .vc_row.vc_inner {
	margin-left: -15px;
	margin-right: -15px;
}

/* ...and the theme's tablet rule pads text blocks in full-width columns by
 * 15px (it exempts .vc_col-sm-4 but not inner rows), doubling it there. */
@media (max-width: 1196px) {
	.vc_col-sm-12 .vc_inner .wpb_text_column {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Commission pages: the title header sits outside any WPBakery column, so it
 * had no padding (flush with the screen edge on mobile). */
.single-commission .entry-header {
	padding-left: 15px;
	padding-right: 15px;
}

/* ------------------------------------------------------------------
 * Header: align the menu optically with the logo. The logo is lowercase,
 * so its visual centre is the x-height band of the PNG (measured), not
 * its box; the uppercase menu sat ~2px above it on desktop. (The mobile
 * menu icon is already aligned by its visible bars — leave it.)
 * ------------------------------------------------------------------ */
@media (min-width: 1025px) {
	#access ul.sf-menu > li > a {
		position: relative;
		top: 2px;
	}
}

/* ------------------------------------------------------------------
 * Bio page (page-id-39): profile layout — photo left, all text right,
 * two equal columns, 48px gap, first text line level with the photo top.
 * Content is three WPBakery rows (photo + intro / solo shows / group
 * shows); flatten them into one grid instead of re-editing the page.
 * ------------------------------------------------------------------ */
.page-id-39 .wpb-content-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 48px;
	padding: 0 15px; /* sides: the old column gutter; top spacing comes from #main (see "Space under the menu bar") */
}
.page-id-39 .wpb-content-wrapper > .wpb_row,
.page-id-39 .wpb-content-wrapper > .wpb_row > .wrapper,
.page-id-39 .wpb-content-wrapper > .wpb_row > .wrapper > .inner-wrapper {
	display: contents;
}
/* their clearfix ::before/::after would otherwise become empty grid items */
.page-id-39 .wpb-content-wrapper > .wpb_row::before,
.page-id-39 .wpb-content-wrapper > .wpb_row::after,
.page-id-39 .wpb-content-wrapper > .wpb_row > .wrapper::before,
.page-id-39 .wpb-content-wrapper > .wpb_row > .wrapper::after,
.page-id-39 .wpb-content-wrapper > .wpb_row > .wrapper > .inner-wrapper::before,
.page-id-39 .wpb-content-wrapper > .wpb_row > .wrapper > .inner-wrapper::after {
	display: none;
}
.page-id-39 #content .wpb-content-wrapper .wpb_column {
	float: none;
	width: auto;
	padding: 0;
}
.page-id-39 .wpb-content-wrapper .vc_column-inner,
.page-id-39 .wpb-content-wrapper .wpb_text_column {
	padding-left: 0;
	padding-right: 0;
}

/* spacing comes from the grid gap only */
.page-id-39 #content .wpb-content-wrapper .wpb_content_element {
	margin-bottom: 0;
}
.page-id-39 .wpb-content-wrapper .wpb_text_column .wpb_wrapper > :first-child {
	margin-top: 0;
}
/* pull the first heading up by Comfortaa's space above the capitals, so its
 * cap line is level with the top of the photo (measured: 4px at 28px) */
.page-id-39 .wpb-content-wrapper .vc_col-sm-8 .wpb_text_column .wpb_wrapper > h2:first-child {
	margin-top: -4px;
}
.page-id-39 .wpb-content-wrapper .wpb_text_column .wpb_wrapper > :last-child {
	margin-bottom: 0;
}

/* photo fills its column */
.page-id-39 .wpb_single_image .vc_single_image-wrapper,
.page-id-39 .wpb_single_image img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.page-id-39 .wpb-content-wrapper {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 48px;
		align-items: start;
	}
	.page-id-39 #content .wpb-content-wrapper .wpb_column {
		grid-column: 2;
	}
	.page-id-39 #content .wpb-content-wrapper .wpb_column.vc_col-sm-4 {
		grid-column: 1;
		grid-row: 1 / span 3;
	}
}

/* ------------------------------------------------------------------
 * Lightbox (Magnific Popup, artwork galleries): white background instead
 * of the theme's near-black one, with dark controls to match.
 * ------------------------------------------------------------------ */
.mfp-bg,
.mfp-zoom-in.mfp-ready.mfp-bg {
	background: #fff;
	opacity: 1;
}
.mfp-close,
.mfp-image-holder .mfp-close {
	color: #111;
}
/* the arrows are icomoon glyphs, white in the theme */
.mfp-arrow-left:before,
.mfp-arrow-right:before {
	color: #111;
}
.mfp-title {
	color: #111;
}
.mfp-counter {
	color: #777;
}
/* the theme zeroes the image's top padding, so it touched the top of the
 * screen; Magnific subtracts this when sizing the image, so it still fits */
img.mfp-img {
	padding-top: 32px;
}

/* Works overview (/works/): titles under the thumbnails without the theme's
 * 2px letter spacing, closer to the image (theme: 26px) and lighter (theme:
 * #111), as Io asked. */
#block-portfolio .title-visible .entry-header h2,
.title-visible .entry-header h2 {
	letter-spacing: 0;
	text-transform: lowercase; /* "1992 τοπία επάλληλα" -- as Io asked */
	color: #767676; /* lightest grey that passes WCAG AA on white: 4.54:1 */
}
#block-portfolio .hentry .entry-header.portfolio-data {
	margin-top: 10px;
}

/* ------------------------------------------------------------------
 * Page transition: the column curtain (js/page-curtain.js, ported from LPI).
 * Near-black columns (#111, the heading colour; was light grey #f0f0f0)
 * slide up from below, each from its own delay -- a staircase edge --
 * cover the screen, header included, then slide on up and
 * off the next page. Transforms only. The columns overlap by a pixel: no
 * hairline seams. Five columns on phones.
 * ------------------------------------------------------------------ */
:root {
	--curtain-color: #111;
}
/* preview, ?transition=curtain-red: the red of the tent in the cover image of
 * "2003 Ιδιωτικός Χώρος" on /works/ (sampled from it) */
html.curtain-red {
	--curtain-color: #a62d34;
}
.column-curtain {
	position: fixed;
	inset: 0;
	z-index: 20000; /* over the fixed header (500) and the lightbox (1042+) */
	display: flex;
	visibility: hidden;
	pointer-events: none;
}
.column-curtain.is-on {
	visibility: visible;
	pointer-events: auto; /* no clicks through it while it's up */
}
/* waiting on a slow page, the columns bob (js/page-curtain.js): a white
 * ground behind them, so a dip shows white, never the page under it */
.column-curtain.is-waiting {
	background: #fff;
}
.column-curtain__column {
	flex: 1 1 0;
	margin-right: -1px;
	background: var(--curtain-color);
	transform: translateY(100%);
	transition: transform var(--curtain-rise, 600ms) cubic-bezier(0.65, 0, 0.35, 1) var(--curtain-delay, 0ms);
}
.column-curtain.is-covering .column-curtain__column {
	transform: none;
}
.column-curtain.is-lifting .column-curtain__column {
	transform: translateY(-100%);
	transition-duration: var(--curtain-lift, 600ms); /* set apart from the rise (js/page-curtain.js) */
}
.column-curtain.is-instant .column-curtain__column {
	transition: none;
}
@media (max-width: 767px) {
	.column-curtain__column:nth-child(n + 6) {
		display: none;
	}
}

/* Arriving: covered from the first frame (html.page-curtain-in, set by the
 * head script in functions.php) until the columns take over. Should the
 * curtain script never run: gone after 4s. */
html.page-curtain-in::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 20000;
	background: var(--curtain-color);
	animation: page-curtain-fallback 0.4s ease 4s both;
}
@keyframes page-curtain-fallback {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

/* Page transition, preview: apertures (js/page-apertures.js,
 * ?transition=apertures). A white sheet drawn on a canvas, openings cut out
 * of it. Arriving, the first-frame layer is white too. */
html.transition-apertures {
	--curtain-color: #fff;
}
/* the diagonal sweep (?transition=diagonal) is near-black, like the curtain */
html.transition-sweep {
	--curtain-color: #111;
}
.aperture-sheet {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 20000;
	display: block;
	visibility: hidden;
	pointer-events: none;
}
.aperture-sheet.is-on {
	visibility: visible;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.aperture-sheet,
	.column-curtain,
	html.page-curtain-in::after {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Works overview cards ([portfolio], e.g. /works/; js/works.js). A CSS grid
 * in place of the parent's Isotope layout -- same three columns and widths
 * (31.81% + 2.2% gutters), one column on phones -- and its loader/sizers
 * hidden.
 * ------------------------------------------------------------------ */
#block-portfolio #portfolio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 2.2%;
	row-gap: 40px;
	height: auto !important; /* Isotope's inline height, should it have run */
	opacity: 1;
	visibility: visible;
}
@media (max-width: 480px) {
	#block-portfolio #portfolio {
		grid-template-columns: minmax(0, 1fr);
	}
}
#block-portfolio .mt-loader,
#block-portfolio #portfolio > .grid-sizer,
#block-portfolio #portfolio > .gutter-sizer {
	display: none;
}
#content #block-portfolio #portfolio .hentry {
	float: none;
	width: auto;
	margin: 0;
	position: relative;
	left: auto !important; /* Isotope's inline positions, should it have run */
	top: auto !important;
}

/* Hover: no fade (the theme dims the image to 0.7) -- a slight zoom inside
 * the image's own box. */
#block-portfolio .hentry a.content-wrapper:hover .post-thumbnail {
	opacity: 1;
}
#block-portfolio .hentry .post-thumbnail {
	overflow: hidden;
}
#block-portfolio .hentry .post-thumbnail img {
	display: block;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.title-visible .portfolio-data:hover,
.title-visible a.portfolio-data:hover h2 {
	color: inherit; /* no pink (#e3998e) on hover */
}

/* Title underline: a 1px line in the title's own grey draws in from the
 * left on hover and slides out to the right on leave (the anchor point
 * switches sides). One line per text line if a title wraps. */
#block-portfolio .title-visible .entry-header h2 {
	display: inline;
	padding-bottom: 3px;
	background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (hover: hover) {
	#block-portfolio .hentry a.content-wrapper:hover .entry-header h2 {
		background-position: left bottom;
		background-size: 100% 1px;
	}
}

@media (hover: hover) {
	#block-portfolio .hentry a.content-wrapper:hover .post-thumbnail img {
		transform: scale(1.04);
	}
}

/* Cards fade in rising 48px as they come on screen -- after a page
 * transition, once it has gone (js/works.js adds .cards-ready, then .is-in
 * per card; --reveal-delay staggers those arriving together, row by row).
 * Same distance, durations and easing as the home entrance ("Home:
 * entrance"). Start state from the first paint when scripting is on; if the
 * script never runs, it gives way after 3s. */
@media (scripting: enabled) {
	#block-portfolio #portfolio .hentry {
		opacity: 0;
		transform: translateY(48px);
	}
	#block-portfolio #portfolio:not(.cards-ready) .hentry {
		animation: cards-fallback 0s 3s forwards;
	}
}
@keyframes cards-fallback {
	to {
		opacity: 1;
		transform: none;
	}
}
#block-portfolio #portfolio.cards-ready .hentry {
	transition:
		opacity 0.9s ease var(--reveal-delay, 0ms),
		transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms);
}
#block-portfolio #portfolio .hentry.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	#block-portfolio #portfolio .hentry {
		opacity: 1;
		transform: none;
		transition: none;
	}
	#block-portfolio .hentry .post-thumbnail img {
		transition: none;
	}
	#block-portfolio .title-visible .entry-header h2 {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Artwork and commission pages: entrances (js/project.js). The text fades in;
 * the works fade in rising 16px as they come on screen, staggered
 * (--reveal-delay). After a page transition they wait for the curtain to be
 * gone. Start state from the first paint when scripting is on; if the
 * script never runs it gives way after 3s. Reduced motion: no movement.
 * ------------------------------------------------------------------ */
@media (scripting: enabled) {
	:is(.single-portfolio, .single-commission) #content .wpb_text_column {
		opacity: 0;
	}
	:is(.single-portfolio, .single-commission) .io-gallery__item {
		opacity: 0;
		transform: translateY(16px);
	}
	html:not(.project-ready) :is(.single-portfolio, .single-commission) #content .wpb_text_column,
	html:not(.project-ready) :is(.single-portfolio, .single-commission) .io-gallery__item {
		animation: project-fallback 0s 3s forwards;
	}
}
@keyframes project-fallback {
	to {
		opacity: 1;
		transform: none;
	}
}
.project-ready :is(.single-portfolio, .single-commission) #content .wpb_text_column {
	transition: opacity 1s ease;
}
.project-ready :is(.single-portfolio, .single-commission) .io-gallery__item {
	transition:
		opacity 0.8s ease var(--reveal-delay, 0ms),
		transform 1s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
}
:is(.single-portfolio, .single-commission) #content .wpb_text_column.is-in,
:is(.single-portfolio, .single-commission) .io-gallery__item.is-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	:is(.single-portfolio, .single-commission) #content .wpb_text_column,
	:is(.single-portfolio, .single-commission) .io-gallery__item {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}
}

/* ------------------------------------------------------------------
 * Long texts justified, hyphenated (Greek: html lang="el", functions.php):
 * artwork and commission descriptions, the Bio page. Paragraphs only --
 * titles, labels and lists keep their left edge. Left-aligned on phones,
 * where the measure is too short to justify well. ?text=left shows the
 * previous left-aligned text (html.text-left, head script in functions.php).
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
	html:not(.text-left) :is(.single-portfolio, .single-commission) .entry-content .wpb_text_column p,
	html:not(.text-left) .page-id-39 .wpb-content-wrapper .wpb_text_column p {
		text-align: justify;
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 7 3 3; /* words of 7+ letters, 3 each side */
		text-wrap: pretty;
	}
}
/* ...also where the content has an inline "text-align: left" left by the
 * editor (2003 "Ιδιωτικός χώρος"), which would otherwise win; paragraphs
 * set right or centre (quotes, signatures) keep theirs */
@media (min-width: 768px) {
	html:not(.text-left) :is(.single-portfolio, .single-commission) .entry-content .wpb_text_column p[style*="text-align: left"],
	html:not(.text-left) .page-id-39 .wpb-content-wrapper .wpb_text_column p[style*="text-align: left"] {
		text-align: justify !important;
	}
}

/* Bio page: photo and text scroll up together until the photo meets the
 * menu bar, then the photo stays there while the text goes on (side by side
 * only, from 768px). Above 1024px that's the fixed, shrunk menu bar (73px);
 * below, the menu bar isn't fixed and the photo stops 48px from the top. On a short window the photo
 * is cropped from the bottom to fit, 48px above the window's bottom edge,
 * so all of it stays in view (her face kept: anchored near the top). */
@media (min-width: 768px) {
	.page-id-39 {
		--bio-photo-top: 48px;
	}
	.page-id-39 #content .wpb-content-wrapper .wpb_column.vc_col-sm-4 {
		position: sticky;
		top: var(--bio-photo-top);
	}
	.page-id-39 .wpb_single_image img {
		max-height: calc(100vh - var(--bio-photo-top) - 48px);
		object-fit: cover;
		object-position: 50% 20%;
	}
}
@media (min-width: 1025px) {
	.page-id-39 {
		--bio-photo-top: 73px; /* the shrunk menu bar's bottom edge: it meets it */
	}
}

/* ------------------------------------------------------------------
 * Bio: exhibition lists (built as the page renders, functions.php
 * ioangeli_bio_exhibitions; ?bio=original shows the plain lines). A
 * catalogue listing: the year bold in its own column, hairlines between
 * years, each show's title over its venues in grey.
 * ------------------------------------------------------------------ */
.page-id-39 .io-cv__title {
	margin: 0 0 24px;
}
.page-id-39 .io-cv__note {
	margin-left: 0.4em;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--text);
	vertical-align: 0.5em;
}
.page-id-39 .io-cv__list {
	margin: 0;
	border-bottom: 1px solid #e6e6e6;
}
.page-id-39 .io-cv__year {
	display: grid;
	grid-template-columns: 4.5em minmax(0, 1fr);
	column-gap: 24px;
	padding: 14px 0;
	border-top: 1px solid #e6e6e6;
}
.page-id-39 .io-cv__year dt {
	margin: 0;
	font-weight: 700;
	color: #111;
	font-variant-numeric: tabular-nums;
}
.page-id-39 .io-cv__year dd {
	margin: 0;
}
.page-id-39 .io-cv__year ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.page-id-39 .io-cv__year li {
	margin: 0;
	padding: 0;
}
.page-id-39 .io-cv__year li + li {
	margin-top: 10px;
}
.page-id-39 .io-cv__work,
.page-id-39 .io-cv__place {
	display: block;
}
.page-id-39 .io-cv__work,
.page-id-39 .io-cv__place {
	color: var(--text); /* the year (#111, bold) is what stands out */
}
@media (max-width: 767px) {
	.page-id-39 .io-cv__year {
		grid-template-columns: 3.5em minmax(0, 1fr);
		column-gap: 16px;
	}
}

/* ------------------------------------------------------------------
 * Accessibility: text contrast to WCAG AA (4.5:1 for normal text, 3:1 for
 * form field edges) on the white ground, and a visible keyboard focus.
 * The theme's greys were below it: body text #777 (4.48:1), menu #999
 * (2.85:1), footer #bbb (1.92:1), links #e3998e (2.28:1), field borders
 * #eee (1.2:1). Comfortaa Light's thin strokes make low contrast worse.
 * ------------------------------------------------------------------ */
/* Body text, all of it (headings, the menu, the Bio's years keep theirs):
 * #767676, the lightest grey that passes AA on white (4.54:1) -- Io's choice
 * for a light page. One step lighter (#777) fails. */
:root {
	--text: #767676;
}
body,
input,
textarea {
	color: var(--text);
}
#access ul a {
	color: #666; /* menu: 5.7:1; the current page and hover stay #111 */
}
#site-generator {
	color: #767676; /* footer: 4.5:1 */
}
/* links: the red of the tent in "2003 Ιδιωτικός Χώρος" (as the red curtain
 * preview), 6.9:1, in place of the theme's pale salmon; darker on hover */
a {
	color: #a62d34;
}
a:hover,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
.below-content-entry-meta a:hover {
	color: #7a2026;
}
/* form fields: an edge you can see (#8c8c8c, 3.4:1), darker when in use */
#page input[type="text"],
#page input[type="email"],
#page input[type="url"],
#page input[type="tel"],
#page input[type="search"],
#page textarea {
	border-color: #8c8c8c;
	color: var(--text); /* what's typed; the theme's input rule set #777 (fails) */
}
#page input[type="text"]:focus,
#page input[type="email"]:focus,
#page input[type="url"]:focus,
#page input[type="tel"]:focus,
#page input[type="search"]:focus,
#page textarea:focus {
	border-color: #111;
}
/* keyboard focus: a thin dark ring, only when tabbing (not on clicks); the
 * theme removes the outline everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 1px solid #111;
	outline-offset: 3px;
}

/* Reading text: line-height 1.6 (24px at 15px) instead of the theme's 1.825
 * -- each paragraph holds together as a block, which suits the justified
 * text; still above the 1.5 WCAG asks for. Artwork and commission
 * descriptions and the Bio (intro and exhibition lists); headings keep
 * theirs. */
:is(.single-portfolio, .single-commission) #content .wpb_text_column p,
.page-id-39 .wpb-content-wrapper .wpb_text_column p,
.page-id-39 .io-cv__list {
	line-height: 1.6;
}

/* ------------------------------------------------------------------
 * Contact form: fields as a single line underneath (bottom border only,
 * #8c8c8c -- 3:1, so the field still reads as one -- black while typing);
 * the button black with white text and a minimal radius, outlined only
 * (transparent, black text) on hover and keyboard focus.
 * ------------------------------------------------------------------ */
#page .wpcf7 input[type="text"],
#page .wpcf7 input[type="email"],
#page .wpcf7 input[type="url"],
#page .wpcf7 input[type="tel"],
#page .wpcf7 textarea {
	border-width: 0 0 1px;
	border-style: solid;
	border-radius: 0;
	background: transparent;
	padding-left: 0;
	padding-right: 0;
	box-shadow: none;
}
#page .wpcf7 input[type="submit"] {
	background: #111;
	color: #fff;
	border: 1px solid #111;
	border-radius: 2px;
	transition: background-color 0.2s ease, color 0.2s ease;
	font-size: 11px; /* as the menu, bold */
	font-weight: 700;
	letter-spacing: 2px;
}
#page .wpcf7 input[type="submit"]:hover,
#page .wpcf7 input[type="submit"]:focus-visible {
	background: transparent;
	color: #111;
}
/* in use: the line turns black and doubles (2px) -- the focus indicator,
 * instead of the ring, which would draw the box the fields no longer have */
#page .wpcf7 input[type="text"]:focus,
#page .wpcf7 input[type="email"]:focus,
#page .wpcf7 input[type="url"]:focus,
#page .wpcf7 input[type="tel"]:focus,
#page .wpcf7 textarea:focus {
	outline: none;
	border-bottom-color: #111;
	box-shadow: 0 1px 0 #111;
}
/* labels shown as placeholders (functions.php, ioangeli_cf7_placeholders):
 * the placeholder is now the visible label, so it gets the body text grey
 * (4.54:1; the theme's was #777, which fails) at full opacity */
#page .wpcf7 input::placeholder,
#page .wpcf7 textarea::placeholder {
	color: var(--text);
	opacity: 1;
}
/* visually hidden, still read by screen readers (WordPress's usual class;
 * the theme doesn't define it) */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Footer at the bottom of the window on short pages (Contact, Home); on long
 * ones it follows the content as before. #page is a column at least the
 * window's height, #main takes up the rest. (svh: the visible height on
 * phones, without the browser bar; vh where unsupported.) */
#page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}
#page > #main {
	flex: 1 0 auto;
	width: 100%; /* the theme centres them with auto margins, which in a */
	box-sizing: border-box; /* (its side padding inside the 100%, no overflow) */
}
#page > #colophon {
	flex-shrink: 0;
	width: 100%; /* flex column would shrink them to their content */
	box-sizing: border-box;
}
/* the © line 20px from the bottom, not the theme's 114px + 14px, so on a
 * short page it sits at the window's foot */
#site-generator {
	padding-bottom: 20px;
}
#colophon #site-generator p {
	margin-bottom: 0; /* (outranks the theme's phone rule, which sets 14px) */
}
/* on the left gutter at every width (the theme centres it on phones) */
#colophon #site-generator,
#colophon #site-generator p {
	text-align: left;
}

/* ------------------------------------------------------------------
 * Home: a smaller work (functions.php, ioangeli_home_work) -- a random
 * image from the artwork galleries, linking to its work. From 768px: its
 * bottom level with the main photo's, its right edge on the right gutter
 * (where the menu ends), 16.5% wide. On phones: under the photo, on the
 * right, 60%.
 * ------------------------------------------------------------------ */
.home .wpb_single_image .wpb_wrapper {
	position: relative;
}
.home .io-home-work {
	display: block;
	width: 60%;
	margin: 24px 0 0 auto;
}
/* the square frame the images change in (functions.php: every 2s the next
 * fades in as the current fades out; cropped to the square, as in the
 * Works grid) */
.home .io-home-work__frame {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.home .io-home-work__frame img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
	transition: opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.home .io-home-work__frame img.is-below {
	opacity: 0;
	transition: none;
}
.home .io-home-work__frame img.is-gone {
	opacity: 0;
}
@media (min-width: 768px) {
	.home .io-home-work {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 16.5%; /* 1.5 x the first 11% */
		margin: 0;
	}
}

/* Home: entrance -- on each load the photo fades in and rises 48px, the
 * smaller work 180ms after it (functions.php: html.home-reveal from the
 * first frame, .is-in once the images are loaded and any page transition
 * has opened). Should the script never run: shown after 3s. */
html.home-reveal .home .wpb_single_image img.attachment-large,
html.home-reveal .home .io-home-work {
	opacity: 0;
	transform: translateY(48px);
	transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.home-reveal:not(.home-in) .home .wpb_single_image img.attachment-large {
	animation: io-home-fallback 0.6s ease 3s forwards;
}
html.home-reveal .home .wpb_single_image img.attachment-large.is-in,
html.home-reveal .home .io-home-work.is-in {
	opacity: 1;
	transform: none;
}
@keyframes io-home-fallback {
	to {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------
 * Works overview, full width (default; ?works=classic shows the earlier
 * 1160px, three columns): the grid on the page gutters like everything
 * else, the columns by window width -- 4 from 1536px, 3 from 900px (larger
 * thumbnails on laptops), 2 from 481px, 1 on phones. 24px between columns, as tight as the artwork galleries.
 * ------------------------------------------------------------------ */
html:not(.works-classic) #block-portfolio.default-width {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
html:not(.works-classic) #block-portfolio #portfolio {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
}
@media (max-width: 480px) {
	html:not(.works-classic) #block-portfolio #portfolio {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (min-width: 900px) {
	html:not(.works-classic) #block-portfolio #portfolio {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1536px) {
	html:not(.works-classic) #block-portfolio #portfolio {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Commission pages: the title (40px h1, above both columns) up 7px, so its
 * capitals start where everything else does -- level with the artwork
 * pages' titles and the top of the images on every page. */
.single-commission .entry-header .entry-title {
	position: relative;
	top: -7px; /* (a negative margin is absorbed by the wrappers) */
}

/* Home and Contact: the content centred vertically between the menu bar
 * and the footer, where the bar is fixed (above 1024px); at least 48px
 * from each. Other pages start 48px under the bar. */
@media (min-width: 1025px) {
	.home #page #main,
	.page-id-46 #page #main {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 112px; /* the tall bar (?menu=tall) */
	}
	.menu-thin.home #page #main,
	.menu-thin.page-id-46 #page #main {
		padding-top: 73px; /* the thin bar */
	}
	.home #page #main > #primary,
	.page-id-46 #page #main > #primary {
		width: 100%;
		padding: 48px 0;
		box-sizing: border-box;
	}
	/* the theme's trailing margins would push the centre up (WPBakery's
	 * element margin needs !important) */
	.home #content .wpb_content_element,
	.page-id-46 #content .wpb_content_element,
	.page-id-46 #content .wpcf7,
	.page-id-46 #content .wpcf7 form > p:last-of-type {
		margin-bottom: 0 !important;
	}
}

/* ------------------------------------------------------------------
 * Press page ([io_press], functions.php): per section (Τύπος, Media) the
 * heading on the left, staying in view while its list scrolls on the
 * right; the list as on the Bio -- year bold in its own column, hairlines
 * between years, title over "publication · kind" in grey. Stacked on
 * phones.
 * ------------------------------------------------------------------ */
.io-press {
	padding: 0 15px; /* on the page gutter, as the WPBakery pages' columns */
}
.io-press__section + .io-press__section {
	margin-top: 96px;
}
.io-press__title {
	margin: 0 0 24px;
}
.io-press__list {
	margin: 0;
	border-bottom: 1px solid #e6e6e6;
	line-height: 1.6;
}
.io-press__year {
	display: grid;
	grid-template-columns: 4.5em minmax(0, 1fr);
	column-gap: 24px;
	padding: 14px 0;
	border-top: 1px solid #e6e6e6;
}
.io-press__year dt {
	margin: 0;
	font-weight: 700;
	color: #111;
	font-variant-numeric: tabular-nums;
}
.io-press__year dd {
	margin: 0;
}
.io-press__year ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.io-press__year li {
	margin: 0;
}
.io-press__year li + li {
	margin-top: 10px;
}
.io-press__work,
.io-press__place {
	display: block;
	color: var(--text);
}
.io-press__work a {
	color: #111;
	text-decoration: underline;
	text-decoration-color: transparent; /* underlined on hover / keyboard focus only */
	text-underline-position: under; /* below the descenders (ρ, γ, μ, ξ) */
	text-underline-offset: 1px;
	transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.io-press__work a:hover,
.io-press__work a:focus-visible {
	color: #111;
	text-decoration-color: currentColor;
}
@media (max-width: 767px) {
	.io-press__year {
		grid-template-columns: 3.5em minmax(0, 1fr);
		column-gap: 16px;
	}
}
@media (min-width: 768px) {
	.io-press__section {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 48px;
		align-items: start;
	}
	.io-press__title {
		position: sticky;
		top: 73px; /* under the thin menu bar */
		margin: 0;
	}
}
/* Press: a rule above each year, none below the list */
.io-press__list {
	border-bottom: 0;
}
/* the icons, drawn (SVG masks), hairline: ↗ after the title, the original
 * (a new tab), as tall as the capitals, on the baseline; ↓ .PDF after the
 * credit, the saved copy (below). Screen readers hear "(ανοίγει σε νέα
 * καρτέλα)" and "Αντίγραφο (PDF)". */
.io-press__work .io-press__ext {
	display: inline-block;
	width: 0.62em; /* about the capitals' height */
	height: 0.62em;
	margin-left: 0.4em;
	vertical-align: 0; /* on the baseline */
	text-decoration: none;
	background-color: #111;
	transition: transform 0.3s ease;
}
.io-press__work .io-press__ext {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9L9 1M2.2 1H9v6.8' fill='none' stroke='%23000' stroke-width='0.75'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9L9 1M2.2 1H9v6.8' fill='none' stroke='%23000' stroke-width='0.75'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* hover / keyboard focus on the title or the arrow: the arrow turns 45
 * degrees, ↗ to → */
.io-press__link:hover ~ .io-press__ext,
.io-press__link:focus-visible ~ .io-press__ext,
.io-press__ext:hover {
	transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
	.io-press__download::before,
	.io-press__work .io-press__ext {
		transition: none;
	}
}

/* Press, the separator between publication and kind (one line) */
.io-press__place > * + *::before {
	content: " · ";
}

/* ------------------------------------------------------------------
 * Press, editorial layout (default; ?press=classic -- html.press-classic --
 * shows the plain list): three
 * levels -- the year in large light numerals hanging in its column, the
 * title a step up, the publication small, uppercase and tracked like the
 * menu; the kind as a quiet label on the right of the entry (under the
 * publication on phones).
 * ------------------------------------------------------------------ */
html:not(.press-classic) .io-press__year {
	grid-template-columns: 4.2em minmax(0, 1fr);
	padding: 22px 0;
}
html:not(.press-classic) .io-press__year dt {
	font-size: 28px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.01em;
	color: #111;
}
html:not(.press-classic) .io-press__year li + li {
	margin-top: 22px;
}
html:not(.press-classic) .io-press__year li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 24px;
	align-items: baseline;
}
html:not(.press-classic) .io-press__work {
	grid-column: 1;
	font-size: 17px;
	line-height: 1.45;
	color: #111;
}
html:not(.press-classic) .io-press__place {
	display: contents; /* its parts placed in the entry's grid */
}
html:not(.press-classic) .io-press__place > * + *::before {
	content: none;
}
html:not(.press-classic) .io-press__outlet {
	grid-column: 1;
	margin-top: 6px;
}
html:not(.press-classic) .io-press__outlet,
html:not(.press-classic) .io-press__kind {
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: 1.5px;
	text-transform: uppercase; /* Greek capitals lose their accents (lang="el") */
	color: var(--text);
}
html:not(.press-classic) .io-press__kind {
	grid-column: 2;
	grid-row: 1;
	text-align: right;
	white-space: nowrap;
}
@media (max-width: 767px) {
	html:not(.press-classic) .io-press__year {
		grid-template-columns: 3.4em minmax(0, 1fr);
	}
	html:not(.press-classic) .io-press__year dt {
		font-size: 22px;
	}
	html:not(.press-classic) .io-press__year li {
		display: block;
	}
	/* phones: the kind follows the publication on its line */
	html:not(.press-classic) .io-press__place {
		display: block;
		margin-top: 6px;
	}
	html:not(.press-classic) .io-press__outlet {
		margin-top: 0;
	}
	html:not(.press-classic) .io-press__kind {
		white-space: normal;
	}
	html:not(.press-classic) .io-press__place > * + *::before {
		content: " · ";
	}
}
/* ↓ .PDF after the credit: the saved copy. The icon larger than the 11px
 * capitals (about 14px), the label in the line's lettering; grey, black on
 * hover / keyboard focus, when the ↓ also drops a little. */
.io-press__download {
	display: inline-block;
	margin-left: 0.7em;
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}
.io-press__download::before {
	content: "";
	display: inline-block;
	width: 1.3em;
	height: 1.3em;
	margin-right: 0.3em;
	vertical-align: -0.2em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0.8v6.4M2.2 4.6L5 7.4l2.8-2.8M1 9.4h8' fill='none' stroke='%23000' stroke-width='0.75'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0.8v6.4M2.2 4.6L5 7.4l2.8-2.8M1 9.4h8' fill='none' stroke='%23000' stroke-width='0.75'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.3s ease;
}
.io-press__download:hover,
.io-press__download:focus-visible {
	color: #111;
}
.io-press__download:hover::before,
.io-press__download:focus-visible::before {
	transform: translateY(0.12em);
}

/* Bio: the photo on its column's left edge, growing with the window -- half
 * the column up to a 1440px window, then half of every extra pixel of window
 * width more, up to the full column (from 768px; full width on phones) */
@media (min-width: 768px) {
	.page-id-39 .wpb_single_image img {
		width: clamp(50%, calc(50% + (100vw - 1440px) / 2), 100%);
	}
}

/* Menu bar on scroll (functions.php, ioangeli_menu_affix_script). Above
 * 1024px, where the theme fixes the bar: part of the page, scrolling away
 * with it and staying away while scrolling down; scrolling up, fixed and
 * sliding down into view (html.menu-affixed.menu-shown); sliding away again
 * on the way down; part of the page again at the very top. */
@media (min-width: 1025px) {
	html:not(.menu-affixed) .fixed #header {
		position: absolute;
		top: 0;
	}
	html.menu-affixed .fixed #header {
		top: 0;
		transform: translateY(-100%);
		/* a smooth in-out: eases into the movement and out of it */
		transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
	}
	html.menu-affixed.menu-shown .fixed #header {
		transform: none;
	}
	/* placed above the window without animating (only the slide in animates) */
	html.menu-instant .fixed #header {
		transition: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	html.menu-affixed .fixed #header {
		transition: none;
	}
}

/* Home, Works, Press, and the artwork and commission pages: the full
 * width between the page gutters, on any screen -- no 1536px cap (Bio and
 * Contact keep it). */
.home #page #main #content,
.page-slug-works #page #main #content,
.page-slug-press #page #main #content,
.single-portfolio #page #main #content,
.single-commission #page #main #content {
	max-width: none;
}

/* Works overview: each thumbnail fills its column. Full width on wide
 * screens makes the columns wider than the 400px thumbnail files, which
 * otherwise stopped at their own size, leaving gaps. */
#block-portfolio #portfolio .post-thumbnail img {
	width: 100%;
	height: auto;
}

/* Bio: the 1536px-capped content on the left (on the gutter, under the
 * logo), not centred, on wide screens */
.page-id-39 #page #main #content {
	margin-left: 0;
}

/* Thin menu bar from the first frame (body.menu-thin, the default): the
 * theme's CSS draws it 112px tall and only its scroll script (skrollr) then
 * sets the 73px size -- so on every page load the logo and menu jumped up
 * 20px. The same values as skrollr's, set here, so nothing moves. */
@media (min-width: 1025px) {
	.menu-thin .fixed #header {
		height: 73px;
	}
	.menu-thin .fixed #header .site-title-custom {
		margin: 26px 0;
	}
}

/* Home: the photo links to the Bio (functions.php); it stays a plain block */
.home .io-home-photo {
	display: block;
}

/* Home on phones: both images the full width between the 15px gutters --
 * in line with the logo and the burger -- the smaller work under the photo */
@media (max-width: 767px) {
	.home .io-home-work {
		width: 100%;
		margin: 24px 0 0;
	}
}
/* ------------------------------------------------------------------
 * Mobile menu (up to 1024px; js/mobile-menu.js): a burger of three 1px
 * lines, 46px wide; the menu a full-screen white panel sliding in from the
 * right (translateX 100% -> 0) with an in-out ease, closed by a 1px x in the
 * burger's place, Escape, or a swipe to the right.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	#mobile-menu-dropdown {
		width: 46px;
		height: 33px;
		position: relative;
	}
	#mobile-menu-dropdown i:before {
		content: none; /* the theme's icon-font burger */
	}
	#mobile-menu-dropdown i,
	#mobile-menu-dropdown i::after,
	.io-menu-close::before,
	.io-menu-close::after {
		position: absolute;
		left: 0;
		width: 46px;
		height: 1px;
		background: #111;
		content: "";
	}
	#mobile-menu-dropdown i {
		top: 16px;
		display: block;
		box-shadow: 0 -8px 0 #111; /* the top line */
	}
	#mobile-menu-dropdown i::after {
		top: 8px; /* the bottom line */
	}

	#access-mobile-wrapper {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 10000; /* over the header (500), under the page transitions */
		overflow-y: auto;
		overscroll-behavior: contain;
		background: #fff;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.6s;
	}
	html.mobile-menu-open #access-mobile-wrapper {
		transform: none;
		visibility: visible;
		transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
	}
	html.mobile-menu-open {
		overflow: hidden; /* the page behind stays put */
	}
	#access-mobile {
		display: flex !important; /* the theme toggled it; the panel does now */
		flex-direction: column;
		justify-content: center;
		min-height: 100%;
		padding: 96px 15px;
		box-sizing: border-box;
	}
	#access-mobile li a {
		font-size: 15px;
		letter-spacing: 3px;
		padding: 16px 20px;
		color: #666; /* 5.7:1 (the theme's #999 fails) */
	}
	#access-mobile .current-menu-item > a,
	#access-mobile .current_page_item > a {
		color: #111;
	}

	/* the close button: fixed over the burger, above the panel (placed by
	 * js/mobile-menu.js), shown from just before opening until the panel has
	 * gone (html.mobile-menu-button); its lines
	 * start as the burger's three and turn into the x as the panel slides in,
	 * back again as it slides out */
	.io-menu-close {
		display: none;
		position: fixed;
		z-index: 10001; /* above the panel */
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}
	html.mobile-menu-button .io-menu-close {
		display: block;
	}
	html.mobile-menu-button #mobile-menu-dropdown {
		visibility: hidden; /* the close button is in its place */
	}
	.io-menu-close::before,
	.io-menu-close::after,
	.io-menu-close span {
		top: 16px;
		transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease;
	}
	.io-menu-close span {
		position: absolute;
		left: 0;
		width: 46px;
		height: 1px;
		background: #111;
	}
	.io-menu-close::before {
		transform: translateY(-8px);
	}
	.io-menu-close::after {
		transform: translateY(8px);
	}
	html.mobile-menu-open .io-menu-close::before {
		transform: rotate(30deg);
	}
	html.mobile-menu-open .io-menu-close::after {
		transform: rotate(-30deg);
	}
	html.mobile-menu-open .io-menu-close span {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	#access-mobile-wrapper,
	html.mobile-menu-open #access-mobile-wrapper {
		transition: none;
	}
	.io-menu-close::before,
	.io-menu-close::after,
	.io-menu-close span {
		transition: none;
	}
}

/* Works overview on tablets and phones: the theme pads the portfolio block
 * 15px each side on top of the column's 15px, so the grid sat 15px inside
 * the logo and the burger. Without it the grid lines up with both. */
@media (max-width: 1024px) {
	html:not(.works-classic) #block-portfolio.default-width {
		padding-left: 0;
		padding-right: 0;
	}
}