/*
	 kathryn thomas hastings
	 designer, engineer, and strategist
	 hastings.work
	
	 global.css 
*/

/* IMPORTS --------------------------------------------------------------- */

@import url('reset.css');
@import url('https://use.typekit.net/tzz8sof.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


/* CUSTOM PROPERTIES ----------------------------------------------------- */

:root {
	/* colors */
	--bgColour: #fffaec;
	--bgColour: rgb(250,250,250);
	--textColour: #171717;
	--textColour: #000;
	--linkColour: #171717;
	--deactivatedColour: #dcdcdc;

	/* typography - base */
	--base-font-family: neue-haas-unica, helvetica, sans-serif;
	--base-font-weight: 400;
	--base-font-style: normal;
	--base-line-height: 01.5;
	--base-font-size: 01.6rem;
	--base-letter-spacing: 00.03em;
}



/* UTILITY CLASSES ------------------------------------------------------- */

.frontload {
	position: absolute;
	top: 00;
	left: -9999px;
	display: none;
}

/* BASE ELEMENTS --------------------------------------------------------- */

html {
	width: 100vw;
	height: 100vh;
	margin: 00;
	font-size: 10px;
	scroll-behavior: smooth;
}

body {
	background: var(--bgColour);
	font-family: var(--base-font-family), sans-serif;
	font-style: var(--base-font-style);
	font-weight: var(--base-font-weight);
	font-size: var(--base-font-size);
	line-height: var(--base-line-height);
	letter-spacing: var(--base-letter-spacing);
	color: var(--textColour);
	font-optical-sizing: auto;
	text-transform: lowercase;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

#page {
	width: 92.8vw;
	padding: 03.6vw;
}

h1 {
	font-size: 21.6rem;
	font-size: 16.2rem;
	line-height: 01.4;
	line-height: 01.2;
	line-height: 01;
	letter-spacing: -00.05em;
	text-transform: uppercase;
	white-space: nowrap;
	font-weight: 300;
}

p { 
	margin-bottom: 02.4rem;
}

img { 
	max-width: 100%;
}


/* LINKS ----------------------------------------------------------------- */

a, 
a:visited {
	position: relative;
	padding-bottom: 00;
	display: inline-block;
	background-image: linear-gradient(rgba(23, 23, 23, 1) 00 00);
	background-position: 00 100%;
	background-size: 00% 01px;
	background-repeat: no-repeat;
	transition: background-size 0.3s, background-position 0s 0.3s;
	color: var(--linkColour);
	text-decoration: none;
}

a:active, 
a:hover {
	background-position: 100% 100%;
	background-size: 100% 01px;
}


/* BUTTONS --------------------------------------------------------------- */


/* ANIMATIONS & TRANSITIONS ---------------------------------------------- */


/* LAYOUT - GRID SYSTEM (DEBUG) ------------------------------------------ */


/* LAYOUT - CONTAINER ---------------------------------------------------- */

/* header */
header { 
	width: 100%;
	margin-bottom: 03.6rem;
	display: flex;
	justify-content: space-between;
}


#logo img { 
	max-height: 36px;
}

/* main */
main { 
	width: 100%;
}

main #head {
	padding: 00 00 07.2rem 00;
	text-align: center;
}

/* Only pages with a real, visible heading (Paris/LA/Analog/Digital) —
   not index/travel/paintings/about, whose h1 is the hidden .frontload
   placeholder and should keep collapsing to just the padding above.
   h1 fills its container's width regardless of word length
   (assets/js/fit-heading.js), capped at 27vh — so a short title
   ("Paris") renders far taller than a long one ("Los Angeles"), which
   used to shift where the content below started, page to page.
   Reserving space for the tallest possible case up front and
   centering within it keeps that starting point constant. */
main #head:has(h1:not(.frontload)) {
	min-height: calc(27vh + 01.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

main #head p { 
	margin-bottom: -00.9rem;
}

#about main > div {
	width: 72%;
	gap: 04.8vw;
	font-size: 02.4rem;
	line-height: 01.5;
	letter-spacing: -00.05em;
}

#about main > div div:first-child { 
	width: 40%;
}

#about main > div div:last-child { 
	width: 60%;
}

/* main - typography */
/* main - error pages */

/* blockquote */
blockquote { 
	width: 72%;
	display: block;
	clear: both !important;
}

blockquote:before { 
	content: ' ';
	width: 04.5rem;
	padding-bottom: 01.8rem;
	display: block;
	border-top: 01px solid var(--textColour);
	
}

blockquote > * { 
	display:inline;
}

blockquote p {
	margin-left: -00.6rem;
}

blockquote p:before {
	content: '\201C';
}

blockquote p:after {
	content: '\201D';
}

blockquote footer { }

blockquote footer cite { 
	font-style: normal;
}

blockquote footer cite:before { 
	content: '\2014';
}

blockquote footer cite a { }

main > blockquote { 
	margin-top: 14.4rem;
}


/* text list */

.text-list {
	width: 100%;
	/* Fluid type: scales continuously with viewport width instead of
	   jumping at a breakpoint, so it never needs a new override for an
	   in-between size. Bounded 4rem (smallest phones — the largest
	   size "The Peninsula" fits at 320px without overflowing, checked
	   empirically) to 12.6rem (this file's original desktop value). */
	font-size: clamp(04rem, 00.47rem + 08.02vw, 12.6rem);
	line-height: 01;
	letter-spacing: -00.05em;
	text-transform: uppercase;
}

.text-list li {
	/* em, not rem, so spacing stays proportional to the fluid
	   font-size above without its own breakpoint. */
	margin-right: 00.29em;
	display: inline-block;
	color: var(--deactivatedColour);
	white-space: nowrap;
}

.text-list.vertical li { 
	display: block;
}

.text-list li a {
	color: var(--textColour);
	/* Specified here (not just inherited from .text-list) so it
	   recomputes correctly when assets/js/fit-text-list.js scales an
	   individual link's font-size on mobile — an inherited value would
	   stay fixed at .text-list's own font-size instead. */
	letter-spacing: -00.05em;
}

/* Placeholder destinations (href="#" or no href yet) don't get the
   hover underline — only real, working links do. */
.text-list li a:not([href]):hover,
.text-list li a[href="#"]:hover {
	background-size: 00% 01px;
}

/* Text and its underline flip to white while its own bg image is
   showing, so black text doesn't sit unreadable on top of a photo. */
.text-list li a[data-bg]:hover {
	color: #fff;
	background-image: linear-gradient(rgba(255, 255, 255, 1) 00 00);
}

/* ...except on Paintings — Analog/Digital's bg images are too light
   for white text to stay legible, so keep the default dark text there. */
#paintings .text-list li a[data-bg]:hover {
	color: var(--textColour);
	background-image: linear-gradient(rgba(23, 23, 23, 1) 00 00);
}

/* Single shared reveal panel for every [data-bg] link (Paris, LA,
   Analog, Digital, and any future one) — assets/js/hover-bg.js sets
   these custom properties from each link's data-bg/data-width/
   data-height/data-top/data-right/data-bottom/data-left attributes on
   hover, instead of a bespoke div + CSS block per destination.

   Two stacked layers, not one, so switching between two links
   cross-fades the photos themselves — a plain CSS transition can't
   interpolate between two background-image values, so a single layer
   would just swap the image abruptly underneath the opacity fade. */
#hover-reveal {
	width: var(--hover-bg-width, 100%);
	height: var(--hover-bg-height, 100%);
	position: fixed;
	z-index: -9;
	top: var(--hover-bg-top, 00);
	right: var(--hover-bg-right, auto);
	bottom: var(--hover-bg-bottom, auto);
	left: var(--hover-bg-left, 00);
	isolation: isolate;
	pointer-events: none;
}

.hover-reveal-layer {
	position: absolute;
	inset: 00;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 00;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-reveal-layer.visible {
	opacity: 00.93;
}

/* gallery */
.gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 04rem;
	/* margin-bottom: 07.2rem; */
}

.gallery-item {
	flex-grow: 1;
	height: 40rem;
	margin: 00;
}

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

/* paintings gallery — column-count is the no-JS fallback (it has a
   known Chrome/Safari inconsistency in how columns balance, which is
   why assets/js/paintings-masonry.js replaces it with an explicitly
   computed layout once it runs, wrapping items in .paintings-gallery-column) */
.paintings-gallery {
	column-count: 3;
	column-gap: 04rem;
}

.paintings-gallery-column {
	flex: 1;
	min-width: 00;
}

.paintings-gallery-item {
	margin: 00 00 04rem;
	break-inside: avoid;
}

.paintings-gallery-item img {
	width: 100%;
	display: block;
	border: 01px solid #f1f1f1;
	box-sizing: border-box;
}

.paintings-gallery-item figcaption {
	margin-top: 00.8rem;
	font-size: 01.4rem;
	line-height: 01.4;
	color: #999;
}

/* footer */
#page > footer {
	width: 100%;
	padding: 23.4rem 00 00 00;
	padding: 10.8rem 00 00 00;
	padding: 04.8rem 00 00 00;
	font-weight: 300;
	/* text-align: center; */
}

#page > footer > p { 
	/* width: 45%; */
	margin: 00 auto;
	line-height: 01.3;
}


/* NAVIGATION ------------------------------------------------------------ */

header nav > ul {
	display: flex;
	gap: 01.5rem;
	text-align: right;
	list-style: none;
}

header nav > ul:before { 
	content: '/';
	margin-right: 00.9rem;
}


/* LOG PAGE -------------------------------------------------------------- */

/* search */
/* logs table */


/* MEDIA QUERIES --------------------------------------------------------- */

/* mobile — the only breakpoint actually in use */
@media (max-width: 767px) {

	/* head / text-list -------------------------------------------------- */

	/* Hover isn't a meaningful interaction on touch screens, so the
	   reveal panel and its listeners (assets/js/hover-bg.js) are both
	   switched off below this breakpoint. Placeholder (href="#") links
	   go back to a visually disabled state at the same point rather
	   than looking like live links with nothing behind them. */
	#hover-reveal {
		display: none;
	}

	/* assets/js/fit-heading.js skips mobile entirely — plain fixed
	   size here instead, so every heading matches regardless of word
	   length. Checked safe against "Los Angeles" (the longest one) at
	   320px before it starts overflowing. */
	main #head {
		padding: 00 00 03.6rem 00;
		text-align: left;
	}

	main #head:has(h1:not(.frontload)) {
		min-height: auto;
		display: block;
	}

	main #head p {
		margin: 00 00 00 00.4rem;
	}

	h1 {
		font-size: 05rem;
	}

	.text-list li a[href="#"] {
		color: var(--deactivatedColour);
		pointer-events: none;
	}

	/* Same hide technique as .frontload (assets/css/global.css's h1
	   placeholders), but scoped to mobile only — .frontload itself is
	   unconditional (used elsewhere for text that should never show,
	   at any width), so it can't be reused directly here without also
	   hiding "The " on desktop. */
	.frontload-mobile {
		position: absolute;
		top: 00;
		left: -9999px;
		display: none;
	}

	/* Roomier line-height widens the tap target between wrapped rows
	   (the link's own box grows with it, since it inherits line-height
	   from here) — desktop's tight line-height stays as-is.

	   EDIT font-size HERE to resize mobile text-list items. Checked
	   safe up to ~41px against "The Peninsula" (the longest item) at
	   a 320px-wide screen (the smallest common phone) before it starts
	   overflowing — go higher only after re-checking at a narrow
	   width. */
	.text-list {
		font-size: 04rem;
		font-size: 05.4rem;
		line-height: 01;
	}
	.text-list li {
		margin-right: 00.29em;
		margin-right: 00.12em;
		/* Desktop keeps every item on one line (.text-list li's base
		   white-space: nowrap) — on mobile that's what forces the
		   whole shared font-size down to fit "The Peninsula" on a
		   single line. Letting multi-word items break lets the
		   font-size go larger without that one phrase capping it. */
		white-space: normal;
	}

	/* Only .vertical lists (index, paintings) stack one item per row
	   on mobile — travel keeps wrapping multiple items per row (its
	   normal, non-mobile behavior), which copes with a larger shared
	   font-size far better: short items ("Keys", "NYC") share a row
	   instead of each claiming a full-width row on its own, and only
	   genuinely long phrases ("The Peninsula") need to fall to their
	   own row. */
	.text-list.vertical li {
		/* Vestigial once stacked — margin-right only made sense when
		   items sat side by side, and (since this li has no explicit
		   width) was otherwise silently shrinking its own available
		   width, understating how much room items actually had. */
		margin-right: 00;
	}

	/* The white text/underline swap only makes sense while its photo
	   is actually showing behind it (desktop hover) — with the reveal
	   panel switched off above, it just left white text sitting on
	   the page background. Match the non-hover text colour instead. */
	.text-list li a[data-bg]:hover {
		color: var(--textColour);
		background-image: linear-gradient(rgba(23, 23, 23, 1) 00 00);
	}

	/* These were sized for a wide desktop column; span full width on
	   narrow viewports instead of leaving them cramped into 72%. */
	blockquote,
	#about main > div {
		width: 100%;
	}

	/* Blockquote doesn't override any of these — it just renders at
	   body's base type styles. Matching that here, exactly. */
	#about main > div {
		font-size: var(--base-font-size);
		line-height: var(--base-line-height);
		letter-spacing: var(--base-letter-spacing);
	}

	main > blockquote {
		margin-top: 09.6rem;
		margin-top: 14.4rem;
	}

	/* gallery ------------------------------------------------------------ */

	.gallery {
		gap: 01.6rem;
	}

	.gallery-item {
		height: 25rem;
	}

	/* paintings gallery --------------------------------------------------- */

	.paintings-gallery {
		column-count: 2;
		column-gap: 01.6rem;
	}

	.paintings-gallery-item {
		margin-bottom: 01.6rem;
	}
}

/* tablets */
@media (min-width: 768px) {}

/* desktop */
@media (min-width: 1024px) {}

/* large screens */
@media (min-width: 1200px) {}

@media (min-width: 1440px) {}

/* extra large screens */
@media (min-width: 1920px) {}


/* */