/* ====== Define web fonts stored locally using @font-face ======

I use the following web font formats, which should allow me to
support all major browsers back to c.2010:

.eot - IE9 compatability modes
.eot?#iefix (embedded-opentype) - IE6-IE8 (not really necessary?)
.woff2 - Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+
.woff - Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+
.ttf (truetype) - Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+,
                  iOS 4.2+, Android Browser 2.2+

 ============================================================== */

@font-face {
  font-family: 'Francois One';
  src: url('fonts/francois_one/francois-one-v21-latin-regular.eot');
  src: url('fonts/francois_one/francois-one-v21-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/francois_one/francois-one-v21-latin-regular.woff2') format('woff2'),
       url('fonts/francois_one/francois-one-v21-latin-regular.woff') format('woff'),
       url('fonts/francois_one/francois-one-v21-latin-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  src: url('fonts/sofia_sans_extra_condensed/sofia-sans-extra-condensed-v5-latin-regular.eot');
  src: url('fonts/sofia_sans_extra_condensed/sofia-sans-extra-condensed-v5-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/sofia_sans_extra_condensed/sofia-sans-extra-condensed-v5-latin-regular.woff2') format('woff2'),
       url('fonts/sofia_sans_extra_condensed/sofia-sans-extra-condensed-v5-latin-regular.woff') format('woff'),
       url('fonts/sofia_sans_extra_condensed/sofia-sans-extra-condensed-v5-latin-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Acme';
    src: url('fonts/acme/acme-v26-latin-regular.eot');
    src: url('fonts/acme/acme-v26-latin-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/acme/acme-v26-latin-regular.woff2') format('woff2'),
         url('fonts/acme/acme-v26-latin-regular.woff') format('woff'),
         url('fonts/acme/acme-v26-latin-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

/* libre-franklin-regular (latin) */
@font-face {
  ascent-override: 100%;
  font-display: swap;
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/libre_franklin/libre-franklin-v19-latin-regular.eot');
  src: url('fonts/libre_franklin/libre-franklin-v19-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/libre_franklin/libre-franklin-v19-latin-regular.woff2') format('woff2'),
       url('fonts/libre_franklin/libre-franklin-v19-latin-regular.woff') format('woff'),
       url('fonts/libre_franklin/libre-franklin-v19-latin-regular.ttf') format('truetype');
}
/* libre-franklin-italic (latin) */
@font-face {
  ascent-override: 100%;
  font-display: swap;
  font-family: 'Libre Franklin';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/libre_franklin/libre-franklin-v19-latin-italic.eot');
  src: url('fonts/libre_franklin/libre-franklin-v19-latin-italic.eot?#iefix') format('embedded-opentype'),
       url('fonts/libre_franklin/libre-franklin-v19-latin-italic.woff2') format('woff2'),
       url('fonts/libre_franklin/libre-franklin-v19-latin-italic.woff') format('woff'),
       url('fonts/libre_franklin/libre-franklin-v19-latin-italic.ttf') format('truetype');
       }
/* libre-franklin-500 (latin) */
@font-face {
  ascent-override: 100%;
  font-display: swap;
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/libre_franklin/libre-franklin-v19-latin-500.eot');
  src: url('fonts/libre_franklin/libre-franklin-v19-latin-500.eot?#iefix') format('embedded-opentype'),
       url('fonts/libre_franklin/libre-franklin-v19-latin-500.woff2') format('woff2'),
       url('fonts/libre_franklin/libre-franklin-v19-latin-500.woff') format('woff'),
       url('fonts/libre_franklin/libre-franklin-v19-latin-500.ttf') format('truetype');
}
/* libre-franklin-500italic (latin) */
@font-face {
  ascent-override: 100%;
  font-display: swap;
  font-family: 'Libre Franklin';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/libre_franklin/libre-franklin-v19-latin-500italic.eot');
  src: url('fonts/libre_franklin/libre-franklin-v19-latin-500italic.eot?#iefix') format('embedded-opentype'),
       url('fonts/libre_franklin/libre-franklin-v19-latin-500italic.woff2') format('woff2'),
       url('fonts/libre_franklin/libre-franklin-v19-latin-500italic.woff') format('woff'),
       url('fonts/libre_franklin/libre-franklin-v19-latin-500italic.ttf') format('truetype');
}
/* libre-franklin-600 (latin) */
@font-face {
  ascent-override: 100%;
  font-display: swap;
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/libre_franklin/libre-franklin-v19-latin-600.eot'); /* IE9 Compat Modes */
  src: url('fonts/libre_franklin/libre-franklin-v19-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/libre_franklin/libre-franklin-v19-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/libre_franklin/libre-franklin-v19-latin-600.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('fonts/libre_franklin/libre-franklin-v19-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* libre-franklin-600italic (latin) */
@font-face {
  ascent-override: 100%;
  font-display: swap;
  font-family: 'Libre Franklin';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/libre_franklin/libre-franklin-v19-latin-600italic.eot');
  src: url('fonts/libre_franklin/libre-franklin-v19-latin-600italic.eot?#iefix') format('embedded-opentype'),
       url('fonts/libre_franklin/libre-franklin-v19-latin-600italic.woff2') format('woff2'),
       url('fonts/libre_franklin/libre-franklin-v19-latin-600italic.woff') format('woff'),
       url('fonts/libre_franklin/libre-franklin-v19-latin-600italic.ttf') format('truetype');
}

@font-face {
    font-display: swap;
    font-family: 'Cutive Mono';
    src: url('fonts/cutive_mono/cutivemono-regular-webfont.eot');
    src: url('fonts/cutive_mono/cutivemono-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cutive_mono/cutivemono-regular-webfont.woff2') format('woff2'),
         url('fonts/cutive_mono/cutivemono-regular-webfont.woff') format('woff'),
         url('fonts/cutive_mono/cutivemono-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* === Google emojis font === */
@font-face {
  font-family: 'Noto Color Emoji';
  src: url('fonts/noto_color_emoji/NotoColorEmoji-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Contact form colours:

  border-color: #d11e1e; bright red

  border-color: #ff6600;
  background-color: #d1fadf;
  background-color: #fddede;
  background-color: #d4b07f;
  color: #115b2c;
  color: #b00020;
*/

:root {
  /* Colours */
  --vinyl-black: #111;
  --blue-note: #0033a0;
  --visited-plum: #5e3a7d;
  --link-blue: #2f5dab;
  --hover-blue: #1d3f7a;
  --soul-gold: #e1c699;
  --funk-red: #a7362d;
  --torme-red: #b5290e;
  --corner-cream: #fcf9f2;
  --off-white: #fff8f8;
  --footer-grey: #eee;

  /* Fallback value for older browsers */
  --book-width: 800px; /* 624px or 39rem ? */
  --book-width: clamp(800px, 50rem, 100svw); /* should = 800px at default (medium) font size */

  /* Fallback value for older browsers */
  --bg-paper: url('backgrounds/old-paper.jpg');
}
/* Override background image with webp for modern browsers that support 'image-set' */
@supports (background-image: image-set(url('x.webp') type('image/webp'))) {
  :root {
    --bg-paper: image-set(
      url('backgrounds/old-paper.webp') type('image/webp'),
      url('backgrounds/old-paper.jpg') type('image/jpeg')
    );
  }
}

/* === UNIVERSAL STYLES === */
*,
*::before,
*::after {
  /* Ensure padding/border don't change element sizes */
  box-sizing: border-box;
}
* > .main-content {
  /* Make the main-content container an exception to the above rule */
  box-sizing: content-box;
}

* {
  max-width: 100vw; /* Fallback for older browsers */
  max-width: 100svw;

  /* Allow text to wrap (and break words if necessary) by default */
  overflow-wrap: break-word;
}

*:focus-visible {
  outline: 2px dashed;
  outline-offset: 2px;
}

@supports not selector(:focus-visible) {
  *:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 2px dashed;
    outline-offset: 2px;
  }
}

/* make body a container */
body {
  container-type: size;
  container-name: body-container;
}

html, body, #body-child {
  /* Override the default settings for the html and body elements */
  width: 100%;
  margin: 0rem;
  padding: 0rem;
  overflow-x: clip;
  font-family: 'Libre Franklin', Roboto, Arial, 'Helvetica Neue', Helvetica, 'Nimbus Sans L', 'Liberation Sans', 'FreeSans', 'Nimbus Sans', sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  word-spacing: 0.1em;
  line-height: 1.5;
  color: var(--vinyl-black);
}
figure {
  /* Remove default padding and margin from all <figure> elements */
  margin: 0rem;
  padding: 0rem;
}
button {
  /* Override the default styling of all buttons */
  font-family: 'Libre Franklin', Roboto, Arial, 'Helvetica Neue', Helvetica, 'Nimbus Sans L', 'Liberation Sans', 'FreeSans', 'Nimbus Sans', sans-serif;
  font-weight: 500;
  color: var(--vinyl-black);
  letter-spacing: 0.01em;
  word-spacing: 0.1em;
  line-height: 1.5;
}
  
/* Keep space for scrollbar(s) even if not needed - makes layout more stable */
@supports (scrollbar-gutter: stable) {
  html {
    scrollbar-gutter: stable;
  }
}

html {
  /* Stop mobile devices from changing font size */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  /* Now apply new cutting-edge environment variable instead */
  font-size: calc(100% * env(preferred-text-scale, 1));
}

html, body {
  /* Should disable "rubberbanding" overscroll effect
   - but unfortunately also disables pull-to-refresh. */
  overscroll-behavior: none;
}

.main-content * {
  max-width: 100%;
}

body {
  height: 100svh;
}

#body-child {
  /* Make the body background look like old paper */
  background-image: var(--bg-paper);
  background-repeat: repeat;
  background-size: 500px auto;
  background-attachment: scroll;

  /* Flexbox trick to make the footer seem "sticky" */
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  gap: 0rem;

  /* Define local variables so they can be used in container queries */
  --local-navbar-height: 7.5rem;

  /* Font sizes */

  /* --local-h1-font-size: clamp(1.05rem, 15svw, 2.5rem); */
  /* --local-section-font-size: 1rem; */
  /* --local-body-font-size: 1rem; */
  /* --local-intro-font-size: 1rem; */
  /* --local-h2-font-size: 1.7rem; */
  /* --local-caption-font-size: 1rem; */
  /* --local-footer-font-size: 1rem; */

  /* New larger font sizes suitable for desktops */
  --local-section-font-size: 1.2rem;
  --local-h1-font-size: clamp(1.05rem, 15svw, 3rem);
  --local-h2-font-size: 2.2rem; /* 1.8rem; */
  --local-intro-font-size: 1.7rem;
  --local-body-font-size: 1.2rem;
  --local-caption-font-size: 1.2rem;
  --local-footer-font-size: 1.1rem;

  --local-h3-font-size: 1.25rem;
  --local-link-box-font-size: 1rem;
  --local-quotation-font-size: 1.1rem;
}

main {
  flex: 1 1 auto;
  padding: 0rem;
  margin: 0rem;
}

footer {
  margin: 1rem 0rem 0rem 0rem;
  padding: 2rem 1rem;
  font-size: var(--local-footer-font-size);
  background: var(--footer-grey);
  border-top: 1px solid var(--footer-grey);
  text-align: center;
  color: #333;
  text-wrap: pretty;
  hyphens: none;
}

footer p {
  display: block;
  margin: 0rem auto;
  max-width: var(--book-width);
  width: 100%;
}

/* Image alt text styles used if/when a file doesn't load */
img {
	font-size: var(--local-footer-font-size);
	line-height: 1.2;
	text-align: center;
	overflow-wrap: normal;
}

/* Hyperlink styling */
footer a, .main-content a:not(.mixtape-link) {
  color: var(--link-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}
.mixtape-link {
  color: var(--link-blue);
  transition: color 0.2s ease;
  text-decoration: none;
}

.main-content .emoji {
  font-family: 'Noto Color Emoji', 'Twemoji Mozilla', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'EmojiOne Color', 'Android Emoji', sans-serif;
  font-style: normal;
  vertical-align: bottom;
}

.shadow-text {
  text-shadow: 1px 1px 2px black;
}

footer a:visited, .main-content a:visited, a:visited .mixtape-link {
  color: var(--visited-plum);
}

footer a:hover,
.main-content a:hover,
a:hover .mixtape-link {
  color: var(--hover-blue); /* adds subtle interactivity */
}

footer a:hover,
.main-content a:hover {
  text-decoration-thickness: 2px; /* additional subtle interactivity */
}

a:hover .mixtape-link {
  text-decoration: none;
}

.nobr, .footer-phrase {
  white-space: nowrap;
}

.nonbreakinghyphen {
  white-space: preserve nowrap;
}

.brand-name, .brand-ending-sentence {
  white-space: nowrap;
  font-weight: bold;
  text-transform: uppercase;
}
.brand-name::after {
  display: inline;
  content: '!';
}

.salutation::after {
  display: inline;
  content: '.';
}


/* === HEADER === */

header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  top: 0rem;
  left: 0rem;
  right: 0rem;
  width: 100%;
  z-index: 100;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  background: var(--vinyl-black);
  padding: 1rem 1.25rem;
  position: sticky;
  box-shadow: 0rem 1px 4px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

header.hide-header {
  transition-delay: 0.2s;
  transform: translateY(-100%);
}

.logo {
  font-family: 'Francois One', Roboto, Arial, 'Helvetica Neue', Helvetica, 'Nimbus Sans L', 'Liberation Sans', 'FreeSans', 'Nimbus Sans', sans-serif-condensed, sans-serif;
  font-stretch: condensed;
  font-weight: normal;
  color: var(--soul-gold);
  word-spacing: 0.1875rem; /* was 3px; */
  text-transform: uppercase;
/*  margin: 0.5rem 0rem 0rem 0.25rem; */
  margin: 0rem 0rem 0rem 0.25rem;
  padding: 0rem;
  display: block;
  white-space: nowrap;
}

.logo a {
  display: inline;
  text-decoration: none;
  color: var(--soul-gold);
  margin: 0rem;
  /* margin-top: 0.05em; */
}

.desktop-nav {
  flex-wrap: wrap;
  justify-content: left;
  margin: 0rem 0.375rem 0rem 0rem;
  gap: 1.5rem;
}

.desktop-nav a {
  margin: 0rem;
  overflow-wrap: normal;
  color: var(--off-white);
  font-family: Acme, 'DIN Alternate', 'Nimbus Sans Narrow', Arial, Helvetica, sans-serif-condensed, sans-serif;
  font-stretch: condensed;
  font-weight: normal;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease, border-bottom 0.2s ease;
  border-bottom: 2px solid transparent;
}

.desktop-nav a:hover {
  color: var(--off-white);
  border-bottom: 2px solid currentColor;
}

.desktop-nav a.active {
  color: var(--soul-gold);
  border-bottom: 2px solid var(--soul-gold);
}

.menu-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* DEFAULT TO SMALLER HEADER FOR NON-JS USERS */
header {
  height: auto;
}
.logo {
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: 0.0625rem; /* was 1px */
}
.tagline {
  display: none; /* always hidden for non-JS users */
}
.menu-toggle { /* always hidden for non-JS users */
  display: none;
}
.desktop-nav { /* always visible for non-JS users */
  display: flex;
}
.desktop-nav a {
  font-size: 1rem;
}

/* NOW OVERRIDE THE ABOVE FOR JS USERS */
/* Use min-height instead of height to handle browsers that force font-only zoom */
.js #body-child header {
  min-height: var(--local-navbar-height);
}

.js .logo {
  font-size: 3.2rem;
  line-height: 1;
  letter-spacing: 0.125rem; /* was 2px; */
}
.js .tagline {
  /* style tagline for JS users even though it's hidden by default */
  font-family: 'Sofia Sans Extra Condensed', Bahnschrift, 'DIN Alternate', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
  font-stretch: condensed;
  font-weight: normal;
  font-size: 1.1rem;
  color: var(--off-white);
  letter-spacing: 0.0652rem; /* 1px; */
  word-spacing: 0.0652rem; /* 1px; */
  max-width: 15.5rem; /* was 19.5rem */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* margin: 0.425em 0em 0em 0em; */
  margin: 0.25em 0em 0em 0em;
  display: none;
}
.js .menu-toggle {
  display: block; /* visible by default for JS users */
  background: none;
  margin-left: auto;
  border: none;
  color: white;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0rem 0.5rem;
}
.js .desktop-nav {
  /* hidden by default for JS users */
  display: none;
}
.js .desktop-nav a {
  font-size: 1.1rem;
}

.menu-toggle .icon {
  font-family: 'Cutive Mono', 'Courier New', 'Nimbus Mono PS', monospace;
  transition: opacity 0.2s ease;
  font-size: 2rem;
  line-height: 0.75;
}

.menu-toggle .icon-open {
  font-size: 2rem;
  line-height: 0.75;
}

.menu-toggle .icon-close {
  font-size: 3rem; /* larger than the open icon */
  line-height: 0.9;
  display: none;
}

.menu-toggle.open .icon-close {
  display: inline;
}

.menu-toggle.open .icon-open {
  display: none;
}


/* === OVERLAY MENU === */
#overlay-menu {
  position: fixed;
  top: 0rem;
  left: 0rem;
  right: 0rem;
  bottom: 0rem;
  display: none;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  background: rgba(17, 17, 17, 0.98);
  z-index: 99;
  padding: 0rem;
}

.overlay-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 2.75vh 0rem; /* Fallback for older browsers */
  padding: 2.75svh 0rem;
  flex-grow: 1;
}

.overlay-inner ul {
  margin-top: auto;
  margin-bottom: auto;
}

#overlay-menu.open {
  display: flex;
}

#overlay-menu ul {
  list-style: none;
  padding: 0rem;
  margin: 0rem;
  text-align: center;
}

#overlay-menu a {
  /* Fallbacks for older browsers */
  font-size: calc((100vh - 4.1875rem) / 18);
  line-height: calc((100vh - 4.1875rem) / 8);


/*  font-size: clamp(1rem, calc((100svh - var(--local-navbar-height)) / 18), clamp(0.9rem, calc(100svw / 5), 1.4rem));
  line-height: clamp(1.6em, calc((100svh - var(--local-navbar-height)) / 9), 2.1em) */
  font-size: var(--local-h3-font-size);
  line-height: 2.3;

  font-weight: bold;
  color: var(--off-white);
  text-decoration: none;
  overflow-wrap: normal;

  transition: color 0.2s ease, border-bottom 0.2s ease;
  border-bottom: 2px solid transparent;
}

#overlay-menu a:hover {
  color: var(--off-white);
  border-bottom: 2px solid currentColor;
}

#overlay-menu a.active {
  color: var(--soul-gold);
  border-bottom: 2px solid var(--soul-gold);
}

/* === CONTENT & TYPOGRAPHY === */

.main-content {
  container-type: inline-size;
  container-name: content-container;

  /* Fallback value for legacy browsers */
  max-width: 800px;
  max-width: var(--book-width);

  padding: 1rem min(16px, 1rem);
  margin: 0rem auto;
}

.main-content h1 {
  /* Fallback value for legacy browsers */
  font-size: 2.5rem;
  font-size: var(--local-h1-font-size);

  line-height: 1.25;
  margin: 0.25rem 0rem 1rem 0rem;
  text-align: center;
  font-family: Acme, Bahnschrift, 'DIN Alternate', 'Nimbus Sans Narrow', Arial, Helvetica, sans-serif-condensed, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  word-spacing: 0.3em;
  text-wrap: balance;
  font-weight: 700;
  word-break: normal;

  font-synthesis: weight; /* shouldn't be necessary */

}

.main-content .byline {
  font-style: italic;
  font-size: var(--local-body-font-size);
  color: #666;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

.main-content h2 {

  /* margin: 1.25rem 0rem 1.25rem 0rem; */
  margin: 1em 0rem 0rem 0rem;
  
  /* font-weight: bold; */
  font-weight: 500;

  font-size: var(--local-h2-font-size);
  word-spacing: 0.175em;
  line-height: 1.3;
  color: var(--funk-red);
  text-wrap: pretty;
  hyphens: auto;
  overflow: visible;

  /* New experimental feature (not yet supported by Safari or Firefox)
  that works well with English despite claims it only works with Japanese */
  word-break: auto-phrase;
}

.main-content h3 {
  font-size: var(--local-h3-font-size);
  line-height: 1.25;
  margin: 1.25rem 0rem;
  hyphens: auto;
  text-wrap: balance;
}

.main-content p {
  font-size: var(--local-body-font-size);
  margin: 1.5em 0rem;
  text-align: left;
  hyphens: auto;
  overflow-wrap: anywhere; /* is this necessary??? */
}

.main-content .intro-paragraph {
  text-wrap: pretty;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 2rem;
  font-size: var(--local-intro-font-size);
}

.main-content blockquote {
  display: block;
  background: var(--corner-cream);
  border-left: 4px solid var(--funk-red);
  padding: 1rem;
  font-style: italic;
  font-size: var(--local-quotation-font-size);
  font-weight: 500;
  margin: 1.5rem 2rem 0rem 2rem;
  text-align: left;
  text-wrap: pretty;
  hyphens: auto;
}

.main-content .list-intro {
  margin-bottom: 1.5rem;
}

.main-content .link {
  text-align: left;
}

.section-label {
  font-size: var(--local-section-font-size);
  color: #777;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  text-align: center;
  line-height: 1.5;
}

.main-content .external-links {
  display: flex;
  flex-direction: row;
  padding: 0px;
  margin: 0rem;
  gap: clamp(0rem, 5svw, 1rem);
  flex-wrap: nowrap;
}

.main-content .external-links .link-container {

  container-type: inline-size;
  container-name: link-container;

  flex: 1 1 auto;
  padding: 0rem;
  margin: 0rem;

  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;

}

.main-content .external-links a {
  display: block;
  text-align: center;
  margin: 0rem;

  height: 3.5rem;
  line-height: 3.5rem;
  padding: 0rem 1.5rem;

  box-shadow: 0rem 2px 6px rgba(0,0,0,0.25);
  background: var(--off-white);
  border-radius: 1rem;

  color: inherit;
  font-size: var(--local-link-box-font-size);
  text-decoration: none;
  white-space: preserve wrap;
  word-break: normal;
  overflow-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;

  flex: 1 1 fit-content;
}

.main-content .external-links a img {
  height: var(--local-link-box-font-size);
  width: var(--local-link-box-font-size);

  /* Seem to need margin-bottom to centre Instagram logo */
  margin: 0rem 0rem 0.25rem 0rem;

  padding: 0rem;
  vertical-align: middle;
  object-fit: cover;
}

.main-content .external-links .link-container a:hover {
/*  box-shadow: 0rem 2px 6px rgba(0,0,0,0.25); */
/*  background: #f5f0e5; */
  box-shadow: 0rem 1px 4px rgba(0,0,0,0.125);
  background: var(--corner-cream);
  color: black;
  cursor: pointer;
}

.main-content ul {
  list-style: none; /* hides default bullet */
  margin: 0rem;
  padding: 0rem; /* 2.5rem seems to be Chrome's default */
  font-size: var(--local-body-font-size);
  hyphens: auto;
}

.main-content li {
  margin: 0rem;
  padding: 0rem;
}

/* === CV highlights list styles === */

.main-content .highlight-list {
  list-style: none;
  padding: 0.5rem 1.75rem 1.25rem 1.75rem; /* Fallback for older browsers */
  padding: 0.5rem clamp(0rem, 1.75rem, 3svw) 1.25rem;
  margin: 0rem;
  background-color: var(--off-white);
  border-left: 4px solid var(--funk-red);
  box-shadow: 0rem 1px 4px rgba(0,0,0,0.125);
  clear: both; /* clear any floats (e.g. figures) */
}
.main-content .highlight-list li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.1rem;
  text-align: left;
  font-size: var(--local-footer-font-size);
  margin: 1rem 0rem;
}
.main-content .highlight-list li .year {
  min-width: 3.5rem;
  flex: 1 11.5 7.9%; /* changed from 3.75rem; */
  font-weight: bold;
  text-align: left;
  padding: 0rem;
  white-space: nowrap;
  overflow-wrap: normal;
  hyphens: none;
  margin: 0rem;
}
.main-content .highlight-list li .highlight-text {
  flex: 11.5 1 90%; /* changed from 43.125rem; */
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  hyphens: auto;
  text-wrap: pretty;
}

/* === Container queries for content-container === */

/* @container content-container (width: 39rem) { */
@container content-container (width: 50rem) {
  /* Only make body text fully justified if page is wide enough */
  .main-content p {
    text-align: justify;
    text-justify: inter-word;
  }
}

/* === Container queries for body-container === */
/* ===
       NB. These are used as a "workaround" because
        container queries correctly support rem units,
        while media queries do not recognise scaled rems.
=== */


/* This query is for JS users - it shows desktop nav menu and tagline when screen is large enough */
@container body-container (min-width: 53.5rem) and (min-height: 13.501rem) {
  .js .desktop-nav {
    display: flex;
  }
  .js .tagline {
    display: block;
  }
  .js .menu-toggle {
    display: none; /* only hide hamburger menu when desktop menu is visible */
  }
  /* Just in case a user resizes the viewport while the overlay menu is open */
  #overlay-menu {
    display: none !important;
  }
}

@container body-container (max-width: 53.499rem) {
  .js .desktop-nav {
    display: none;
  }
  .js .menu-toggle {
    display: block;
  }
  .js .tagline {
    display: block;
  }
}

@container body-container (max-width: 36.5rem) {
  .logo {
    display: none;
  }
  .js .logo {
    display: block;
  }
}

@container body-container (max-width: 31.5rem) or (max-height: 31.5rem) {
  #body-child {
    --local-navbar-height: 5rem;
    --local-h2-font-size: 1.5rem;
    --local-h3-font-size: 1.2rem;
  }
  .js .logo {
    font-size: 2rem;
    line-height: 1.5;
  }
  .menu-toggle {
    font-size: 1.375rem;
  }
  .menu-toggle .icon-open {
    font-size: 1.375rem;
  }
  .menu-toggle .icon-close {
    font-size: 2.4375rem;
    display: none;
  }
  .js .tagline {
    display: none;
  }
}

@container body-container (max-width: 25rem) {
  .main-content .highlight-list {
    padding: 0.25rem 0.5rem 0.75rem 0.5rem;
  }
  .main-content .highlight-list li .year {
    min-width: 3rem;
    flex: 1 5 16%; /* changed from 3.5rem; */
    font-weight: normal;
    padding-left: 0rem;
  }
  .main-content .highlight-list li .highlight-text {
    flex: 5 1 79%; /* changed from 17.5rem; */
  }
  .main-content blockquote {
    margin: 1rem 20px 0rem 20px;
  }
}

@container body-container (max-width: 21.25rem) {
  .main-content blockquote {
    margin: 1rem 0rem 0rem 0rem;
  }
}

@container body-container (max-width: 20.5rem) or (max-height: 31.5rem) {
  header {
    position: static;
  }
  .js #body-child header {
    position: sticky;
  }
}

@container body-container (max-width: 20.5rem) or (max-height: 20.5rem) {
  #body-child {
    --local-navbar-height: 3.75rem;
  }
  .main-content {
    padding: 1rem min(8px, 0.5rem);
  }
  .js .logo {
    font-size: 1.75rem;
    letter-spacing: 1px;
    line-height: 1.2;
  }
  .js .desktop-nav a {
    font-size: 1rem;
  }
  .js .menu-toggle {
    font-size: 1.25rem;
  }
  .js #body-child header {
    padding: 0.375rem 1rem;
  }
  .menu-toggle .icon-open {
    font-size: 1.25rem;
  }
  .menu-toggle .icon-close {
    font-size: 2rem;
    display: none;
  }
}

@container body-container (max-width: 14.75rem) {
  #body-child {
    --local-h2-font-size: 1.3rem;
    --local-h3-font-size: 1rem;
    --local-section-font-size: 0.75rem;
    --local-link-box-font-size: 0.9rem;
    --local-quotation-font-size: 1.05rem;
    --local-caption-font-size: 0.95rem;
  }
  footer {
    padding: 1rem 8px;
    overflow-wrap: normal;
  }
  .section-label {
    letter-spacing: 0px;
    margin-bottom: 0.85rem;
    margin-top: 0.25rem;
  }

  .main-content .highlight-list {
    padding: 0rem;
    border-left: 0rem;
    background-color: transparent;
    box-shadow: 0rem 0px 0px transparent;
  }
  .main-content .highlight-list li {
    flex-direction: column;
    gap: 0.5rem;
  }
  .main-content .highlight-list li .year {
    flex: 1 1 auto;
    font-weight: bold; /* Make bold again */
  }
  .main-content .highlight-list li .highlight-text {
    flex: 1 1 auto;
  }
}

@container body-container (max-height: 13.5rem) {
  .js .desktop-nav {
    display: none;
  }
  .js .menu-toggle {
    display: block;
  }
}

@container body-container (max-width: 13.5rem) or (max-height: 13.5rem) {
  #body-child {
/*    --local-navbar-height: 2.5rem; */
    --local-navbar-height: 40px; /* switch to pixels! */
    --local-h1-font-size: clamp(0.975rem, 15svw, 2rem);
    --local-h2-font-size: 1.1rem;
    --local-body-font-size: 0.95rem;
    --local-footer-font-size: 0.9rem;
    --local-caption-font-size: 0.9rem;

    --local-intro-font-size: 0.95rem;

  }
  .main-content h1 {
    letter-spacing: normal;
  }
  .footer-phrase {
    white-space: normal !important;
  }
 .logo, .js .logo {
    display: none;
  }
  .js .tagline {
    display: none;
  }
  .js .menu-toggle {
    /* This causes the toggle to be centred
    (as we already set "margin-left: auto;") */
    margin-right: auto;
  /* switch to pixels! */
    font-size: 18px;
    line-height: 22px;
    padding: 0px 2px;
  }
  .menu-toggle .icon-open {
    font-size: 18px;
    line-height: 22px;
/*    padding: 0px 1px; */
  }
  .menu-toggle .icon-close {
    font-size: 32px;
    display: none;
    line-height: 22px;
  }

  .js .logo, .js .logo a {
    display: block;
  }
  .js .tagline {
    display: inline;
  }
  .js .logo, .js .logo a, .js .tagline {
    font-family: 'Sofia Sans Extra Condensed', Bahnschrift, 'DIN Alternate', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
    font-size: 1.3125rem;
    margin: 0rem;
    padding: 0rem;
    line-height: 1;
  }
  .js .menu-toggle {
    margin-right: 0rem;
  }
}

@container body-container (max-width: 13.5rem) or ((max-width: 26.6875rem) and (max-height: 13.5rem)) {
  .city, .tag-bullet {
    display: none;
  }
}

@container body-container (max-width: 13.5rem) or ((max-width: 22.25rem) and (max-height: 13.5rem)) {
  .city {
    display: inline;
  }
  .event, .tag-bullet {
    display: none;
  }
  .js #body-child header, #body-child header {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

@container body-container (max-width: 13.5rem) or ((max-width: 11.25rem) and (max-height: 13.5rem)) {
  .city, .tag-bullet {
    display: none;
  }
}

@container body-container (max-width: 11.75rem) {
  .nonbreakinghyphen {
    white-space: normal !important;
  }
  .nobr {
    white-space: normal !important;
  }
  .main-content blockquote {
    padding: 0rem;
    border-left: none;
    background: transparent;
  }
}

/* Shouldn't need this when using pixels */
/* @container body-container (max-height: 11.25rem) {
  #body-child {
    --local-navbar-height: 1.875rem;
  }
  .js .menu-toggle {
    font-size: 1.1rem;
  }
  .menu-toggle .icon-open {
    font-size: 1rem;
  }
  .menu-toggle .icon-close {
    font-size: 1.4rem;
    display: none;
  }
} */

@container body-container (max-width: 10.625rem) {
  /* reconfigure the desktop menu layout */
  .desktop-nav {
    margin: 0rem;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }
  .desktop-nav a {
    font-size: 17.5vw; /* Fallback for older browsers */
    font-size: clamp(0.5rem, 17.5svw, 0.85rem);

    line-height: 1.05;
    justify-content: center;
    margin: 0rem;
  }
  #body-child header {
    padding: 0.5rem 0rem;
  }
}

@container body-container (max-width: 10.5rem) or (max-height: 10.5rem) {
  #body-child {
    --local-h2-font-size: 1rem;
    --local-h3-font-size: 0.9rem;
    --local-body-font-size: 0.825rem;
    --local-quotation-font-size: 0.825rem;
    --local-footer-font-size: 0.75rem;
    --local-caption-font-size: 0.825rem;
  }
  .main-content p, footer p {
    letter-spacing: normal;
  }
  footer {
    text-wrap: wrap;
  }
}

@container body-container (max-width: 8.5rem) {
  .main-content {
    padding: 0.5rem min(2px, 0.125rem);
  }
  footer {
    padding: 1rem min(2px, 0.125rem);
  }
}

@container body-container (max-width: 7.5rem) {
  #body-child {
    --local-h2-font-size: 0.875rem;
    --local-h3-font-size: 0.825rem;
  }
  .brand-name, .brand-ending-sentence {
    white-space: normal !important;
  }
  .section-label {
    margin-bottom: 0.75rem;
    margin-top: 0.1rem;
  }
  .desktop-nav a {
    text-transform: none;
  }
  .logo, .js .logo {
    display: none;
  }
  .js .menu-toggle {
    /* This causes the toggle to be centred
    (as we already set "margin-left: auto;") */
    margin-right: auto;
  }
}

/* === Container queries for link-container === */

@container link-container (max-width: 20rem) {
  .booking-text {
    display: none;
  }
}

@container link-container (max-width: 10.625rem) { /* changed from 9.125rem */
  .enquiries-text {
    display: none;
  }
  .main-content .external-links a,
  .main-content .external-links .link-container a {
    border: 1px;
    border-radius: 50%;
    white-space: collapse !important;
    max-width: 3.5rem;
    padding: 0rem;
  }
}

@container link-container (max-width: 5rem) { /* changed from 3.325rem */
  .main-content .external-links a,
  .main-content .external-links .link-container a {
    box-shadow: 0rem 2px 6px transparent;
    background: transparent;
    border: none;
    border-radius: 0%;
    height: min-content;
    line-height: 1.5;
  }
  .main-content .external-links {
      padding-top: 0rem;
      padding-bottom: 0rem;
  }
  .main-content .external-links .link-container a:hover {
    box-shadow: 0rem 2px 6px transparent;
    background: transparent;
  }
  .main-content .external-links a img {
    margin: 0rem;
  }
}