/* Phobos — family photo archive, 2001–2004
   Palette taken from the photographs: interior browns, Icelandic meadow,
   the red tablecloth from Christmas 2001. */

:root {
	--ink:        #1A1714;
	--paper:      #E8E3D9;
	--paper-deep: #DCD6C9;
	--meadow:     #7C8B5A;
	--cloth:      #B2472C;
	--stone:      #4A4540;
	--rule:       #C6BFB0;

	--measure: 34rem;
}

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
	font-size: 17px;
	line-height: 1.55;
	font-variant-numeric: oldstyle-num;
}

a { color: inherit; }

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

.wrap {
	max-width: 62rem;
	margin: 0 auto;
	padding: 0 1.5rem 6rem;
}

/* ---- masthead ---- */

.masthead {
	padding: 4.5rem 0 2.5rem;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 3rem;
}

.masthead h1 {
	font-size: clamp( 2.1rem, 5vw, 3.4rem );
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.08;
	margin: 0 0 0.6rem;
}

.masthead p {
	margin: 0;
	max-width: var(--measure);
	color: var(--stone);
}

.masthead nav {
	margin-top: 1.6rem;
	display: flex;
	gap: 1.5rem;
	font-size: 0.95rem;
}

.masthead nav a { text-decoration-color: var(--rule); text-underline-offset: 0.25em; }
.masthead nav a:hover { text-decoration-color: var(--cloth); }

/* ---- album index: the year is the spine ---- */

.year {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 2rem;
	padding: 2rem 0;
	border-top: 1px solid var(--rule);
	align-items: start;
}

.year > .y {
	font-size: 1.05rem;
	color: var(--meadow);
	font-weight: 600;
	padding-top: 0.2rem;
	position: sticky;
	top: 1rem;
}

.album { margin-bottom: 2.4rem; }
.album:last-child { margin-bottom: 0; }

.album h2 {
	font-size: 1.32rem;
	font-weight: 600;
	margin: 0 0 0.15rem;
	letter-spacing: -0.01em;
}

.album h2 a { text-decoration: none; }
.album h2 a:hover { text-decoration: underline; text-decoration-color: var(--cloth); text-underline-offset: 0.2em; }

.album .meta {
	font-size: 0.87rem;
	color: var(--stone);
	margin: 0 0 0.9rem;
}

/* photo strips */

/* Album previews are a single justified row, sized like the album pages'
   rows. Nothing scrolls sideways: what doesn't fit is on the album's page. */

.preview { gap: 6px; }

/* On a narrow screen five-across is unreadable: wrap the preview into two
   rows of larger photos instead, and let the height follow the content. */
@media (max-width: 34rem) {
	.preview { flex-wrap: wrap; height: auto !important; }
	.preview .cell { flex: 1 1 calc( 50% - 3px ); height: 7rem; }
}

/* ---- single photo ---- */

.photo-full {
	margin: 0 0 1.8rem;
	background: var(--paper-deep);
}

.photo-full img { width: 100%; height: auto; }

.provenance {
	border-top: 1px solid var(--rule);
	padding-top: 1.2rem;
	font-size: 0.9rem;
	color: var(--stone);
	max-width: var(--measure);
}

.provenance dl {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: 0.35rem 1rem;
	margin: 0;
}

.provenance dt { color: var(--ink); }
.provenance dd { margin: 0; }

.provenance .path {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 0.82rem;
	word-break: break-all;
	color: var(--stone);
}

/* ---- timeline ---- */

.day {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 1.5rem;
	padding: 1.4rem 0;
	border-top: 1px solid var(--rule);
}

.day .d { font-size: 0.9rem; color: var(--meadow); padding-top: 0.15rem; }

.back {
	display: inline-block;
	margin-bottom: 2rem;
	font-size: 0.92rem;
	color: var(--stone);
	text-underline-offset: 0.25em;
}

.empty {
	padding: 3rem 0;
	color: var(--stone);
	max-width: var(--measure);
}

@media (max-width: 40rem) {
	.year, .day { grid-template-columns: 1fr; gap: 0.6rem; }
	.year > .y { position: static; }
	.provenance dl { grid-template-columns: 1fr; gap: 0.1rem 0; }
	.provenance dt { margin-top: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

/* record-cover scans — a collection within the collection */

.records .section-note { margin: 0 0 0.9rem; max-width: var(--measure); }

.record-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	font-size: 0.97rem;
}

.record-list a { text-decoration-color: var(--rule); text-underline-offset: 0.25em; }
.record-list a:hover { text-decoration-color: var(--cloth); }


/* Contact-sheet layout: rows of photos at their own proportions, each row
   scaled to span the width. Widths and heights come from the server, which
   knows every photo's real dimensions. */

.sheet { display: flex; flex-direction: column; gap: 8px; }

/* The row's height is set inline from the server's computation; cells divide
   the width in proportion to their aspect ratios. */
.sheet-row { display: flex; gap: 8px; }

/* Each cell's flex ratio is its aspect ratio, so a row's cells divide the
   available width in exactly the proportions of the photos in it. The image
   then fills its cell completely — no letterboxing, no cropping. */

.sheet-row .cell {
	display: block;
	line-height: 0;
	background: var(--paper-deep);
	min-width: 0;
}

.sheet-row img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Below the width the rows were computed for, everything scales together. */
.sheet-row { max-width: 100%; }

@media (max-width: 40rem) {
	/* On a phone a justified row gets too small to read; stack into two columns. */
	.sheet-row { flex-wrap: wrap; }
	.sheet-row .cell { flex: 1 1 calc( 50% - 4px ); }
}

.more {
	margin: 0.5rem 0 0;
	font-size: 0.87rem;
	color: var(--stone);
}

.more a { text-decoration-color: var(--rule); text-underline-offset: 0.25em; }
.more a:hover { text-decoration-color: var(--cloth); }


/* A photo shot with the camera turned on its side: these cameras recorded no
   orientation, so the correction is stored per photo and applied here. The
   cell is already sized to the displayed proportions, so the rotated image
   is scaled to fill it. */

.cell.turned { overflow: hidden; }

/* The image is laid out at the cell's size but rotated about its centre, so
   its own width/height swap places. Sizing it to the cell's *opposite*
   dimensions makes it land exactly in the cell. */
.cell.turned img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center;
	transform: rotate( var( --rot, 90deg ) );
}

/* ---- rotating the view ---- */

/* A quarter-turned image is rotated about its centre, so the box it needs is
   as tall as the image is wide. Constraining by height rather than width
   keeps a turned photo inside the column. */

.photo-full.turned {
	display: flex;
	justify-content: center;
	height: 80vh;
}

.photo-full.turned img {
	width: auto;
	height: auto;
	max-width: 80vh;
	max-height: 100%;
}

.controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
}

.turn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border: 1px solid var(--rule);
	background: transparent;
	color: var(--stone);
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
}

.turn:hover {
	border-color: var(--ink);
	color: var(--ink);
}

.reset {
	font-size: 0.87rem;
	color: var(--stone);
	text-underline-offset: 0.25em;
	margin-left: 0.3rem;
}

.reset:hover { color: var(--cloth); }

.provenance .origin { margin-bottom: 0.5rem; }
.provenance .origin:last-child { margin-bottom: 0; }

/* ---- the gate ---- */

.gate {
	max-width: 26rem;
	padding-top: 22vh;
}

.gate h1 {
	font-size: clamp( 2rem, 5vw, 2.8rem );
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 0.5rem;
}

.gate .lede {
	margin: 0 0 2rem;
	color: var(--stone);
}

.login {
	display: flex;
	gap: 0.5rem;
}

.login input[type="password"] {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--rule);
	background: var(--paper-deep);
	color: var(--ink);
}

.login input[type="password"]:focus {
	outline: 2px solid var(--meadow);
	outline-offset: 1px;
}

.login input[type="submit"] {
	font: inherit;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	cursor: pointer;
}

.login input[type="submit"]:hover { background: var(--stone); border-color: var(--stone); }

.error {
	margin: 0.9rem 0 0;
	color: var(--cloth);
	font-size: 0.92rem;
}

/* ---- admin ---- */

.adminbar {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-size: 0.87rem;
	color: var(--stone);
	border-top: 1px solid var(--rule);
	margin-top: 3rem;
	padding-top: 1rem;
}

.hidden-mark {
	display: inline-block;
	font-size: 0.78rem;
	color: var(--cloth);
	border: 1px solid var(--cloth);
	padding: 0.05rem 0.4rem;
	margin-left: 0.5rem;
}

.cell.is-hidden { opacity: 0.4; }
.cell.is-hidden:hover { opacity: 0.75; }