/* evening—light — the whole site's styles.
   Sizes copy the old Cargo site's model; CLAUDE.md explains it. */

/* ---- Font: Hanken Grotesk (OFL; licence in /fonts/OFL-hanken-grotesk.txt) ---- */

@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-grotesk-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: block; }

/* ---- Sizing ----
   1rem is Cargo's base size: min(width, height) × 1.44% on a landscape screen,
   growing to width × 2.24% as the screen turns portrait. Phones add × 1.32. */

:root {
	--fallback: system-ui, -apple-system, "Helvetica Neue", Arial, "Hiragino Sans", sans-serif;
	--font: "Hanken Grotesk", var(--fallback);
	--pad: 4rem;      /* page padding; a quarter of that on phones */
	--line: 1.68rem;  /* one line of body text, the old site's spacing unit */

	font-size: min(1.44vh, 2.24vw, calc(0.4114vw + 1.0286vh));
	font-size: min(1.44lvh, 2.24vw, calc(0.4114vw + 1.0286lvh));
}

/* Phone held sideways (Cargo's rule: wider than 2:3 and at most 500 px tall) */
@media (min-aspect-ratio: 2/3) and (max-height: 500px) {
	:root { font-size: calc(1.32 * min(2.88lvh, 2.88vw)); }
}

/* Phone held upright, or any window narrower than 4:5 */
@media (max-aspect-ratio: 4/5) {
	:root { font-size: calc(1.32 * min(2.24vw, calc(0.4114vw + 1.0286lvh))); }
}

/* ---- Colours ----
   Every colour on the site is one of these. Light by default; the block below
   swaps them when the device's appearance is set to Dark (or Automatic, after sunset). */

:root {
	color-scheme: light;
	--bg: #fff;
	--ink-85: rgba(0, 0, 0, 0.85);   /* headings, captions, icons, borders */
	--ink-60: rgba(0, 0, 0, 0.6);    /* body text, rules */
	/* fine grain on the welcome note: dark specks */
	--grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0 0 0 -.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	/* photo placeholders: grey card, white frame, grey diagonal */
	--placeholder-card: #efeeec;
	--placeholder-frame: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><rect width='100' height='100' fill='white' stroke='%23c8c8c8' stroke-width='2' vector-effect='non-scaling-stroke'/><line x1='0' y1='0' x2='100' y2='100' stroke='%23c8c8c8' vector-effect='non-scaling-stroke'/></svg>");
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--bg: #111;
		--ink-85: rgba(255, 255, 255, 0.85);
		--ink-60: rgba(255, 255, 255, 0.6);
		/* light specks */
		--grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .4 0 0 0 -.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
		/* lighter card, page-coloured frame */
		--placeholder-card: #212121;
		--placeholder-frame: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><rect width='100' height='100' fill='%23111' stroke='%23484848' stroke-width='2' vector-effect='non-scaling-stroke'/><line x1='0' y1='0' x2='100' y2='100' stroke='%23484848' vector-effect='non-scaling-stroke'/></svg>");
	}
}

/* ---- Text ---- */

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

html {
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink-60);
	font-family: var(--font);
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p, ul, figure, h1 { margin: 0; }

a { color: inherit; }
a:active, .zoomable img:active { opacity: 0.7; }

hr {
	border: 0;
	height: 1px;
	background: var(--ink-60);
	margin: 0.5rem 0;
}

h1 {
	font-size: 4.2rem;
	font-weight: 420;
	line-height: 1;
	color: var(--ink-85);
}

.caption {
	display: block;
	font-size: 1rem;
	font-weight: 500;
	color: var(--ink-85);
}

.caption a, a.caption { color: var(--ink-85); text-decoration: none; }

ul { padding-left: 2em; }

/* ---- Icons (drawn for this site, coloured like caption text) ---- */

.icon {
	display: inline-block;
	background: var(--ink-85);
	-webkit-mask: var(--shape) center / contain no-repeat;
	mask: var(--shape) center / contain no-repeat;
}

.arrow {
	width: 0.8em;
	height: 0.8em;
	vertical-align: -0.06em;
	--shape: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7'><path d='M2.5 13.5 13 3M4.5 3H13v8.5'/></svg>");
}

/* Four halftone squares, densest (1) to lightest (4) */
.dots {
	width: 0.88em;
	height: 0.88em;
	margin-right: 0.29em;
	vertical-align: -0.08em;
}
.dots-1 { --shape: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><pattern id='p' width='3' height='3' patternUnits='userSpaceOnUse'><rect x='.3' y='.3' width='2.4' height='2.4'/></pattern><rect width='15' height='15' fill='url(%23p)'/></svg>"); }
.dots-2 { --shape: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><pattern id='p' width='3' height='3' patternUnits='userSpaceOnUse'><rect x='.6' y='.6' width='1.8' height='1.8'/></pattern><rect width='15' height='15' fill='url(%23p)'/></svg>"); }
.dots-3 { --shape: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><pattern id='p' width='3' height='3' patternUnits='userSpaceOnUse'><rect x='.85' y='.85' width='1.3' height='1.3'/></pattern><rect width='15' height='15' fill='url(%23p)'/></svg>"); }
.dots-4 { --shape: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><pattern id='p' width='3' height='3' patternUnits='userSpaceOnUse'><rect x='1.05' y='1.05' width='.9' height='.9'/></pattern><rect width='15' height='15' fill='url(%23p)'/></svg>"); }

/* ---- Layout: a centre column with four fixed corners ---- */

.page {
	width: 60%;
	margin: 0 auto;
	padding: var(--pad);
}

.page a { text-decoration: underline; }
.page .caption a, .page a.caption { text-decoration: none; }

.corner {
	position: fixed;
	z-index: 1;
	width: 20%;
	padding: var(--pad);
}
.corner-tl { top: 0; left: 0; padding-right: 0; }
.corner-tr { top: 0; right: 0; padding-left: 0; }
.corner-bl { bottom: 0; left: 0; padding-right: 0; }
.corner-br { bottom: 0; right: 0; padding-left: 0; padding-bottom: 3rem; text-align: right; }

/* Gaps under an <hr> are padding, not margin, so the hr's own margin isn't swallowed */
.clock { padding-top: var(--line); text-align: center; }

.snowbell img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.4rem;
	margin-bottom: var(--line);
}

.mobile-only { display: none; }

/* ---- Spacing inside a page ----
   Blocks sit one blank line apart; mb-N gives N blank lines after one. */

.page p, .page ul, .page figure, .gallery, .soon { margin-bottom: var(--line); }
.page .mb-0 { margin-bottom: 0; }
.page .mb-2 { margin-bottom: calc(2 * var(--line)); }
.page .mb-3 { margin-bottom: calc(3 * var(--line)); }

.page-head {
	padding-top: var(--line);
	margin-bottom: calc(3 * var(--line));
	text-align: center;
}
.page-head h1 { margin-top: calc(2 * var(--line)); }

.soon { text-align: center; }

/* "- item" lines, indented like the old site */
.dashes { list-style: none; padding-left: 0.93em; }
.dashes li::before { content: "- "; }

.footnotes {
	list-style: none;
	padding: 2.4rem 0 1.2rem 0.95em;
}
.footnotes .n { margin-right: 0.95em; }

/* ---- Images ---- */

.media img, .media picture, .placeholder {
	display: block;
	width: 100%;
	height: auto;
}

.media figcaption { margin-top: 1rem; }

.media.scaled {
	width: 55.9%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.zoomable img { cursor: zoom-in; }

/* A photo still to come: a card, a frame and one diagonal (colours above) */
.placeholder {
	aspect-ratio: 3 / 2;
	background: var(--placeholder-card) var(--placeholder-frame) center / 86% 86% no-repeat;
}
.placeholder.tall { aspect-ratio: 2 / 3; }

.gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
	align-items: start;
}
.gallery figure { margin-bottom: 0; }
.gallery figcaption { margin-bottom: 2rem; }

/* ---- Welcome note (opens when someone arrives) ---- */

.welcome {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: grid;
	place-items: center;
	padding: 5rem 0;
	overflow-y: auto;
	-webkit-backdrop-filter: blur(0.12rem);
	backdrop-filter: blur(0.12rem);
	opacity: 0;
	transition: opacity 0.4s ease;
}
.welcome[hidden] { display: none; }
.welcome.open { opacity: 1; }

.welcome-box {
	width: calc(60% - 10rem);
	padding: 4rem;
	border: 0.2rem solid var(--ink-85);
	border-radius: 0.3rem;
	background: var(--bg) var(--grain);
	transform: scale(0.8);
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.welcome.open .welcome-box { transform: none; }
.welcome-box p { margin-bottom: var(--line); }
.welcome-box p:last-child { margin-bottom: 0; }

/* ---- Image zoom ---- */

.quick-view {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem;
	background: var(--bg);
	cursor: zoom-out;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.quick-view[hidden] { display: none; }
.quick-view.open { opacity: 1; }

.quick-view img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.quick-view button {
	position: absolute;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(87, 87, 87, 0.35);
	cursor: pointer;
	--inset: 20px;
}
.quick-view button:active { opacity: 0.7; }
.quick-view button svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: rgba(255, 255, 255, 0.9);
	stroke-width: 1.5px;
}
.quick-view .prev { left: var(--inset); top: 50%; transform: translateY(-50%); }
.quick-view .next { right: var(--inset); top: 50%; transform: translateY(-50%); }
.quick-view .close { right: var(--inset); top: var(--inset); }

@media (prefers-reduced-motion: reduce) {
	.welcome, .welcome-box, .quick-view { transition: none; }
}

/* ---- Phones (same rule as the sizing above) ---- */

@media (max-aspect-ratio: 4/5), (min-aspect-ratio: 2/3) and (max-height: 500px) {
	:root { --pad: 1rem; }

	.corner, .desktop-only { display: none; }
	.mobile-only { display: block; }

	.page { width: 100%; }
	h1 { font-size: 3.5rem; }

	.mobile-header { padding: var(--pad); }
	.mobile-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
		padding-bottom: var(--line);
	}
	.mobile-header nav { padding-bottom: var(--line); }

	.gallery { gap: 0 0.25rem; }
	.gallery.stack-on-phone { grid-template-columns: 1fr; }

	.welcome { padding: 1.25rem 0; }
	.welcome-box { width: calc(100% - 2.5rem); padding: 1rem; }

	.quick-view { padding: 10px; }
	.quick-view button { --inset: 25px; }
}