/* ==========================================================================
   ETHERPORT STYLESHEET 
   September 2025
   ========================================================================== 
   
   CUSTOMIZATION GUIDE:
   ===================
   
   🎨 COLORS & THEMES:
   - Change colors in the :root section (lines 9-42)
   - Modify --expub-red for accent color
   - Adjust --body-background-color for page background
   - Update --line-color for borders and dividers
   
   📝 TYPOGRAPHY:
   - Modify font sizes in :root variables
   - Change font families for different text styles
   - Adjust line heights for better readability
   
   📐 LAYOUT & SPACING:
   - Modify --margin-* variables for spacing
   - Adjust --sidebar-width for navigation width
   - Change main content width and positioning
   
   🏷️ TAGGING SYSTEM:
   - Customize tag styles in section 10
   - Add new tag types with .tag--yourname
   - Modify tag colors and decorations
   
   🖼️ MULTIMEDIA:
   - Adjust image sizes in main content
   - Modify video component styles
   - Customize figure and caption layouts
   
   📱 RESPONSIVE:
   - Breakpoint is set to 800px
   - Mobile styles in section 16
   - Adjust breakpoint as needed
   
   ========================================================================== */

/* ==========================================================================
   1. CSS VARIABLES & ROOT SETTINGS
   ========================================================================== */

:root {
  /* ===== TYPOGRAPHY VARIABLES ===== */
  --font-size: 21px;                    /* Base font size for body text */
  --line-height: 25px;                  /* Base line height for body text */
  --line-height--h4: 35px;              /* Line height for H4 headings */
  --font-size-small: 17px;              /* Small text size (captions, notes) */
  --header-height: 2;                   /* Header height multiplier */
  --font-size--h1: 28px;                /* Main headline size */
  --font-size--header: 62px;            /* Header navbar font size */
  --line-height--header: 40px;          /* Header navbar line height */
  
  /* ===== FONT FAMILY VARIABLES ===== */
  --body-font: 'Regrade Regular';       /* Main body text font */
  --header-font: 'Regrade Bold';        /* Header text font (unused) */
  --italic-font: 'Regrade Italic';      /* Italic text font */
  --expub-font: 'Mattone Black';      /* Bold/emphasis font */
   --expub-font-small: 'Mattone Bold';      /* Bold/emphasis font */
  
  /* ===== COLOR VARIABLES ===== */
  --link-color--visited: #461704;       /* Visited link color */
  --link-color--hover: #461704;         /* Link hover color */
  --link-background--hover: transparent; /* Link hover background */
  --expub-red: #3cf005;                 /* Main accent color (green) */
  --black: #1a1a1a;                     /* Main text color */
  --line-color: #0044ff;                /* Border and divider color */
  --body-background-color: #EDEDED;     /* Page background color */
  --header-background-color: #000000;   /* Header background color - CHANGE THIS */
  --header-text-color: #FFFFFF;         /* Header text color - CHANGE THIS if needed */
  --index-text-color: #0400ff;          /* Index page text color - CHANGE THIS */
  --internet-blue: #f6b89f;             /* Secondary accent color (unused) */
  --image-border-color: #3cf005;
  
  /* ===== LAYOUT VARIABLES ===== */
  --margin-top: 1vh;                    /* Top margin for elements */
  --margin-left: 1vw;                   /* Left margin for elements */
  --margin-right: 1vw;                  /* Right margin for elements */
  --sidebar-width: 20vw;                /* Width of sidebar navigation */
  --annotationsize: 20vw;               /* Width for annotations */
  
  /* ===== ANIMATION VARIABLES ===== */
  --transition-duration: 0.3s;          /* Default transition duration */
  --hover-blur: 8px;                    /* Blur amount for hover effects */
  --hover-radius: 50px;                 /* Border radius for hover effects */
}

/* ==========================================================================
   2. RESET & BASE STYLES
   ========================================================================== */

* {
  box-sizing: border-box;
}

body, html {
  padding: 0;
  margin: 0;
  font-size: var(--font-size);
  line-height: var(--line-height);  
  font-family: var(--body-font);
  background: var(--body-background-color);
  color: var(--black);
}

body {
  display: grid;
}

/* ==========================================================================
   3. TYPOGRAPHY & HEADINGS
   ========================================================================== */

/* Main Headlines (H1) - Sticky positioned */
h1 {
  font-family: var(--expub-font);
  font-size: var(--font-size--h1);
  line-height: var(--line-height--header);
  margin: 0;
  margin-top: 4vh;
  padding-top: calc(0.5*var(--line-height));
  text-align: center;
  position: -webkit-sticky;
  position: sticky;
  top: calc((2*(var(--line-height--header))) + 12px - 0.9cm);
  width: 100%;
  background-color: var(--body-background-color);
  
  border-bottom: 1px var(--line-color) solid;
  z-index: 2;
  min-height: 40px;  /* ensures background is always tall enough */
}

/* Sub-headlines (H2) - Date & time */
h2 {
  font-family: var(--expub-font);
  font-size: var(--font-size-small);
  margin: calc(2*var(--line-height)) 0 0 0;
  text-align: center;
}

/* Quotes (H3) */
h3 {
  font-family: var(--italic-font);
  font-size: var(--font-size);
  margin-left: 4vw;
  line-height: var(--line-height);
  text-align: left;
}

/* Section Headlines (H4) - Sticky positioned */
h4 {
 font-family: var(--expub-font);
 line-height: var(--line-height--h4);
 font-size: 18px;
 margin: calc(3*var(--line-height)) 0 0 0;
 text-align: center;
position: -webkit-sticky;
 position: sticky;
 top: calc(3*var(--line-height--header) + (0.5*var(--line-height)) + 10px - 0.9cm);
 padding-top: calc(0.3*var(--line-height--header));
 padding-bottom: 12px;
 width: 100%;
 background-color: var(--body-background-color);
 border-bottom: 1px var(--line-color) solid;
 min-height: 60px; 
 z-index: 1;
}

/* Small & Bold Text (H5) - Notes, date & time */
h5 {
  font-family: var(--italic-font);
  font-size: var(--font-size-small);
  margin: 0 0 var(--line-height) 0;
  text-align: center;
}

/* Page Type (H6) - Hidden */
h6 {
  display: none;
}

/* Emphasis */
em {
  font-family: var(--italic-font);
  font-style: normal;
}

/* Bold Text */
b, strong {
  font-family: var(--header-font);
  font-weight: 900;
  color: var(--black);
}

/* ==========================================================================
   4. LINKS & INTERACTIONS
   ========================================================================== */

/* Base Link Styles */
a {
  color: var(--black);
  text-decoration: none;
  background-color: none;
}

/* Paragraph Links */
p a {
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-style: dotted;
  text-decoration-color: var(--expub-red);
}

/* Link Hover Effects */
a:hover {
  color: var(--link-color--hover);
  background-color: var(--link-background--hover);
  text-decoration: none;
  position: relative;
  transition: color var(--transition-duration) ease;
}

/* Hover Halo Effect - Green for regular links */
a:hover::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 40px);
  height: calc(100% + 20px);
  background: radial-gradient(ellipse, rgba(0, 255, 13, 0.3) 0%, rgba(0, 255, 13, 0.15) 40%, transparent 70%);
  filter: blur(var(--hover-blur));
  border-radius: var(--hover-radius);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  animation: halo-fade-in var(--transition-duration) ease forwards;
}

/* Halo Animation */
@keyframes halo-fade-in {
  to {
    opacity: 1;
  }
}

/* Visited Links */
a:visited {
  color: var(--black);
}

/* ==========================================================================
   5. HEADER & NAVIGATION
   ========================================================================== */

/* Main Header Container */
header {
  display: flex;
  vertical-align: baseline;
  margin-bottom: 10vh;
  grid-column-end: span 2;
  position: fixed;
  width: 100%;
  z-index: 100;
}

/* Navbar Link Base Styles */
.navbar--index a, .navbar--print a {
  padding-bottom: 2vh;
  color: var(--header-text-color) !important;
}

/* Hidden Navbar Sections */
.navbar--organisation, .navbar--reports, .navbar--pages {
  display: none;
}

/* Main Index Navbar */
.navbar--index {
  font-family: var(--expub-font);
  font-size: var(--font-size--header);
  line-height: calc(2*(var(--line-height--header)));
  text-decoration: none;
  text-transform: none;
  border-bottom: 1px solid var(--line-color);
  position: fixed;
  top: 0;
  left: 0;
  padding-top: var(--margin-top);
  padding-left: var(--margin-left);
  padding-bottom: 0;
  width: 100vw;
  background: black;
  color: var(--header-text-color);
  box-shadow: 0 10px 10px rgba(0, 68, 255, 0.3);
  z-index: 4;
}

/* Ensure header text color overrides any other styles */
.navbar--index {
  color: var(--header-text-color) !important;
  
}


/* PDF Navbar */
.navbar--print {
  font-family: var(--expub-font);
  font-size: var(--font-size--header);
  line-height: calc(2*(var(--line-height--header)));
  position: fixed;
  top: 0;
  right: 0;
  padding-top: var(--margin-top);
  padding-right: var(--margin-right);
  z-index: 7;
}

/* Chapter Navigation */
.navbar--chapter {
 font-family: var(--expub-font-small); 
  line-height: 18px;
  text-transform: uppercase;
  margin-bottom: 1vh;
}

/* Special Chapter Styles */
.navbar--chapter--conversations, 
.navbar--chapter--timeline, 
.navbar--chapter--colophon {
  font-family: var(--italic-font);
  text-transform: none;
  
}

.navbar--chapter--conversations, 
.navbar--chapter--timeline {
  padding-top: 1vh;
  
}

    
/* ==========================================================================
   6. SIDEBAR NAVIGATION
   ========================================================================== */

/* Main Navigation Container */
nav {
  max-width: 22vw;
  position: fixed;
  top: 3vh;
  left: var(--margin-left);
  padding-top: 10vh;
  overflow-y: scroll;
  overflow-x: hidden;
  font-size: var(--font-size-small);
  
  
  /* Hide scrollbar */
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
}

nav::-webkit-scrollbar {
  display: none;              /* Chrome, Safari, Opera */
}

/* Navigation Lists */
ul {
  flex-direction: column;
}

nav ul {
  list-style-type: none;
  display: flex;
  align-items: baseline;
  padding: 0;
  max-width: 100%;
  flex-wrap: wrap;
  line-height: 20px;
  
}

/* Navigation Labels */
.navbar--labels {
  text-transform: uppercase;
  margin-top: 1vh;
}

.navbar--labels > a {
  display: none;
}

.navbar--labels::before {
  content: 'Categorie';
  color: var(--expub-red);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  cursor: pointer;
}

.navbar--labels--subnav {
  padding-left: 1.5vw;
  text-transform: lowercase;
  font-family: var(--italic-font);
  letter-spacing: 0px;
  list-style: circle;
}

/* ==========================================================================
   7. MAIN CONTENT AREA
   ========================================================================== */

/* Main Content Container */
main {
  max-width: 58vw;
  width: calc(100vw - (var(--sidebar-width) - var(--margin-left) - var(--margin-left)));
  margin: 12vh auto 1vw 25vw;
  line-height: 1.2;
  font-size: var(--font-size);
}

main img{
    width: 96%;
    max-height: 80vh;
    object-fit: contain;
    margin-left: 2%;
    mix-blend-mode: multiply;
    background: var(--offwhite);
    }
    
    main img.framed,
img.framed {
  border: 2px solid #3cf005 !important;
  box-sizing: border-box !important;
}

main figure {
    width: 100%;
    max-height: 80vh;
    margin: 0;
    }

/* ==========================================================================
   8. LABELS & REFERENCES
   ========================================================================== */

/* Label Link Hover Effects - Blue for label links */
[data-link-target-type="label"]:hover {
  color: var(--black);
  background-color: var(--link-background--hover);
  text-decoration: none;
  position: relative;
  transition: color var(--transition-duration) ease;
}

[data-link-target-type="label"]:hover::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 40px);
  height: calc(100% + 20px);
  background: radial-gradient(ellipse, rgba(0, 85, 255, 0.3) 0%, rgba(0, 85, 255, 0.15) 40%, transparent 70%);
  filter: blur(var(--hover-blur));
  border-radius: var(--hover-radius);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  animation: halo-fade-in var(--transition-duration) ease forwards;
}

/* Reference Targets */
[data-link-target-type="label"] .reference--target {
  float: right;
  width: 25ch;
  margin-right: -30ch;
  margin-bottom: 0;
  clear: right;
  text-decoration: none;
  color: var(--expub-red);
  font-size: var(--font-size-small);
  font-family: var(--italic-font);
}

/* Inline Reference Labels */
[data-link-target-type="label"] .reference--label--inline {
  text-decoration: underline wavy var(--expub-red);
  text-decoration-thickness: 1px;
}

/* Direct Link Labels */
[data-link-target-type="label"][data-direct-link] .reference--label,
[data-link-target-type="label"] .reference-label--target .reference-label--target--label {
  display: inline-block;
  background: #efefef;
  padding: .5ch;
  margin-top: -.5ch;
  font-family: var(--expub-font);
}

/* Reference Links with Inline Labels */
a:has(.reference--label--inline) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-style: wavy;
  text-decoration-color: var(--expub-red);
}

/* ==========================================================================
   9. ANNOTATIONS & FOOTNOTES
   ========================================================================== */

/* Annotation Markers */
.annotation[data-type="annotation"]::before {
  content: "*";
  color: var(--expub-red);
  font-size: var(--font-size);
}

.annotation[data-type="annotation"] .annotation--content::before {
  content: "*";
  color: var(--expub-red);
  font-size: var(--font-size-small);
}

.annotation[data-type="annotation"] .annotation--content::after {
  content: "";
  color: var(--expub-red);
  font-size: var(--font-size-small);
}

/* Annotation Authors */
.annotation--author {
  text-transform: uppercase;
  color: var(--expub-red);
  font-family: var(--italic-font);
}

.annotation[data-type="annotation"] .annotation--author::after {
  content: ":";
  color: var(--expub-red);
  font-family: var(--italic-font);
}

/* Main Content Annotations */
main .annotation--content {
  font-size: var(--font-size-small);
  float: right;
  width: 25ch;
  margin-right: -30ch;
  margin-bottom: var(--margin-left);
  clear: both;
  color: var(--expub-red);
}

/* Annotation Links */
.annotation a {
  word-break: break-all;
}

main .annotation a {
  color: var(--expub-red);
  display: inline;
  margin-right: 0px;
  margin-bottom: 0px;
}

/* Reference Annotations */
.annotation[data-type="reference"]::before {
  content: "*";
  color: var(--expub-red);
  font-size: var(--font-size);
}

.annotation[data-type="reference"] .annotation--content::before {
  content: "*";
  color: var(--expub-red);
  font-size: var(--font-size-small);
}

/* Reference Targets */
.reference--target {
  font-size: 20px;
  float: right;
  margin-left: 1vw;
  margin-right: -25vw;
  width: 10vw;
  color: var(--expub-red);
  margin-bottom: 0px;
}

/* Footnotes */
.footnote {
  font-size: var(--font-size-small);
}

.footnote a {
  word-break: break-all;
}

.footnote-ref, .footnote-backref {
  color: var(--expub-red);
  text-decoration: none;
}

.footnote-backref p {
  margin-left: 1vw;
  margin-right: 1vw;
}

/* ==========================================================================
   10. CONTENT TAGS & LABELS
   ========================================================================== */

/* Content Tags - Customize these for your tagging system */
.tag--question {
  font-size: 110%;
  color: green;
}

.tag--important {
  text-decoration-line: underline;
  text-decoration-style: double;
}

.tag--trouble {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

.tag--commentary {
  text-decoration-line: underline wavy var(--expub-red);
  text-decoration-thickness: 1px;
}

.tag--citation {
  background-color: beige;
}

/* Add new tag types here:
.tag--yourname {
  color: your-color;
  text-decoration: your-style;
}
*/

/* Content Labels */
.author {
  text-transform: uppercase;
  color: var(--expub-red);
}

.timecode {
  vertical-align: super;
  font-size: 16px;
  font-family: var(--italic-font);
  color: var(--expub-red);
}

.caption {
  font-family: var(--italic-font);
  font-size: var(--font-size-small);
  text-align: center;
}

/* ==========================================================================
   11. SPECIAL PAGES
   ========================================================================== */

/* Image Slide Show */
   
   #imageModal {
  display: none;
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#imageModal img {
  max-width: 90%;
  max-height: 90%;
}

#imageModal .close, 
#imageModal .prev, 
#imageModal .next {
  position: absolute;
  top: 50%;
  font-size: 2em;
  color: white;
  cursor: pointer;
  user-select: none;
}

#imageModal .close { 
  top: 20px; 
  right: 30px; 
}

#imageModal .prev { 
  left: 30px; 
  transform: translateY(-50%); 
}

#imageModal .next { 
  right: 30px; 
  transform: translateY(-50%); 
}


/* Index Page */

.index {
min-height: 100vh;
  background-color: (237,237,237); /* fallback color */
 background-image:
    //linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2)) /* dark overlay */
       url(https://etherport.org/filer/canonical/1759913355/628/); /* your image */
  background-size: cover; /* makes the image cover the whole container */
  background-position: center; /* centers the image */
  background-repeat: no-repeat; /* prevents tiling */
  color: var(--expub-red);
}

.index main img {
  mix-blend-mode: normal;
  }
  
.index a {
   z-index: 9999;
   
  }
  
  body.index .navbar--index img {
    height: 30px !important;
    width: auto !important;
    }


/* Index page text elements */

.index h1 ,
.index h2,
.index h3,
.index h4,
.index h5,
.index h6,
.index p,
.index a,
.index li,
.index span,
.index div {
  color: var(--index-text-color);
}

.index h1 {
  font-size: var(--font-size--h1);
 background-color: transparent;
 
}

.index a  {
 color: black;
}

.index h4 {
  font-size: var(--font-size--h1);
  line-height: var(--line-height--header);
  margin: 0;
  padding-top: calc(0.5*var(--line-height--header));
  top: calc((2*(var(--line-height--header))) + 11px);
}

.index h5 {
  margin-top: 0vh;
   color: var(--expub-red);
}

/* Label Pages */
.page--label .inline-reference {
  color: var(--expub-red);
}

.link-source {
  font-family: var(--italic-font);
  font-size: var(--font-size-small);
  margin: 0 0 var(--line-height) 0;
  text-align: left;
}

.label--link-count {
  text-transform: uppercase;
  font-size: var(--font-size-small);
  text-align: center;
}

[data-link-marked="true"] .reference--target {
  display: none;
}

ul.label--context-list {
  padding: 0;
  list-style-type: none;
}

ul.label--context-list li {
  margin-bottom: calc(2 * var(--line-height));
}

/* Colophon */
[data-content-model="colophon"], u {
  color: var(--expub-red);
  font-family: var(--italic-font);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

[data-content-model="colophon"], p {
  color: var(--black);
  font-family: var(--body-font);
  text-transform: none;
}

[data-content-model="colophon"] img {
  width: 30%;
  max-height: 10vh;
  object-fit: contain;
  margin-left: 0;
  mix-blend-mode: multiply;
  background: var(--offwhite);
}

/* ==========================================================================
   12. FIGURES & CAPTIONS
   ========================================================================== */

figcaption {
  font-family: var(--italic-font);
  font-size: var(--font-size-small);
  text-align: center;
}

figcaption p {
  margin: 0 1vw 4vh 1vw;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */

footer {
  margin-top: 5vh;
  font-family: var(--expub-font);
}

footer ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  display: flex;
  gap: 1em;
}

footer a {
  text-decoration: none;
}

.footer--content {
  /* Footer content styles */
}

/* ==========================================================================
   14. UTILITY CLASSES
   ========================================================================== */

/* Hidden Elements */
.instruction {
  display: none;
}

.etherport--labels {
  display: none;
}

.object--labels-list--end {
  display: none;
}

/* ==========================================================================
   15. VIDEO COMPONENTS
   ========================================================================== */

.video--wrapper.video--vimeo--wrapper {
  /* Video wrapper styles */
}

.video--thumbnail.video--vimeo--thumbnail {
  /* Video thumbnail for print */
  display: none;
}

.video.video--vimeo {
  /* Video element styles */
}

/* ==========================================================================
   16. MOBILE RESPONSIVE STYLES
   ========================================================================== */

@media only screen and (max-width: 800px) {
  
  /* Mobile Header */
  header {
    position: absolute;
    height: 50%;
  }

  .navbar--index {
    font-size: calc(var(--font-size--header)/2);
    line-height: calc(1*var(--line-height--header));
    width: 100vw;
    text-align: left;
    margin: 0;
  }

  .navbar--print {
    font-size: calc(var(--font-size--header)/2);
    line-height: var(--line-height--header);
    right: 1vw;
    border-bottom: 1px solid var(--line-color);
  }

  /* Mobile Print Button Override */
  header .navbar--print a,
  .navbar--print > a,
  a[href*="print"] {
    color: transparent !important;
    font-size: 0 !important;
  }

  header .navbar--print a::before,
  .navbar--print > a::before,
  a[href*="print"]::before {
    content: 'Pdf' !important;
    color: var(--black) !important;
    font-size: calc(var(--font-size--header)/2) !important;
    font-family: var(--expub-font) !important;

  }

  header a {
    padding-bottom: 2vh;
  }

  /* Mobile Navigation */
  nav {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 98vw;
    width: 98vw;
    margin: 0;
    padding-top: 10vh;
    overflow: visible;
    font-size: var(--font-size);
    text-align: center;
  }

  nav > ul {
    text-align: center;
    display: block;
  }

  .navbar--labels {
    display: none;
  }

  .navbar--chapter {
    line-height: 20px;
    margin-bottom: vh;
  }

  .navbar--chapter--conversations, 
  .navbar--chapter--timeline {
    padding-top: 1vh;
  }

  /* Mobile Main Content */
  main {
    max-width: 100vw;
    width: 100vw;
    margin: 0;
    margin-top: 80vh;
    line-height: 1.3;
    font-size: var(--font-size);
  }

  main p {
    padding-left: 2vw;
    padding-right: 2vw;
  }

  main img {
    width: 98%;
    max-height: 60vh;
    margin-left: 1%;
  }

  main figure {
    width: 98%;
    margin-left: 1%;
    max-height: 60vh;
  }

  /* Mobile Typography */
  h1 {
    top: calc((0.7*(var(--line-height--header))));
    font-size: var(--font-size);
    padding-top: var(--line-height);
    margin-top: 15vh;
  }

  h4 {
    margin-top: 5vh;
    top: calc(2*var(--line-height--header));
    font-size: 12px;
    padding-bottom: 3px;
    height: calc(3.5*var(--line-height));
    display: flex;
    justify-content: center;
    align-items: center;
  }

  h5 {
    margin: 0 1vw 0 1vw;
    text-transform: uppercase;
    color: var(--expub-red);
  }

  [data-content-model="manifesting-expanded-publishing"] h4 {
    top: calc(3*var(--line-height--header));
  }

  /* Mobile Annotations */
  .reference--target {
    display: none;
  }

  main .annotation--content {
    font-size: var(--font-size-small);
    color: var(--expub-red);
    display: block;
    float: none;
    width: 80vw;
    margin: 0 0 0 5vw;
    text-align: center;
  }

  /* Mobile Index & Colophon */
  .index {
    background-image: linear-gradient(#3cf005 20%, #e8ede1 100%);
    background-attachment: scroll;
    height: 80vh;
    
  }

  .index main {
    margin-top: 100vh;
  }

  .index h4 {
    top: calc(1.5*(var(--line-height)) + 9px);
    font-size: var(--font-size);
    padding-bottom: 8px;
    margin: 0;
    display: block;
    height: auto;
  }

  [data-content-model="colophon"] img {
    width: 70%;
    margin: auto;
    padding-top: 5vh;
    display: flex;
    align-items: center;
    max-height: 20vh;
  }

  /* High Specificity Mobile Overrides */
  html body header li.navbar--print a,
  html body li.navbar--print a,
  body header li.navbar--print a {
    font-size: 0 !important;
    color: #ffffff !important;
    text-indent: -9999px !important;
  }

  html body header li.navbar--print a::before,
  html body li.navbar--print a::before,
  body header li.navbar--print a::before {
    content: 'Pdf' !important;
    font-size: var(--font-size--header) !important;
    color: var(--black) !important;
    font-family: var(--expub-font) !important;
    text-indent: 0 !important;
    display: inline !important;
    position: relative !important;
    left: 0 !important;
  }

  /* Mobile Print Button Size Override */
  html body header li.navbar--print a::before,
  html body li.navbar--print a::before,
  body header li.navbar--print a::before {
    font-size: calc(var(--font-size--header)/2) !important;
  }
}



/* ==========================================================================
   END OF STYLESHEET
   ========================================================================== */