/*
Theme Name: When Sound Ends
Description: Custom theme for When Sound Ends, an archive of Davide Tidoni's actions. Image grid, index view and about page, built from the desktop design (1280 × 800, 7 columns).
Version: 1.2.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: wse
*/

/* ---------------------------------------------------------------
   Fonts (Times Ten, supplied by the designer)
   --------------------------------------------------------------- */
@font-face {
	font-family: "Times Ten WSE";
	src: url("assets/fonts/TimesTen.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Times Ten WSE";
	src: url("assets/fonts/TimesTenItalic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Times Ten WSE";
	src: url("assets/fonts/TimesTenBold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Times Ten WSE";
	src: url("assets/fonts/TimesTenBoldItalic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* ---------------------------------------------------------------
   Design values
   Edit them in WordPress: Appearance > Customize > Design.
   The numbers below are only the defaults (the 1280 x 800 PDF).
   All "-n" values are plain numbers in pixels of the design page.
   --------------------------------------------------------------- */
:root {
	--fg: #666666;
	--bg: #000000;

	--design-w: 1280;
	--max-w: 100000;            /* stop scaling above this window width */
	--margin-n: 20;
	--gutter-n: 9;
	--cols-desktop: 7;
	--cell-w: 169.43;
	--cell-h: 110;
	--index-baseline-n: 115.2;
	--content-top-n: 144;

	--title-size-n: 13.5;
	--title-lh-n: 15.5;
	--title-track-n: 50;        /* InDesign tracking */

	--body-size-n: 11.5;
	--body-lh-n: 14;
	--body-track-n: 50;

	--ix-nr: 1;
	--ix-title: 1;
	--ix-loc: 1;
	--ix-desc: 3;
	--ix-year: 1;
	--ix-head-lines: 2;
	--ix-row-lines: 1;

	--about-span: 5;
	--about-intro-lines: 3;
	--about-para-lines: 1;
	--about-section-lines: 3;

	/* Times Ten metrics (ascender / descender per em), used to place baselines */
	--asc: 0.935;
	--desc: 0.247;

	/* ---- derived, no need to edit ---- */

	/* 1 design pixel: grows with the window like InDesign in fullscreen,
	   never smaller than 1px, never larger than max-w allows */
	--u: clamp(1px, calc(100vw / var(--design-w)), calc(var(--max-w) * 1px / var(--design-w)));

	--cols: var(--cols-desktop);
	--margin: calc(var(--margin-n) * var(--u));
	--gutter: calc(var(--gutter-n) * var(--u));
	--cell-ratio: var(--cell-w) / var(--cell-h);

	--title-size: calc(var(--title-size-n) * var(--u));
	--title-lh: calc(var(--title-lh-n) * var(--u));
	--title-track: calc(var(--title-track-n) / 1000 * 1em);

	--body-size: calc(var(--body-size-n) * var(--u));
	--body-lh: calc(var(--body-lh-n) * var(--u));
	--body-track: calc(var(--body-track-n) / 1000 * 1em);

	--header-h: calc(var(--content-top-n) * var(--u));
	/* top of the "Index" line so that its baseline lands on index-baseline */
	--index-top: calc((var(--index-baseline-n) - (var(--title-lh-n) - (var(--asc) + var(--desc)) * var(--title-size-n)) / 2 - var(--asc) * var(--title-size-n)) * var(--u));
	/* distance from a body baseline to the bottom of its line */
	--body-below-baseline: calc(((var(--body-lh-n) + (var(--asc) + var(--desc)) * var(--body-size-n)) / 2 - var(--asc) * var(--body-size-n)) * var(--u));
}

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

html {
	background: var(--bg);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--fg);
	font-family: "Times Ten WSE", "Times New Roman", Times, serif;
	font-weight: 400;
	font-size: var(--body-size);
	line-height: var(--body-lh);
	letter-spacing: var(--body-track);
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a:hover,
a:focus-visible,
.is-active {
	text-decoration: underline;
	text-decoration-thickness: calc(0.75 * var(--u));
	text-underline-offset: 0.23em;
}

a:focus-visible { outline: none; }

em, i { font-style: italic; }

img { display: block; max-width: 100%; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* The column grid used everywhere */
.grid7 {
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	column-gap: var(--gutter);
}

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */
.site-header {
	position: relative;
	height: var(--header-h);
	padding: var(--margin) var(--margin) 0;
	font-size: var(--title-size);
	line-height: var(--title-lh);
	letter-spacing: var(--title-track);
}

.site-header__bar {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--gutter);
}

.site-header__about { margin-right: calc(var(--title-track) * -1); } /* trailing letter-space */

.site-header__index {
	position: absolute;
	left: var(--margin);
	top: var(--index-top);
}

.site-header__index a { cursor: pointer; }

/* ---------------------------------------------------------------
   Image view
   --------------------------------------------------------------- */
.images {
	padding: 0 var(--margin) var(--margin);
	row-gap: var(--gutter);
}

.cell {
	margin: 0;
	aspect-ratio: var(--cell-ratio);
	overflow: hidden;
}

.cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The number sits in its own cell, baseline on the bottom edge of the images */
.cell--num {
	display: flex;
	align-items: flex-end;
	overflow: visible;
}

.cell--num span {
	display: block;
	transform: translateY(var(--body-below-baseline));
}

/* ---------------------------------------------------------------
   Index view
   --------------------------------------------------------------- */
.index {
	display: none;
	padding: 0 var(--margin) calc(60 * var(--u));
	margin-top: calc(-1 * var(--u)); /* optical: matches the PDF baselines */
}

.view-index .index { display: block; }
.view-index .images { display: none; }

.index__row {
	margin: 0 0 calc(var(--body-lh) * var(--ix-row-lines));
}

.index__row--head { margin-bottom: calc(var(--body-lh) * var(--ix-head-lines)); }

/* placed left to right, each as wide as set in the Design panel */
.index__nr    { grid-column: span var(--ix-nr); }
.index__title { grid-column: span var(--ix-title); }
.index__loc   { grid-column: span var(--ix-loc); }
.index__desc  { grid-column: span var(--ix-desc); }
.index__year  { grid-column: span var(--ix-year); }

.index__row > * { margin: 0; min-width: 0; }

/* ---------------------------------------------------------------
   About page (and any other page)
   --------------------------------------------------------------- */
.page-content {
	padding: 0 var(--margin) calc(60 * var(--u));
}

.entry {
	grid-column: 1 / span var(--about-span);
}

.entry > * {
	margin: 0 0 calc(var(--body-lh) * var(--about-para-lines));
}

/* First paragraph: title font */
.entry > p:first-child {
	font-size: var(--title-size);
	line-height: var(--title-lh);
	letter-spacing: var(--title-track);
	margin-bottom: calc(var(--body-lh) * var(--about-intro-lines));
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* A Separator block = section break */
.entry > hr,
.entry > .wp-block-separator {
	height: calc(var(--body-lh) * max(0, var(--about-section-lines) - var(--about-para-lines)));
	margin: 0;
	border: 0;
	background: none;
	opacity: 1;
	width: auto;
	max-width: none;
}

.entry > :last-child { margin-bottom: 0; }

.entry a:not(:hover) { text-decoration: none; }

/* ---------------------------------------------------------------
   Smaller screens (not part of the desktop design)
   --------------------------------------------------------------- */
@media (max-width: 960px) {
	.index .grid7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.index__row--head { display: none; }
	.index__nr { grid-column: 1; grid-row: 1 / span 4; }
	.index__title,
	.index__loc,
	.index__desc,
	.index__year { grid-column: 2 / span 2; }
}

@media (max-width: 760px) {
	:root { --cols: 3; --u: 1px; }
	.entry { grid-column: 1 / -1; }
}