/* Variables */
:root {
--header-height: 90px; /* height of the header on mobile */
--scaling-constant: 0.2vw; /* affects font sizes and paddings */
--font-size-lg: calc(20px + var(--scaling-constant));
--font-size-default: calc(13px + var(--scaling-constant));
--font-size-sm: calc(11px + var(--scaling-constant));
--container-max-width: 900px; /* fixed, as on the original site: the page does
not grow with the window, so a row of record covers always breaks in the same
place. Was max(960px, 75%), which reflowed the galleries on wide screens. */
--menu-width: 25%; /* width of the sidebar on desktop */
--sidebar-padding-top: 60px; /* padding-top of the sidebar on desktop */
--sidebar-padding-bottom: 60px; /* padding-bottom of the sidebar on desktop */
--header-bg: transparent; /* background color of the header */
--color-primary: #000000;
--color-accent: #666666;
--color-muted: #dddddd;
}
/* Variables when sidebar is on left side */
.content__nav-left {
--sidebar-padding-right: calc(40px + var(--scaling-constant));
}
/* Variables when sidebar is on right side */
.content__nav-right {
--sidebar-padding-left: calc(40px + var(--scaling-constant));
}
/* Variables on mobile */
@media (max-width: 760px) {
:root {
/* The header is transparent by design on desktop, but on mobile it is sticky -
   so page content scrolled visibly through the title. Give it the page colour. */
--header-bg: #fff;
--header-height: 62px; /* height of the header on mobile */
--font-size-lg: 20px;
--font-size-default: 16px;
--font-size-sm: 11px;
}
}

/* Basic overrides of original styles, setting font-size and other values */
#headerWarp {
font-size: var(--font-size-lg);
}
#menuWarp {
font-size: var(--font-size-default);
}
#menu {
font-size: var(--font-size-default);
width: 25%;
}
#contentWarp {
font-size: var(--font-size-default);
}
.imagePanelLegends {
font-size: var(--font-size-sm);
}
#footerWarp {
font-size: var(--font-size-sm);
}

/* Don't show mobile menu button by default */
#mobileMenuButton {
display: none;
}

/* --- Lightbox2 overrides --- */
#lightboxOverlay {
background: rgba(0,0,0) !important;
backdrop-filter: blur(2px);
opacity: 0.9;
}

#lightbox {
position: fixed !important;
/* Lightbox2 sets an inline `top` from the scroll offset, which shifted the
   whole box down the page (and further the more you had scrolled). The
   !important is required to beat that inline style - without it the group
   never sits on the vertical centre. */
top: 0 !important; left: 0 !important;
width: 100%; height: 100%;
display: flex;
flex-direction: column; /* stack image and caption */
align-items: center; /* horizontally center image & caption */
justify-content: center; /* vertically center the group */
padding: clamp(8px, 4vw, 48px);
box-sizing: border-box;
/* No extra padding-bottom here: it used to be 80px to compensate for the
   offset above, but a fixed nudge cannot correct a scroll-dependent shift. */
}

#lightbox .lb-outerContainer {
background: transparent;
box-shadow: none;
max-width: 100%;
margin: 0 0 12px 0; /* space between image and caption */
}

#lightbox img.lb-image {
max-width: 90vw;
max-height: 82vh;
width: auto;
height: auto;
object-fit: contain;
border: 0;
box-shadow: 0 0 24px rgba(0,0,0,.6);
}

#lightbox .lb-dataContainer {
background: transparent;
padding: 0; /* remove extra top padding now that we added margin below image */
max-width: 90vw;
margin: 0 auto;
}

#lightbox .lb-data {
color: #ddd;
font-family: inherit;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: .75rem;
justify-content: center;
}

#lightbox .lb-data .lb-details {
text-align: center;
flex: 1 1 100%;
}

#lightbox .lb-data .lb-caption {
font-size: .9rem;
line-height: 1.35;
color: #eee;
letter-spacing: .3px;
}


#lightbox a.lb-close {
  /* Close button: equal spacing from top/right & always visible */
  /* Close button: fixed to overlay/viewport with equal spacing */
background: none;
  opacity: 1 !important; /* prevent Lightbox2 from fading it out */
  position: absolute;
  top: 12px; /* equal distance */
  right: 12px; /* equal distance */
  width: 38px;
  height: 38px;
  display: flex !important; /* ensure it's kept in layout if script toggles */
  position: fixed; /* detach from inner flex box so it stays in corner */
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  display: flex !important;
align-items: center;
justify-content: center;
  z-index: 30; /* keep above nav overlays */
  z-index: 1000; /* above all lightbox layers */
  opacity: 1 !important;
pointer-events: auto;
}

#lightbox a.lb-close:before,
#lightbox a.lb-close:after {
content: "";
position: absolute;
  top: 8px; left: 18px;
  width: 2px; height: 22px;
  top: 10px; left: 20px;
  width: 2px; height: 24px;
background: #fff;
border-radius: 1px;
transition: background .25s;
}
#lightbox a.lb-close[style*="display: none"],
#lightbox a.lb-close[style*="opacity: 0"],
#lightbox a.lb-close.hidden,
#lightbox a.lb-close.is-hidden {
  display: flex !important;
  opacity: 1 !important;
}
#lightbox a.lb-close:before { transform: rotate(45deg); }
#lightbox a.lb-close:after { transform: rotate(-45deg); }
#lightbox a.lb-close:hover:before,
#lightbox a.lb-close:hover:after { background: #ffda57; }

#lightbox .lb-nav a.lb-prev,
#lightbox .lb-nav a.lb-next {
opacity: 0;
transition: opacity .25s;
}
#lightbox .lb-nav {
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: none;
}
#lightbox .lb-nav a.lb-prev,
#lightbox .lb-nav a.lb-next {
pointer-events: auto;
width: 45%;
background: linear-gradient(to right, rgba(0,0,0,.25), rgba(0,0,0,0));
}
#lightbox .lb-nav a.lb-next {
background: linear-gradient(to left, rgba(0,0,0,.25), rgba(0,0,0,0));
}
#lightbox:hover .lb-nav a.lb-prev,
#lightbox:hover .lb-nav a.lb-next {
opacity: 1;
}

#lightbox .lb-loader {
filter: invert(90%);
}
#lightbox .lb-number {
  white-space: pre; 
  letter-spacing: normal;
  font-size: 0.8rem;
  color: #ddd;
  opacity: 0.8;
  bottom: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 3px;
}



/* Next/previous links at end of each page */
.page-nav {
margin-top: 30px;
display: flex;
gap: 30px;
}
.page-nav .next-page {
margin-left: auto;
}

.gallery {
gap: 24px;
}
.al-right {
text-align: right;
}
.gallery img {
width: 100%;
}
.gallery {
display: grid;
margin: 0;
list-style: none;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}

/* Single images were the only images with square corners; match the 5px
   used by the gallery below so all images on the site look consistent. */
.singleImage img {
border-radius: 5px;
}

.gallery img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 5px;
}

/* Desktop only */
@media (min-width: 761px) {
/* Put sidebar on the right if sidebar position is set to "Right" */
.content__nav-right {
flex-direction: row-reverse;
}

/* Make sidebar sticky and scrollable */
#menu {
position: sticky;
top: 0;
overflow-y: auto;
max-height: 100vh;
line-height: 1.3rem
}
/* Setup paddings for sidebar */
#menuWarp {
padding-right: var(--sidebar-padding-right);
padding-top: var(--sidebar-padding-top);
padding-bottom: var(--sidebar-padding-bottom);
}
/* Hide sidebar navigation on desktop if top navigation is configured */
.content__nav-top #menu,
.content__nav-top-side #menu {
display: none;
}
/* Make header sticky and make sure its contents is centered vertically */
#headerWarp {
display: flex;
align-items: center;
min-height: var(--header-height);
padding: 0px 15px 0px 15px;
position: sticky;
top: 0;
z-index: 10;
background: var(--header-bg);
}

/* Hide header while scrolling down */
#headerWarp {
transition: transform 0.3s;
}
.header_scrolled {
transform: translateY(-100%);
}

/* Top navigation: basic padding */
.top-nav {
padding: 0px 15px;
}
/* Setup first level of top navigation */
.top-nav__nav-1 {
display: flex;
flex-wrap: wrap;
column-gap: 20px;
row-gap: 5px;
padding-bottom: 10px;
}
/* Setup second level of top navigation (sub pages) */
.top-nav__nav-2 {
display: flex;
flex-wrap: wrap;
column-gap: 20px;
row-gap: 5px;
font-size: var(--font-size-sm);
padding-bottom: 10px;
}
/* Style links of top navigation */
.top-nav__item,
.top-nav__item:visited {
color: rgb(130, 130, 130);
}
.top-nav__item_active,
.top-nav__item_active:visited {
color: rgb(0, 0, 0);
}

/* Top navigation inside header, in effect when sidebar position is "Top (Next to Logo)" */
#headerWarp .top-nav {
padding: 0;
margin-left: auto;
}
#headerWarp .top-nav__nav-1 {
padding: 0;
}

/* Basic padding for content */
#center {
padding: 0px 15px 50px 15px;
}

/* Some spacing to the top for the footer */
#footerWarp {
padding-top: calc(30px + var(--scaling-constant));
}
}

/* Mobile only */
@media (max-width: 760px) {
/* Setup header with height and make it sticky */
#headerWarp {
min-height: 0;
height: var(--header-height);
padding: 0 15px;
display: flex;
align-items: center;
background: var(--header-bg);
position: sticky;
top: 0;
z-index: 10;
}
/* Basic styles for mobile menu button */
#mobileMenuButton {
margin: 0;
padding: 0;
background: transparent;
border: 0;
display: inline-flex;
margin-left: auto;
}
/* Make sure we don't display the navigation if its position is "Top" */
.top-nav {
display: none;
}
/* Make sure we don't display the sidebar if its position is "Left" or "Right" by default */
#menu {
width: 100%;
display: none;
}
/* The first nav entry is the home page, whose title is identical to the header
   logo directly above it - on mobile the two sit adjacent and read as the title
   printed twice. The logo already links home, so hide the duplicate here only. */
#menu .m--home {
display: none;
}
/* Show the sidebar in a scrollable overlay if the mobile menu is toggled on */
.mobileMenuOpen #menu {
display: block;
position: fixed;
inset: 0;
top: var(--header-height);
width: 100%;
background: white;
z-index: 9;
overflow-y: auto;
}
/* Add padding-bottom to menu */
#menuWarp {
padding-bottom: var(--header-height);
}
/* Add padding to links in navigation to make them easier to click */
.m,
.sm {
padding-top: 6px;
padding-bottom: 6px;
margin-top: 0;
margin-bottom: 0;
}
/* Make sure the content is full-width.
   The site's Custom CSS (set in the panel) applies #contentWarp{max-width:65%}
   for the desktop two-column layout, but it is unscoped and injected inline
   after this stylesheet - so on mobile, where the sidebar is hidden, it still
   reserved ~35% of the screen and images rendered at ~57% width. !important is
   required here to beat that inline rule. */
#contentWarp {
width: 100%;
max-width: 100% !important;
/* The same Custom CSS also adds padding-top:40px. On mobile that pushes the
   sticky header down to y=40, while the fixed menu overlay is positioned at
   top:62px (the header height) on the assumption the header starts at 0. The
   header then spans 40-102 and its title collided with the menu's first item
   - the "double title" when the menu is open. The sticky header already
   provides the spacing here, so drop the padding on mobile. */
padding-top: 0 !important;
}
/* Basic spacing for main content */
#center {
margin-top: 15px;
padding-left: 15px;
padding-right: 15px;
}
/* Next/previous page buttons styling */
.page-nav {
font-size: var(--font-size-sm);
}
#lightbox {
padding: 12px;
}
#lightbox img.lb-image {
max-width: 100vw;
max-height: 70vh;
}
#lightbox .lb-data .lb-caption {
font-size: .8rem;
}
}

/* Shared styles, desktop and mobile */
.m {
display: flex;
align-items: center;
}

/* Basic styles for expand-button (shown if page has subpages) */
.expand-button {
margin: 0;
padding: 4px;
background: none;
border: 0;
display: inline-flex;
margin-left: 4px;
}

/* Rotate chevron icon in expand-buttons when open */
.expand-button--expanded svg {
transform: rotate(90deg);
}

/* Line block styles - base styles apply to all lines */
.block-line {
  display: block;
  height: 0;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 2em 0;
  padding: 0;
}

/* Style variants - these override the base */
.line-style-thick {
  border-top-width: 4px !important;
}

.line-style-dashed {
  border-top-style: dashed !important;
  border-top-width: 2px !important;
}

.line-style-dotted {
  border-top-style: dotted !important;
  border-top-width: 2px !important;
}

/* Line color variants */
.line-color-primary {
  border-top-color: var(--color-primary, #000) !important;
}

.line-color-accent {
  border-top-color: var(--color-accent, #666) !important;
}

.line-color-muted {
  border-top-color: var(--color-muted, #ddd) !important;
}

/* --- Fixed copyright footer ---
   #footer was a flex item pushed down with margin-top:auto, so it sat at the
   bottom of the document and scrolled out of view on long pages. Pin it to the
   viewport instead. The background matches the body so content scrolls under
   it cleanly, and #container gains bottom padding so the last element is never
   hidden behind it. */
#footer {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 50;
margin-top: 0;
background-color: #fff;
}

#container {
padding-bottom: 60px;
}

/* --- Copyright on the right ---
   As requested: the right-hand edge of the viewport, not of the 900px page. On
   a wide screen the line therefore sits well clear of the content, which is
   pinned to the left - that is the intent. #footer is already fixed across the
   full width, so right-aligning inside #footerWarp is all it takes.

   The 15px gutter matches the one #center keeps on mobile, where the content
   runs the full width and the copyright ends up directly below it. */
#footerWarp {
text-align: right;
padding-right: 15px;
}

/* --- Desktop sidebar: match the original site's header and menu ---
   Reference values measured on http://www.alexandragrimal.com: the site title
   sits at the top left in 13px/#333 with 50px above and 28px below it, and the
   menu underneath runs at 11px with 1px letter-spacing on an 18.5px rhythm.

   The port had drifted from that: the panel's Custom CSS hides #headerWarp on
   desktop, so the home page's own nav entry became the visible title - styled
   like a menu item and coloured red by the active-link rule. The rules below
   turn that first entry back into the header, and tighten the menu.

   Selectors are #content-prefixed on purpose: the panel's Custom CSS is
   injected inline *after* this stylesheet, so a bare #menu rule there would
   otherwise win on source order. Two ids beat one regardless of order, which
   keeps this free of !important - except for the title colour, where the panel
   uses `#menu a.active { color: #FF0000 !important }`. */
@media (min-width: 761px) {
	/* The title now supplies the top spacing the sidebar padding used to.
	   The 120px width narrows the menu column; it is desktop-only because on
	   mobile #menuWarp fills the full-screen menu overlay. */
	#content #menuWarp {
		padding-top: 0;
		width: 120px;
		font-size: 11px;
		letter-spacing: 1px;
	}
	#content #menu a {
		font-size: 11px;
		letter-spacing: 1px;
	}
	/* 2px rather than the original's 5px: the panel forces line-height 1rem with
	   !important, so 2 + 16 lands on the original's 18px row height. */
	#content #menu .m {
		margin: 2px 0 0 0;
		padding: 0;
	}
	#content #menu .sm {
		margin: 3px 0 0 10px;
		padding: 0;
	}
	/* Shrink the expand chevron so parent rows keep the same height as the rest
	   (the original had no chevron at all, but it is the only way to reach a
	   collapsed section's children here). */
	#content #menu .expand-button {
		padding: 0;
		margin-left: 4px;
	}
	#content #menu .expand-button svg {
		width: 12px;
		height: 12px;
	}

	/* The home entry is the title: same text, same link target as the original's
	   header line. #headerWarp stays hidden here (the panel's rule), and still
	   carries the title on mobile, where this entry is hidden instead.
	   Declared after the generic .m rule above - both selectors weigh the same,
	   so source order decides which padding the title gets. */
	#content #menu .m--home {
		display: block;
		margin: 0;
		padding: 50px 0 28px 0;
	}
	/* Keep the title on one line. At 13px with 1px letter-spacing it measures
	   120.8px against the 120px menu column - 0.8px too wide, so it wrapped.
	   nowrap lets it reach into the gutter between #menuWarp (170px including
	   its padding) and the 180px the panel gives #menu; that also covers the
	   Verdana fallback, which is wider than Geneva and would wrap regardless of
	   how the column width is tuned. */
	#content #menu .m--home a {
		font-size: 13px;
		letter-spacing: 1px;
		color: #333 !important;
		white-space: nowrap;
	}

	/* Start the content column level with the menu's first entry, as on the
	   original. The offset is the height of the title block in the sidebar:
	   50px above it + the title itself + 28px below it + the 2px margin on the
	   first .m. Carried on #contentWarp rather than #center so no margin can
	   collapse through it. Both properties are set by the panel's Custom CSS
	   (padding-top: 40px and #center.clearfix { margin-top: 30px }), which is
	   what put the content 26px above the menu before.

	   The 16px is the single 16px line the title now occupies (see the nowrap
	   above); if it ever wraps to two lines again this has to grow by 16px, or
	   the content column sits that much above the menu. */
	#content #contentWarp {
		padding-top: calc(50px + 16px + 28px + 2px);
	}
	#content #center {
		margin-top: 0;
	}

	/* Widen the text column back to the original's proportion. The old site ran
	   a 200px menu against a 700px content column in a 900px page - 78%. The
	   panel's Custom CSS caps #contentWarp at 65%, which at a 960px page is
	   624px against the original's 700px, so lines broke earlier and a row of
	   record covers no longer fit. */
	#content #contentWarp {
		max-width: 78%;
	}
}

/* --- Left-align the page ---
   The original site is not centred: its 900px column starts at the left edge of
   the viewport, so the menu sits ~25px in no matter how wide the screen is. The
   port inherited `margin: 0 auto` on #container (in original.css), which pushed
   the whole page to the middle and left a growing empty margin on the left. */
#container {
	margin-left: 0;
	margin-right: auto;
}

/* --- One typeface across the whole site ---
   Three stacks were in play: original.css sets museosans on body and #menu,
   the panel's Custom CSS replaces it with a bare `"Geneva"`, and the panel's
   block is wrapped in `@media (min-width: 761px)` - so phones fell back to
   museosans and the site read as two different designs.

   Set the same stack at every width. Geneva only exists on macOS, so Verdana
   and the generic sans catch every other platform instead of leaving them on
   whatever the browser defaults to. The selectors outweigh both stylesheets:
   `html body` beats original.css's `body` and the panel's, and `#content #menu`
   beats their single-id `#menu` rules regardless of source order. */
html body,
#content #menu,
#content #menu a {
	font-family: Geneva, Verdana, sans-serif;
}

/* --- Sidebar gutters ---
   As requested: the original's #menuWarp rule with the left gutter opened up
   from 15px to 35px. */
#menuWarp {
	margin: 0px;
	padding: 0px 15px 0px 35px;
}

/* The shorthand above also zeroes the bottom padding, which the sidebar needs:
   #footer is fixed to the bottom of the viewport, so without it the last menu
   entry ends up underneath the copyright line - on desktop once the menu is
   taller than the sticky column, and on mobile in the scrolling overlay. */
#content #menuWarp {
	padding-bottom: var(--sidebar-padding-bottom);
}
@media (max-width: 760px) {
	#content #menuWarp {
		padding-bottom: var(--header-height);
	}
}

/* --- Gallery captions ---
   Moved here from site/snippets/blocks/gallery.php, which printed this same
   <style> block once per gallery - 13 identical copies on the discography page.

   font-size, color, text-align and padding on .captionMap p are all set with
   !important in the panel's Custom CSS, so they win from either location; the
   values below only take effect where the panel does not override them. */
li.item_img {
	position: relative;
}
.captionMap {
	padding: 0px;
}
.captionMap p {
	font-size: 15px;
	color: #AAA;
	text-align: center;
	padding: 5px;
	line-height: 18px;
}

/* --- Blank lines left in a text block ---
   The Writer field keeps a deliberately empty paragraph as <p></p>, but the
   reset in original.css zeroes every p margin, so an empty one has no line box
   and no height: the blank line the editor typed simply vanishes on the page.
   Give it the height of one line so it shows up as intended.

   1lh is exactly one line of the surrounding text; the rem value before it is
   the fallback for browsers without the lh unit (it matches the 1.05rem
   line-height the panel's Custom CSS sets on body). */
.p.text p:empty {
	min-height: 1.05rem;
	min-height: 1lh;
}

/* --- Space between paragraphs in a text block ---
   The reset in original.css zeroes every p margin, so two paragraphs sit flush
   against each other: pressing Return in the editor produced no visible break
   at all. Across the site there are 41 such pairs and 33 of them are meant to
   be separated - Alexandra reported it on humus, la ronde and ovni among
   others, and had been working around it with manual line breaks.

   In the 8 places where a paragraph already starts with its own <br>, the gap
   is now a line taller than before; those breaks are hers to remove and are
   left alone rather than stripped in the renderer. */
.p.text p + p {
	margin-top: 1.05rem;
	margin-top: 1lh;
}

/* --- Discography record covers ---
   Bigger than the original site's 130px thumbnails, at Alexandra's request,
   and sized so four fill the 672px column exactly with no gaps - the same
   contact-sheet block as before, just larger. Four per row means the covers
   want to be grouped in fours in the panel.

   Scoped to this page so the photo galleries on /pictures keep their own
   layout. This supersedes the same rules in the discography page's Custom CSS
   (two classes beat one), which can be deleted from the panel - but only the
   .gallery lines there, the .bio_seperator rule is still doing work. */
[data-page="discography"] .gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
[data-page="discography"] .gallery li.item_img {
	line-height: 0;
}
[data-page="discography"] .gallery img {
	width: 168px;
	height: 168px;
	border-radius: 0;
}