/* Leaven website styles - updated 3 Nov 2026 */
/* =====================================================================
   Leaven website - styles
   Rebuilt from the Cargo site (Oct 2026). Sizes are in rem; 1rem scales
   with the window the same way Cargo's did (set in boot.js).
   ===================================================================== */

/* ---- Design tokens: change these to restyle the whole site ---- */
:root {
	color-scheme: light;
	--ink: #3F5124;                         /* main text colour (olive) */
	--ink-75: rgba(63, 81, 36, 0.75);       /* captions */
	--ink-30: rgba(63, 81, 36, 0.3);        /* lines */
	--paper: #ffffff;                       /* page background */
	--frost: rgba(255, 255, 255, 0.55);     /* frosted panels */
	--splash-frost: rgba(255, 255, 255, 0.55); /* opening splash */
	--link-hover: #8CC63F;                  /* lime: links on rollover (and on tap on phones), and the cursor over links */
	--frost-blur: 24px;

	--font: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-width: 95;                       /* Instrument Sans width axis: 75 (narrow) - 100 (normal) */
	--w-text: 600;                          /* main text weight (Cargo: Monument Grotesk 500) */
	--w-caption: 450;                       /* small captions (Cargo: 400) */
	--w-caption-indented: 470;              /* indented captions (Cargo: 420) */

	--base-size: 16px;                      /* replaced by boot.js */
	--viewport-height: 100vh;               /* replaced by boot.js */
	--mobile-scale: 1.4;                    /* phone text is 140% */
	--mobile-padding-offset: 0.8;           /* phone padding is 80% */
	--pin-top: 3rem;                        /* header height, measured by site.js */
	--pin-bottom: 12rem;                    /* footer height, measured by site.js */
}

/* ---- Green splash (30 Oct 2026) ----
   While the opening splash shows, the page behind it turns the splash mark's green,
   so the splash reads as a pale green. As the splash dissolves, the page fades back to white.
   (boot.js adds "splash-on"; site.js removes it when the splash dissolves.) */
html.splash-on { --paper: #6A8443; }    /* the splash mark's green, as it shows on screen */
html, body { transition: background-color 2000ms ease; }

html {
	font-size: var(--base-size);
	background: var(--paper);
	touch-action: manipulation;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}
html.mobile { font-size: calc(var(--base-size) * var(--mobile-scale)); }

body {
	margin: 0;
	padding: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: var(--viewport-height);
}

/* desktop-only / phone-only pieces */
html:not(.mobile) .mobile-only,
html.mobile .desktop-only { display: none !important; }

/* ---- Text styles (Cargo "Bodycopy", "Caption", "Caption Indented", "Work Title") ---- */
bodycopy {
	display: block;
	position: relative;
	width: 100%;
	max-width: 100%;
	font-family: var(--font);
	font-size: 1.2rem;
	font-weight: var(--w-text);
	font-variation-settings: 'wdth' var(--font-width);
	font-style: normal;
	line-height: 1.1;
	letter-spacing: 0.006em;
	color: var(--ink);
}
bodycopy a { color: var(--ink); text-decoration: none; border: 0; }

.caption {
	display: block;
	font-size: 0.75rem;
	font-weight: var(--w-caption);
	line-height: 1.1;
	letter-spacing: 0.005em;
	color: var(--ink-75);
	font-variant-numeric: tabular-nums;
}
.caption a { color: var(--ink-75); text-decoration: none; }

.caption-indented {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: var(--w-caption-indented);
	line-height: 1.1;
	letter-spacing: 0.015em;
	color: var(--ink-75);
	padding: 0.48rem 0.4rem 0.4rem 1.25rem;
	border: 0 solid var(--ink-30);
	border-left-width: 0.1rem;
}
.caption-indented a { color: var(--ink-75); text-decoration: none; }

.work-title {
	display: block;
	font-size: 1.2rem;
	font-weight: var(--w-text);
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--ink);
	padding-top: 0.45rem;
	padding-bottom: 0.45rem;
}
.work-title a { color: var(--ink); text-decoration: none; }

hr {
	background: var(--ink-30);
	border: 0;
	height: 1px;
	display: block;
	margin-top: 0.35rem;
	margin-bottom: 1rem;
}

/* Links turn lime: on rollover (mouse), and when tapped (phones - site.js adds "is-tapped") */
bodycopy a { transition: color 0.15s ease; }
@media (hover: hover) {
	bodycopy a:hover { color: var(--link-hover); }
}
bodycopy a.is-tapped,
bodycopy a:active { color: var(--link-hover); }

.linked:active,
.zoomable img:active { opacity: 0.7; }

a:focus-visible,
media-item:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

/* ---- Page frame (same structure as Cargo: page > page-layout > page-content > bodycopy) ---- */
.content { position: relative; }

.page {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}
.page-layout {
	display: flex;
	align-items: flex-end;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}
.page-content {
	display: flex;
	align-items: flex-start;
	align-self: stretch;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 0.8rem;
	text-align: left;
	border: 0 solid rgba(255, 255, 255, 0.2);
}
.mobile .page-content { padding: calc(0.8rem * var(--mobile-padding-offset)); }

/* pinned header / footer */
.page.fixed { position: fixed; left: 0; right: 0; }
.page.pinned-top { top: 0; z-index: 399; }
.page.pinned-bottom { bottom: 0; z-index: 398; }
.page.pinned .page-layout { align-items: flex-end; }

/* ---- Home: the photo strip ---- */
#home {
	min-height: var(--viewport-height);
	padding-top: var(--pin-top);
}
/* desktop: the page fills the window, so the strip sits on the footer
   (any spare space goes above it, under the header - like the phone layout) */
html:not(.mobile) #home {
	min-height: var(--viewport-height);
	padding-bottom: var(--pin-bottom);
}
#home .page-content,
.mobile #home .page-content { padding: 0; align-items: flex-end; }

/* --hm = height of the tallest photo; each photo is a share of it (--f) */
/* desktop: the tallest photo fills the space between the header and footer (up to 55% of the window width) */
marquee-inner { --hm: min(calc(var(--viewport-height) - var(--pin-top) - var(--pin-bottom)), 55vw); }
html.mobile marquee-inner { --hm: min(calc(var(--viewport-height) * 0.7), 150vw); }

marquee-set {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	cursor: default;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	contain: layout;
}
marquee-set .marquee-contents {
	position: relative;
	display: block;
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
marquee-inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	width: max-content;
	min-width: var(--marquee-width, 100%);
}
marquee-inner.clone { position: absolute; top: 0; }
marquee-inner media-item {
	flex: 0 0 auto;
	width: calc(var(--hm) * var(--f, 1) * var(--ar, 1));
	max-width: none;
}

/* ---- Columns (Cargo column-set: 12 columns + gutter) ---- */
column-set {
	--g: 1rem;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	position: relative;
	width: 100%;
	clear: both;
}
column-set[gutter="1.4rem"] { --g: 1.4rem; }
/* phone gutters are 80% (mobile padding offset) */
.mobile column-set { --g: calc(1rem * var(--mobile-padding-offset)); }
.mobile column-set[gutter="1.4rem"]:not([mobile-gutter]) { --g: calc(1.4rem * var(--mobile-padding-offset)); }
.mobile column-set[mobile-gutter="1rem"] { --g: calc(1rem * var(--mobile-padding-offset)); }
.mobile column-set[mobile-gutter="1.5rem"] { --g: calc(1.5rem * var(--mobile-padding-offset)); }

column-set + column-set { margin-top: var(--g); }

column-unit {
	--col: calc((100% - 11 * var(--g)) / 12);
	display: block;
	position: relative;
	box-sizing: border-box;
	flex: 1 1 0;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
column-unit:not(:last-child) { margin-right: var(--g); }
column-unit[span] { flex: 0 0 auto; }
column-unit[span]:last-child { flex-grow: 1; }
column-unit[span="1"]  { width: calc(var(--col) * 1); }
column-unit[span="2"]  { width: calc(var(--col) * 2 + var(--g) * 1); }
column-unit[span="3"]  { width: calc(var(--col) * 3 + var(--g) * 2); }
column-unit[span="4"]  { width: calc(var(--col) * 4 + var(--g) * 3); }
column-unit[span="5"]  { width: calc(var(--col) * 5 + var(--g) * 4); }
column-unit[span="6"]  { width: calc(var(--col) * 6 + var(--g) * 5); }
column-unit[span="7"]  { width: calc(var(--col) * 7 + var(--g) * 6); }
column-unit[span="8"]  { width: calc(var(--col) * 8 + var(--g) * 7); }
column-unit[span="9"]  { width: calc(var(--col) * 9 + var(--g) * 8); }
column-unit[span="10"] { width: calc(var(--col) * 10 + var(--g) * 9); }
column-unit[span="11"] { width: calc(var(--col) * 11 + var(--g) * 10); }
column-unit[span="12"] { width: 100%; }

/* phone: columns stack (unless mobile-stack="false"); empty columns are hidden */
.mobile column-set:not([mobile-stack="false"]) { flex-direction: column; align-items: flex-start; }
.mobile column-set:not([mobile-stack="false"]) > column-unit {
	width: 100%;
	flex: 0 0 auto;
	margin-right: 0;
}
.mobile column-set:not([mobile-stack="false"]) > column-unit:empty { display: none; }
.mobile column-set:not([mobile-stack="false"]) > column-unit:has(~ column-unit:not(:empty)) { margin-bottom: var(--g); }

/* ---- Photos ---- */
media-item {
	display: block;
	position: relative;
	box-sizing: border-box;
	max-width: 100%;
	line-height: 0;
}
media-item img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}
media-item > a { display: block; }
media-item.linked { cursor: pointer; }
media-item.zoomable { cursor: zoom-in; }

/* Index thumbnails: 17rem tall on desktop, full column width on phones */
media-item.thumb {
	display: inline-block;
	vertical-align: top;
	width: min(100%, calc(17rem * var(--ar, 1)));
}
.mobile media-item.thumb { width: 100%; }

/* Project galleries (rows are laid out by site.js) */
gallery-justify {
	--gutter: 0.8rem;
	display: block;
	position: relative;
	width: 100%;
}
.mobile gallery-justify { --gutter: calc(0.8rem * var(--mobile-padding-offset)); }
gallery-justify .justify-row {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--gutter);
	margin-bottom: var(--gutter);
}
gallery-justify .justify-row:last-child { margin-bottom: 0; }
gallery-justify .justify-row media-item { flex: 0 0 auto; }
/* before site.js runs: a simple wrapped grid */
gallery-justify:not(.laid-out) { display: flex; flex-wrap: wrap; gap: var(--gutter); }
gallery-justify:not(.laid-out) media-item { height: 17.05rem; width: auto; }
gallery-justify:not(.laid-out) media-item img { height: 100%; width: auto; }

/* ---- Clock ---- */
digital-clock { display: inline-block; position: relative; font-variant-numeric: tabular-nums; }

/* ---- Slide-up panels (Index, Info, projects) ---- */
.overlay-content {
	position: fixed;
	inset: 0;
	z-index: 999;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	transform: translateY(0);
	opacity: 1;
}
.overlay-content.is-opening { transform: translateY(100%); }
.overlay-content.is-animating-in { transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); }
.overlay-content.is-closing {
	transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
	transform: translateY(3%);
	opacity: 0;
	pointer-events: none;
}

.page.overlay { min-height: var(--viewport-height); }
.page.overlay .page-layout { min-height: fit-content; }
.list-panel.page { background-color: rgba(255, 255, 255, 0.01); }
.list-panel .page-layout { padding-top: 57rem; }
.project-panel .page-layout { padding-top: 42rem; }
.mobile .list-panel .page-layout { padding-top: calc(57rem * var(--mobile-padding-offset)); }
.mobile .project-panel .page-layout { padding-top: calc(42rem * var(--mobile-padding-offset)); }

.page.overlay .page-content {
	align-items: flex-start;
	border-style: solid;
	border-top-width: 0.1rem;
	background-color: var(--frost);
	-webkit-backdrop-filter: blur(var(--frost-blur));
	backdrop-filter: blur(var(--frost-blur));
	box-shadow: none;
}

/* ---- Enlarged photo view (click a project photo) ---- */
.quick-view {
	position: fixed;
	inset: 0;
	z-index: 2000;
	overflow: hidden;
	touch-action: none;
	cursor: zoom-out;
}
.quick-view-background {
	position: absolute;
	inset: 0;
	background-color: var(--paper);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.quick-view.is-open .quick-view-background { opacity: 1; }
.quick-view-img {
	position: absolute;
	left: 0;
	top: 0;
	max-width: none !important;
	transform-origin: 0 0;
	will-change: transform;
	-webkit-user-drag: none;
	user-select: none;
}
.quick-view-img.animate { transition: transform 0.33s cubic-bezier(0.4, 0, 0.22, 1), opacity 0.33s ease; }
.quick-view-nav {
	position: absolute;
	top: 50%;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(87, 87, 87, 0.35);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.25s ease;
	z-index: 2;
}
.quick-view-nav svg { display: block; width: 100%; height: 100%; }
.quick-view-nav path { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.5px; }
.quick-view-nav.prev { left: 20px; }
.quick-view-nav.next { right: 20px; }
.quick-view.show-ui .quick-view-nav { opacity: 1; }
.quick-view.touch .quick-view-nav { display: none; }

/* ---- Custom cursor (mouse only): a small hand-drawn olive blob that becomes a
        hand-drawn lime loop over links and photos (shapes are in site.js) ---- */
html.custom-cursor,
html.custom-cursor * { cursor: none !important; }
.cursor-dot {
	position: fixed;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	z-index: 2147483647;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.cursor-dot.visible { opacity: 1; }
.cursor-dot svg {
	position: absolute;
	overflow: visible;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.cursor-dot .cursor-blob { left: -11.25px; top: -11.25px; width: 22.5px; height: 22.5px; }
.cursor-dot .cursor-blob path { fill: var(--ink); stroke: rgba(255, 255, 255, 0.6); stroke-width: 0.8px; paint-order: stroke; }
.cursor-dot .cursor-loop { left: -20px; top: -20px; width: 40px; height: 40px; opacity: 0; transform: rotate(var(--turn, 0deg)) scale(0.5); }
.cursor-dot .cursor-loop path { fill: none; stroke: var(--link-hover); stroke-width: 2px; stroke-linecap: round; }
.cursor-dot.hot .cursor-blob { opacity: 0; transform: scale(0.4); }
.cursor-dot.hot .cursor-loop { opacity: 1; transform: rotate(var(--turn, 0deg)) scale(1); }
.cursor-dot.down .cursor-blob { transform: scale(0.75); }
.cursor-dot.hot.down .cursor-loop { transform: rotate(var(--turn, 0deg)) scale(0.85); }

/* ---- Opening splash: the Leaven mark, dissolves into the site ---- */
#leaven-splash {
	position: fixed;
	inset: 0;
	z-index: 2147483647;
	background: var(--splash-frost);
	-webkit-backdrop-filter: blur(var(--frost-blur));
	backdrop-filter: blur(var(--frost-blur));
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 1;
	transition: opacity 2000ms ease;
	will-change: opacity; /* prepared from the start, so nothing flashes when the dissolve begins */
}
#leaven-splash img {
	display: block;
	width: min(80vw, 110vh);
	height: auto;
	max-width: none;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	filter: blur(0);      /* start with a (zero) blur so the browser doesn't have to set one up mid-click */
	will-change: filter;
	transition: filter 2000ms ease;
}
#leaven-splash.dissolve { opacity: 0; }
#leaven-splash.dissolve img { filter: blur(8px); }

@media (prefers-reduced-motion: reduce) {
	.overlay-content.is-animating-in,
	.overlay-content.is-closing,
	.quick-view-img.animate { transition-duration: 0.01s; }
}