html,body,table#fullHeight {
height:100%;
} 

body {
	background-color: #FFFFFF;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	height: 100%;
	background-image: url(../images/common/pagebg.gif);
	background-repeat: no-repeat;
}

a:link { COLOR: #97ABB2; text-decoration:underline; }
a:visited { COLOR: #97ABB2; text-decoration:underline; }
a:active {  color: #97ABB2}
a:hover { COLOR: #171F29 ; text-decoration:underline;  }

a.HREFnoDec:link { COLOR: #8499A0; text-decoration:none; }
a.HREFnoDec:visited { COLOR: #8499A0; text-decoration:none; }
a.HREFnoDec:active {  color: #8499A0}
a.HREFnoDec:hover { COLOR: #171F29 ; text-decoration:underline;  }

/* Shared sizes and spacing, in one place for tuning. */
:root {
	/* All running text: nav, timeline, captions, statements, bio. */
	--text-size: 14px;
	/* Page and collection titles: 36px, or smaller on narrow phones so the
	   longest single word, "MISCELLANEOUS", fits between the insets. The
	   logo is sized from this too. */
	--title-size: min(36px, calc((100vw - 40px) / 10));
	/* The left edge shared by the logo's lettering, the nav and the page
	   title; the nav's right edge mirrors it on wide screens. */
	--inset: 20px;
	--timeline-node-size: 10px;
	/* Narrowest a timeline column may get. On narrow screens the timeline
	   scrolls sideways; on wide ones the columns share out the width. */
	--timeline-column: 96px;
	/* Bio page date column: fits "2003-present" at --text-size. */
	--bio-date-column: 88px;
}
/* Wider than a phone: the collection number hangs to the left of the title,
   and everything below the title lines up with the title's words. */
@media (min-width: 760px) {
	:root {
		--inset: 30px;
		/* Room for "C17" in the title font plus a gap before the title. */
		--number-column: 88px;
	}
}
@media (min-width: 1024px) {
	:root {
		/* 17 columns plus the shorter end column fit a 1440px window. */
		--timeline-column: 80px;
	}
}

/* Show text at the sizes set here. Otherwise iPhone Safari enlarges text by
   its own rules on pages wider than the screen. */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Nothing may be drawn wider than the space it's in. height: auto keeps the
   proportions when an image is narrowed. (PhotoSwipe's own CSS exempts the
   lightbox's images.) */
img {
	max-width: 100%;
	height: auto;
}

/* Hidden on screen but still read by search engines and screen readers. */
.visuallyHidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Site header (base.njk) ---- */
/* Logo left, nav right, the nav's text sitting on the logo's bottom edge
   (an image's baseline is its bottom). On screens too narrow for both, the
   nav drops below the logo. */
.siteHeader {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 24px;
	row-gap: 14px;
	padding: 19px var(--inset) 24px;
}
.siteLogo {
	display: block;
}
/* logo.png is subLogo.gif cropped to its lettering. Its letters are 24px
   tall in a 32px image; this height makes them match the title's capitals
   (0.728 of --title-size in the title font). */
.siteLogo img {
	display: block;
	width: auto;
	height: calc(var(--title-size) * 0.97);
}
.siteNav {
	display: flex;
	gap: 0.55em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--text-size);
	color: #8499A0;
}
.siteNav a:link,
.siteNav a:visited {
	color: #8499A0;
	text-decoration: none;
}
.siteNav a:hover {
	color: #171F29;
	text-decoration: underline;
}

/* ---- Timeline (base.njk) ----
   Three bands, as on the original: labels (years/places, white on blue),
   nodes (squares on pale blue), collection numbers (links on white). Each
   column is one collection; each band is drawn per column, so the bands
   line up and run the full width. Everything is centred on its column, so
   a long label like WASHINGTON overhangs evenly into the space either side
   rather than running into the next label. */
.timelineWrap {
	position: relative;
}
/* Fades at either edge while there's more timeline to scroll to that way;
   the script in base.njk adds .hasMore (right) and .hasLess (left). */
.timelineWrap::before,
.timelineWrap::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	width: 28px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
}
.timelineWrap::before {
	left: 0;
	background: linear-gradient(to left, rgba(255, 255, 255, 0), #FFF);
}
.timelineWrap::after {
	right: 0;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFF);
}
.timelineWrap.hasLess::before,
.timelineWrap.hasMore::after {
	opacity: 1;
}
.timeline {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--text-size);
}
.timelineTrack {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.timelineColumn {
	flex: 1 0 var(--timeline-column);
}
/* The end column only carries the ITALY label, so it can be narrower. */
.timelineColumn--end {
	flex: 0.7 0 calc(var(--timeline-column) * 0.7);
}
.timelineLabel {
	display: flex;
	justify-content: center;
	height: 1.6em;
	line-height: 1.6;
	white-space: nowrap;
	color: #FFF;
	background: #C9D8DD;
}
/* Drawn above every column's background, so a label overhanging into the
   next column isn't painted over by that column's band. */
.timelineLabel > span {
	position: relative;
	z-index: 1;
}
/* The whole node-and-number area is the link, for a large tap target. */
.timelineLink {
	display: block;
	padding-bottom: 10px;
	line-height: 1.6;
	text-align: center;
}
.timelineLink:link,
.timelineLink:visited {
	color: #97ABB2;
}
.timelineLink:hover {
	color: #171F29;
}
/* The node band, with the square drawn in CSS (was subNavNode.gif). */
.timelineNode {
	display: block;
	padding: 4px 0;
	background: #EBF0F1;
}
.timelineNode::before {
	content: "";
	display: block;
	width: var(--timeline-node-size);
	height: var(--timeline-node-size);
	margin: 0 auto;
	background: #97ABB2;
}
/* The end column has the band but no collection, so no square. */
.timelineNode--empty::before {
	visibility: hidden;
}
/* Hover swaps the square to dark, as the original's subNavNodeOn.gif did. */
.timelineLink:hover .timelineNode::before {
	background: #171F29;
}

/* ---- Page title and body ---- */
/* Page and collection titles were previously GIF/JPG graphics (titleBio.gif,
   titleTextC*.gif). They are now real text so new collections can be added
   without making an image. Colour #c6d5da and 26px cap height sampled from
   the originals. Exact typeface still needs Scott's eye. On phones,
   everything starts at --inset. Wider, a collection's number hangs to the
   left in --number-column, so the title's words and everything below line
   up; titles without a number line up there too. */
/* 28px below the title gives the same 39px from its baseline to the first
   line of text as the live site's table layout had. */
.pageTitle {
	margin: 10px 0 28px;
	padding: 0 var(--inset);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: var(--title-size);
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #c6d5da;
}
.pageTitleNumber {
	margin-right: 0.35em;
}
.pageBody {
	padding: 0 var(--inset) 60px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--text-size);
	color: #8499A0;
}
@media (min-width: 760px) {
	.pageTitle,
	.pageBody {
		padding-left: calc(var(--inset) + var(--number-column));
	}
	.pageTitleNumber {
		display: inline-block;
		width: var(--number-column);
		margin-left: calc(-1 * var(--number-column));
		margin-right: 0;
	}
}
.bodyText {
	margin: 0 0 1em;
	line-height: 1.5;
}

/* ---- Bio page (bio.html) ---- */
/* Kept to a readable line length on wide screens, as the original's 660px
   tables were. */
.bioPage > * {
	max-width: 660px;
}
.bioHeading {
	margin: 28px 0 14px;
	font-size: var(--text-size);
	font-weight: bold;
}
/* Each entry: the date right-aligned in a fixed column, so every section
   lines up, and the entry wrapping beside it. The column fits the longest
   dates (e.g. "2003-present"). */
.bioList {
	margin: 0;
}
.bioEntry {
	display: grid;
	grid-template-columns: var(--bio-date-column) minmax(0, 1fr);
	column-gap: 14px;
	line-height: 1.4;
}
.bioEntry + .bioEntry {
	margin-top: 10px;
}
.bioEntry dt {
	text-align: right;
}
/* overflow-wrap: break a "word" too long for the column, such as
   "(English/Arabic/French/German.)" on a small phone, rather than let it
   run off the screen. */
.bioEntry dd {
	margin: 0;
	overflow-wrap: break-word;
}

/* ---- Collections index (collections.html) ---- */
/* One full-width box per collection. Wider screens: name, location and
   venue on the left, the summary in the middle, VIEW at the bottom right.
   Phones: the same, stacked, with VIEW still at the right. */
.collectionList {
	margin: 0;
	padding: 0;
	list-style: none;
}
.collectionCard {
	display: grid;
	gap: 4px 32px;
	padding: 14px 18px;
	background: #ECF0F1;
	line-height: 1.4;
}
.collectionCard + .collectionCard {
	margin-top: 16px;
}
.collectionCard p {
	margin: 0;
}
.collectionCardNumber {
	padding-bottom: 4px;
}
.collectionCardNumber img {
	margin-right: 6px;
	vertical-align: -2px;
}
.collectionCardView {
	justify-self: end;
	align-self: end;
}
@media (min-width: 760px) {
	.collectionCard {
		grid-template-columns: minmax(240px, 1fr) 2fr auto;
	}
	.collectionCardName {
		grid-column: 1;
	}
	.collectionCardSummary {
		grid-column: 2;
	}
	.collectionCardView {
		grid-column: 3;
		grid-row: 1;
	}
}

/* ---- Collection page (collection.njk) ---- */
/* One artwork per row: thumbnail, caption beside it on wider screens; on
   phones the thumbnail is the full width with the caption below. No rules
   between artworks and only modest gaps, per Scott: the original
   stylesheet's 26px cell padding and bottom borders were dormant on the old
   live site (its stylesheet link was broken), and he preferred it that way
   when restoring the stylesheet revealed them. */
.artworkGallery {
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}
.artwork + .artwork {
	margin-top: 32px;
}
.artworkCaption {
	margin: 10px 0 0;
	line-height: 1.4;
}
@media (min-width: 760px) {
	.artwork {
		display: flex;
		align-items: center;
		gap: 56px;
	}
	.artwork + .artwork {
		margin-top: 40px;
	}
	.artworkCaption {
		margin: 0;
	}
}

/* PhotoSwipe lightbox caption bar. Always 3 text lines (title/medium/year) --
   at this font-size/line-height/padding that's ~83px, plus one line of
   buffer for a title that wraps, rounded to 104px. Must match CAPTION_HEIGHT
   in lightbox.js. pointer-events:none keeps it from stealing image clicks. */
.pswp__custom-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	min-height: 104px;
	box-sizing: border-box;
	padding: 12px 16px;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	pointer-events: none;
}
.pswp__custom-caption em {
	font-style: italic;
}

/* Re-center image/arrows on the space above the caption bar: half of
   (CAPTION_HEIGHT + EDGE_GAP) minus half of EDGE_GAP, from lightbox.js. */
.pswp__button--arrow {
	top: calc(50% - 52px);
}

/* While the lightbox opens, show its background at full darkness straight
   away rather than fading in, so iPhone Safari fills the strips behind its
   status bar and tab bar to match -- see lightbox.js. !important is needed to
   override the inline opacity PhotoSwipe animates. 0.9 must match bgOpacity
   in lightbox.js. The root rule covers PhotoSwipe's other opening style,
   used when it can't zoom from a thumbnail, which fades the whole lightbox. */
.pswp.pswp--opening {
	opacity: 1 !important;
}
.pswp--opening .pswp__bg {
	opacity: 0.9 !important;
}

/* Page was pinch-zoomed when the lightbox opened (see lightbox.js, which sets
   --page-zoom). The controls would be magnified along with the page, so draw
   them at 1/zoom size, each made zoom-times wider first so it still spans the
   full width once shrunk. */
.pswp--page-zoomed .pswp__top-bar,
.pswp--page-zoomed .pswp__custom-caption {
	width: calc(100% * var(--page-zoom));
	transform: scale(calc(1 / var(--page-zoom)));
}
.pswp--page-zoomed .pswp__top-bar {
	transform-origin: 0 0;
}
.pswp--page-zoomed .pswp__custom-caption {
	transform-origin: 0 100%;
}
.pswp--page-zoomed .pswp__button--arrow {
	top: calc(50% - 52px / var(--page-zoom));
	transform: scale(calc(1 / var(--page-zoom)));
}
.pswp--page-zoomed .pswp__button--arrow--prev {
	transform-origin: 0 50%;
}
.pswp--page-zoomed .pswp__button--arrow--next {
	transform-origin: 100% 50%;
}

/* Thumbnail width: the full content width on phones, 300px wider. These
   must match the sizes attribute in the thumbnailImage shortcode
   (eleventy.config.js), which tells the browser which file to download. The
   <img> carries the largest file's width and height for its proportions, so
   without a CSS width it would draw at that size. */
.artworkThumb {
	border: 0;
	display: block;
	width: 100%;
}
@media (min-width: 760px) {
	.artworkThumb {
		width: 300px;
	}
}

/* ---- Homepage (index.html) ---- */
/* The featured painting (featuredArtwork shortcode, eleventy.config.js) is
   as wide as the window, unless that would make it too tall to fit on
   screen with the header and caption; then it's as tall as fits, and
   centred. --feature-ratio (width / height) is written by the shortcode.
   --home-chrome is the room to leave for the header and caption, plus about
   72px of space below the caption. svh is the screen height with phone
   toolbars showing. */
.homeFeature {
	--home-chrome: 184px;
	--feature-width: min(100vw, calc((100vh - var(--home-chrome)) * var(--feature-ratio)));
	width: var(--feature-width);
	margin: 0 auto;
}
@supports (height: 100svh) {
	.homeFeature {
		--feature-width: min(100vw, calc((100svh - var(--home-chrome)) * var(--feature-ratio)));
	}
}
.heroImage {
	display: block;
	width: 100%;
}
/* Caption on the left, VIEW link on the right, level with the caption's
   first line, lined up with the painting's edges -- or, when the painting is
   the full width, at the shared inset. */
.homeCaption {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 10px max(0px, calc(var(--inset) - (100vw - var(--feature-width)) / 2)) 24px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--text-size);
	line-height: 1.4;
	color: #8499A0;
}
.homeCaption img {
	vertical-align: baseline;
}
/* The title in italics, as on the collection pages. On phones the caption
   is three lines (title, medium and dimensions, year), also as on the
   collection pages; wider, it's one line with commas between the parts. */
.homeCaptionText > span {
	display: block;
}
.homeCaptionTitle {
	font-style: italic;
}
@media (min-width: 760px) {
	.homeCaptionText > span {
		display: inline;
	}
	/* Just the comma: the line break between the parts in index.html
	   already shows as a space. */
	.homeCaptionText > span:not(:last-child)::after {
		content: ",";
	}
}