.header-hero {
    display: flex;
    align-items: stretch; /* make children equal height */
    gap: 24px;
    max-width: 1100px;
}

/* Root variables (needed for desktop split layout and colors) */
:root { 
  --left-pane: min(600px, 44vw);
  --alt-yellow: #ffd103;
  --nav-pad: 20px;
  --align-top: 30px; /* unified top alignment for left photo and right content on desktop */
  --align-fine: 0px; /* micro-adjust for desktop alignment */
  --ws-gap: 30px; /* adjustable gap between left workstreams */
  --intro-gap: 40px; /* adjustable gap between intro and first workstream */
}

/* Final override: ensure right content clears the fixed left pane on desktop */
@media (min-width: 1000px) {
  .content-area { padding-top: 8px !important; }
  .content-area > .section { padding-top: 8px !important; padding-right: 16px; }
  .content-area > .section:first-of-type { padding-top: 8px !important; }
  /* Shift the whole content container to the right of the fixed pane */
  #content { padding-left: calc(var(--left-pane) + 96px) !important; padding-right: 16px; }
  /* Keep inner content aligned and ensure it doesn't extend under the left pane */
  .content-area {
    margin-left: 0 !important;
    max-width: calc(100vw - (var(--left-pane) + 120px));
    position: relative;
    z-index: 1;
    padding-top: 8px; /* match left top inset */
  }
  /* Ensure anchor targets align exactly with the left image top and occupy full viewport */
  .content-area > .section { padding-top: 8px; scroll-margin-top: var(--align-top); min-height: 100vh; }
  /* Compensate for the -2px overlap so non-first sections align perfectly too */
  .content-area > .section + .section { scroll-margin-top: calc(var(--section-align-offset, 0px) - 2px); }
  .content-area > .section:first-of-type { padding-top: 8px; }
  /* Remove default top margins on headings to align with left */
  .content-area > .section h2 { margin-top: 0; }
}

/* Desktop short-height optimizations: ensure left pane content fits */
@media (min-width: 1000px) and (max-height: 800px) {
  :root { --align-top: 12px; }
  .hero-photo { max-height: 10vh; }
  .header-hero .intro, .header-hero .workstream { font-size: clamp(0.54rem, 0.75vh, 0.70rem); line-height: 1.16; }
  .header-hero .intro br, .header-hero .workstream br { display: none; }
}
@media (min-width: 1000px) and (max-height: 650px) {
  .hero-photo { display: none; }
  .header-hero { gap: 4px; }
  .header-hero .intro, .header-hero .workstream { font-size: clamp(0.52rem, 0.70vh, 0.68rem); line-height: 1.14; }
  .header-hero .intro br, .header-hero .workstream br { display: none; }
}

/* Desktop split layout: fixed left profile, scrolling right content */
@media (min-width: 1000px) {
  :root { --align-fine: -50px; }
  /* Left pane */
  .profile-header {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--left-pane);
    height: 100vh;
    padding: 0; /* spacing handled by .header-hero offsets */
    box-sizing: border-box;
    background: var(--alt-yellow);
    margin: 0;
    min-height: 0; /* override earlier min-height */
    display: flex;
    align-items: flex-start; /* align content to top-left */
    justify-content: flex-start; /* align content to top-left */
    overflow-x: hidden; /* no horizontal scroll */
    overflow-y: hidden; /* no vertical scroll in left pane */
  }
  .header-hero { 
    max-width: none; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; /* align to left edge */
    gap: 0; /* no internal gap to avoid extra top offset */
    position: absolute; /* pin to top-left of fixed pane */
    top: var(--align-top); 
    left: 30px; 
    right: 0; /* use inner padding for gutter to avoid FF clipping */
    margin-top: 0; /* ensure no extra margin stacking */
    box-sizing: border-box;
    padding-right: 40px; /* inner right gutter for both Chrome/Firefox */
  }
  .hero-photo { width: 100%; height: auto; max-height: 22vh; margin-top: 0; display: block; }
  .header-hero .intro, .header-hero .workstream { 
    max-width: 100%; 
    text-align: justify; /* justify for aligned edges */
    text-justify: inter-word; 
    font-size: 0.98rem; 
    line-height: 1.35; 
    hyphens: none; /* normalize across browsers to match Chrome */
    word-break: normal;
    overflow-wrap: break-word; /* wrap long words without breaking every token */
    white-space: normal; /* ensure wrapping, not single-line */
    margin: 0; 
    padding-right: 6px; /* small inner gutter for a clean edge */
    letter-spacing: normal; /* normalize spacing */
    word-spacing: normal;   /* normalize spacing */
  }

/* Ensure links wrap safely inside the left pane */
.header-hero .workstream,
.header-hero .workstream b,
.header-hero .intro a {
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
  /* Removed first-line extra space so all gaps are equal */
  /* Extra space between each workstream item */
  .header-hero .workstream + .workstream { margin-top: 14px; }
  .header-hero .workstream b { font-weight: 600;  }
  /* Right pane offset is handled globally via #content padding-left */
}

/* Mobile: make modal more immersive, like a centered small-phone shape */
@media (max-width: 600px) {
  .modal-overlay { padding: 8px; }
  .modal-dialog {
    width: 96vw;            /* nearly full width */
    max-width: 520px;       /* cap width so it feels like a phone */
    max-height: 94vh;       /* slightly taller than desktop */
    border-radius: 12px;    /* a bit rounder on mobile */
  }
  .modal-content { max-height: 94vh; }
  .modal-content iframe,
  .modal-content video,
  .modal-content audio,
  .modal-content img { max-height: 94vh; }
  .modal-close { width: 40px; height: 40px; border-radius: 20px; }
}

@media (max-width: 600px) {
  body { font-size: 17px; line-height: 1.7; }
  .header-hero .intro, .header-hero .workstream { font-size: 1rem; padding: 0 12px; text-align: left; }
  .hero-photo { width: 100%; height: auto; max-height: 40vh; }

  .floating-nav .nav-brand { font-size: 1.5rem; }
  .floating-nav ul { gap: 8px; flex-wrap: wrap; }
  .floating-nav > ul > li > a { padding: 10px 0; }
  .floating-nav ul.submenu { position: static; display: block; padding: 6px 0; width: 100%; }
  .floating-nav ul.submenu li a { padding: 8px 0; font-size: 1rem; }

  .section { padding: 40px 4vw; }
  .section h2 { font-size: 2rem; }
  /* CV rows: keep year and title on the same row with smaller fonts */
  .subsection { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: baseline; }
  .subsection h3 { font-size: 1rem; line-height: 1.25; margin: 0; }
  .item-date { font-size: 1rem; }
  .item-body { min-width: 0; }
  .item-body h3 { overflow-wrap: anywhere; }
  .content-area { padding: 12px 0 28px; }

  .floating-nav .cv-download { right: 10px; bottom: 10px; padding: 8px 12px; font-size: 0.9rem; }

  /* Mobile three-dots menu */
  .floating-nav { position: sticky; top: 0; }
  .floating-nav .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 9999px;
    border: 1px solid #000;
    background: #fff;
    cursor: pointer;
    font-size: 22px;
  }
  /* On phones, hide desktop menu, show quick menu when open */
  #main-menu { display: none !important; }
  .floating-nav .nav-right { display: none; }
  /* Quick menu default hidden */
  #mobile-quick-menu { display: none; list-style: none; padding: 8px 0; margin: 8px 0 0; width: 100%; }
  #mobile-quick-menu li { margin: 4px 0; }
  #mobile-quick-menu a { display: block; padding: 10px 12px; border: none; border-radius: 10px; background: #fff; color: #000; font-size: 1rem; }
  #mobile-quick-menu a:active { background: #000; color: #fff; }
  /* Show quick menu when toggled */
  html.nav-open #mobile-quick-menu { display: block; }
  /* Only show the toggle button on phones */
  .floating-nav .menu-toggle { display: inline-flex; }
}

/* SPA content fade */
#content { transition: opacity 200ms ease; }
html.is-navigating #content { opacity: 0.08; }

/* Modal overlay (lightbox) */
html.modal-open { overflow: hidden; }
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 2000;
}
.modal-overlay.is-open { display: flex; }
.modal-dialog {
  background: #000; /* dark backdrop for media */
  max-width: 960px;
  width: min(92vw, 960px); /* centered rectangle, not full width */
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  overflow: hidden;
  position: relative;
}
.modal-content { width: 100%; max-height: 90vh; }
/* Do not force 100% heights: Firefox requires explicit parent heights and may collapse.
   Let media size itself with max-height constraints for consistent aspect across browsers. */
.modal-content iframe,
.modal-content video,
.modal-content audio,
.modal-content img {
  display: block;
  width: 100%;
  height: auto;         /* keep natural/aspect height */
  max-height: 90vh;     /* constrain to viewport */
}
.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  cursor: pointer;
  font-size: 20px;
}

/* Mobile modal adapts to content: centered, padded, not fullscreen */
@media (max-width: 600px) {
  .modal-overlay { padding: 12px; }
  .modal-dialog {
    width: min(94vw, 640px); /* near full width with cap for balance */
    max-height: 90vh;        /* keep within viewport */
    height: auto;            /* let content define height */
    border-radius: 14px;
  }
  .modal-content { width: 100%; max-height: 90vh; }
  .modal-content iframe,
  .modal-content video,
  .modal-content audio,
  .modal-content img {
    display: block;
    width: 100%;
    height: auto;           /* content defines height */
    max-height: 90vh;       /* prevent overflow */
    object-fit: contain;    /* preserve aspect */
  }
  .modal-close { width: 44px; height: 44px; border-radius: 22px; }
}
/* Hero photo */
.hero-photo {
    width: auto;           /* let height drive scaling */
    height: 100%;          /* match tagline block height */
    max-height: 60vh;      /* don't exceed viewport excessively */
    display: block;
    object-fit: cover;     /* crop gracefully if needed */
    cursor: pointer;       /* clickable carousel */
    transition: transform 180ms ease; /* smooth hover zoom */
}

.hero-photo:hover { transform: scale(1.03); }

.header-hero .workstreams { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.header-hero .workstream { display: block; text-align: left; }

.header-hero .intro, .header-hero .workstream {
    text-align: left;
    max-width: 100%;
    margin: 0; /* no per-item margins; use sibling top margin for consistent gaps */
    font-size: 1.05rem; /* base readability for 600-999px widths */
    line-height: 1.35;
}
/* Extra space after the intro line */
.header-hero .intro { margin-bottom: var(--intro-gap); }
/* Equal gap between items */
.header-hero .workstream + .workstream { margin-top: var(--ws-gap); }

@media (max-width: 800px) {
  .header-hero { flex-direction: column; align-items: flex-start; }
  .hero-photo { height: auto; width: clamp(200px, 60vw, 360px); }
  .header-hero .intro, .header-hero .workstream { text-align: left; }
}

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; /* Clean UI stack */
    margin: 0;
    padding: 0;
    background-color: var(--alt-yellow); /* page background */
    color: #000000; /* black text */
    line-height: 1.6;
}

/* Basic Link Styling */
a {
    color: #000000; /* black links */
    text-decoration: none;
}

/* Global link hover: blue, no underline */
a:hover {
    color: #ffffff;
    text-decoration: none;
}

/* Header for Profile Description */
.profile-header {
    text-align: center;
    padding: 24px 5vw 16px; /* full-width feel with small side margins */
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    min-height: calc(100vh - var(--nav-h)); /* fill screen below sticky nav */
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-header .tagline {
    font-size: 1.2em;
    font-weight: 400; /* lighter */
    font-style: normal; /* cursive style */
    max-width: 600px;
    margin: 0 auto;
}

/* Floating Navigation */
/* (floating-nav styles removed; nav is globally hidden) */

/* (floating-nav nav-social removed; nav is hidden) */

/* Main Content Area */
.content-area {
    margin-left: 0;
    padding: 16px 0 40px; /* remove side padding so sections can be full-bleed */
    max-width: none; /* use full width */
}

/* (removed redundant .content-area margin-left override to avoid conflicts) */

/* Remove band visuals; use section background colors instead */

.section {
    /* left padding matches .floating-nav horizontal padding (20px) */
    padding: 64px 5vw;
    padding-left: var(--nav-pad);
}


/* Section Headers */
.section h2 {
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 2rem;
}

/* Offset scroll position for sticky top bar when jumping to anchors */
.section,
.subsection {
    scroll-margin-top: 96px; /* adjust if you change top bar height */
}

/* Give subsections a slightly larger offset so h3 titles are fully visible */
.subsection { scroll-margin-top: 128px; }

/* (removed legacy alternating background colors) */

/* (removed old full-bleed and overlap divider rules) */

/* Give the last section extra bottom space so it can align to the top on scroll */
@media (min-width: 1000px) {
  #electronic-experimental { padding-bottom: 60vh; }
}
@media (max-width: 999px) {
  #electronic-experimental { padding-bottom: 30vh; }
}

/* (removed first-of-type divider rule) */

#music-labouring,
#singer-songwriting { margin-bottom: 48px; }

.subsection {
    margin-top: 32px; 
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* left-aligned words */
    gap: var(--pair-gap, clamp(12px, 3vw, 40px)); /* adjustable space between year and title */
}

.subsection h3 {
    font-size: 2rem; /* same size as year for simplicity */
    line-height: 1;
    margin: 0;
}

/* CV-style columns */
.item-date {
    font-weight: 700;
    color: #000;
    white-space: nowrap;
    font-size: 2rem; /* same as title */
    align-self: center;
}
.item-body { 
    padding-left: 0; /* spacing via gap */
    align-self: center;
    text-align: left;
}
.item-body h3 { margin: 0; }
.item-body p { margin: 0.25em 0 0.75em; }

.content-area p {
    margin-bottom: 1.1em;
    font-size: 1.05rem;
    text-align: justify; /* align paragraph edges */
    text-justify: inter-word;
    /* Optional: uncomment if you want the very last line also justified */
    /* text-align-last: justify; */
    hyphens: none; /* normalize across browsers to match Chrome */
    overflow-wrap: break-word;
    word-break: normal;
    letter-spacing: normal;
    word-spacing: normal;
}

/* Styles for in-text links */
.content-area a {
    text-decoration: none; /* remove underline in main page */
    font-weight: bold;
}

.content-area a:hover {
    text-decoration: none;
    color: #ffffff; /* white hover in main page */
}

/* Ensure link contrast inside Calypso sections */
.content-area > .section:nth-of-type(odd) a { color: #000000; }
.content-area > .section:nth-of-type(odd) a:hover { color: #ffffff; }

/* Force smaller hero photo in the fixed left sidebar on desktop */
@media (min-width: 1000px) {
  .profile-header .hero-photo {
    width: 100% !important;
    height: 38vh !important;           /* slightly smaller, consistent size */
    max-height: none !important;
    object-fit: cover !important;       /* crop to fill consistently */
    margin-bottom: 16px !important;     /* add space before text */
  }
}

/* (floating-nav mobile adjustments removed; nav is hidden) */
/* Desktop audio player (always visible on desktop, hidden on mobile) */
.desktop-audio-player {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 220px;
  padding: 8px;
  background: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
  cursor: move;
  touch-action: none; /* prevent browser panning/zooming on drag */
  box-sizing: border-box; /* ensure width/height locking doesn't grow the box */
}
.desktop-audio-player .dap-row { display: flex; align-items: center; gap: 8px; }
.desktop-audio-player .dap-row.buttons { justify-content: center; }
.desktop-audio-player button {
  border: 1px solid #000;
  background: #fff;
  color: #000;
  border-radius: 8px;
  padding: 4px 8px;
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  font-variant-emoji: text;
}
.desktop-audio-player button:hover,
.desktop-audio-player button:focus {
  background: #fff;
  color: #000;
}
.desktop-audio-player button:active { background: #000; color: #fff; }
.desktop-audio-player button:focus { outline: none; background: #fff; color: #000; }
.desktop-audio-player button:focus-visible { outline: 2px solid #000; outline-offset: 2px; background: #fff; color: #000; }
.desktop-audio-player #dap-volume { width: 100%; }
.desktop-audio-player .dap-track { font-size: 0.8rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-audio-player .dap-vol-icon { font-size: 12px; width: 16px; text-align: center; line-height: 1; user-select: none; }
.desktop-audio-player .dap-progress { position: relative; height: 6px; background: #eee; border: 1px solid #000; border-radius: 9999px; cursor: pointer; order: 1; width: 100%; margin: 3px 0; }
.desktop-audio-player .dap-progress { touch-action: none; }
.desktop-audio-player .dap-progress__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: #000; border-radius: 9999px; }
.desktop-audio-player .dap-progress:hover { background: #e5e5e5; }
.desktop-audio-player .dap-seek { display: none; }
.desktop-audio-player .dap-row.buttons { order: 2; }
.desktop-audio-player .dap-row.volume { order: 2; }
.desktop-audio-player .dap-track { order: 0; text-align: center; width: 100%; margin-bottom: 4px; }

/* Mobile compact player (phones) */
@media (max-width: 600px) {
  .desktop-audio-player {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 0;
    top: auto;
    width: auto;
    padding: 6px 8px;
    gap: 4px;
    transform: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    box-shadow: 0 -6px 16px rgba(0,0,0,0.15);
    accent-color: #000; /* ensure native controls (range) use black, not orange */
  }
  /* Remove top menu border on mobile */
  .floating-nav { border-bottom: 0 !important; }
  .desktop-audio-player .dap-row { gap: 4px; }
  .desktop-audio-player .dap-row.buttons { justify-content: center; }
  .desktop-audio-player button { padding: 3px 6px; font-size: 13px; }
  .desktop-audio-player #dap-volume { width: 100%; }
  .desktop-audio-player .dap-progress { display: none; }
  .desktop-audio-player .dap-seek { display: block; width: 100%; margin: 3px 0 6px; }
  .desktop-audio-player .dap-track { font-size: 0.8rem; }
  .desktop-audio-player .dap-vol-icon { font-size: 11px; width: 14px; }
  .desktop-audio-player.collapsed { cursor: pointer; }
  .desktop-audio-player.collapsed .dap-row,
  .desktop-audio-player.collapsed .dap-progress,
  .desktop-audio-player.collapsed .dap-seek,
  .desktop-audio-player.collapsed audio { display: none; }
  .desktop-audio-player.collapsed .dap-track { display: block; white-space: normal; word-break: break-word; overflow: visible; text-overflow: clip; }
}

/* Hide floating navigation globally */
.floating-nav { display: none !important; }