/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
}

body {
  width: 100% !important;
  /* Use the most accurate viewport units first */
  height: 100svh;
  min-height: 100svh;
  /* Fallbacks for older browsers */
  height: 100dvh;
  min-height: 100dvh;
  height: 100vh;
  min-height: -webkit-fill-available;
  min-height: fill-available;
  overflow-x: hidden;
  border: 2px solid #4199f7;
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  -webkit-flex-direction: row;
     -ms-flex-direction: row;
  padding: 0;
  gap: 10px;
  -webkit-gap: 10px;
     -moz-gap: 10px;
  margin: 0;
  padding-right: 3px;
  padding-bottom: 3px;
  align-items: stretch;
  -webkit-align-items: stretch;
     -ms-flex-align: stretch;
}

img {
  /* max-width: 300px; */
  width: 100%;
  object-fit: contain;
  -o-object-fit: contain;
  display: block;
}

/* Left column */
.left_frame {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  -webkit-flex-direction: column;
     -ms-flex-direction: column;
  justify-content: space-between;
  -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
  align-items: stretch;
  -webkit-align-items: stretch;
     -ms-flex-align: stretch;
  min-height: 0;
  gap: 10px;
  -webkit-gap: 10px;
     -moz-gap: 10px;
  padding: 10px;
  align-self: stretch;
  -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
  height: 100%;
  border: 1px solid #4199f7;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  max-width: 25%;
  order: 1;
  -webkit-order: 1;
     -ms-flex-order: 1;
}

/* Middle column */
.middle_frame {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  -webkit-flex-direction: column;
     -ms-flex-direction: column;
  justify-content: space-between;
  -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
  align-items: stretch;
  -webkit-align-items: stretch;
     -ms-flex-align: stretch;
  min-height: 0;
  width: 20%;
  align-self: stretch;
  -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
  height: 100%;
  border: 1px solid #4199f7;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  overflow-y: scroll;
  order: 2;
  -webkit-order: 2;
     -ms-flex-order: 2;
}

/* Right column */
.right_frame {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  -webkit-flex-direction: column;
     -ms-flex-direction: column;
  gap: 10px;
  -webkit-gap: 10px;
     -moz-gap: 10px;
  padding: 10px;
  border: 1px solid #4199f7;
  width: 40%;
  height: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  overflow-y: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  order: 3;
  -webkit-order: 3;
     -ms-flex-order: 3;
  /* max-width: 25%; */
}

/* Extra right column */
.extra_right_frame {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  -webkit-flex-direction: column;
     -ms-flex-direction: column;
  align-items: stretch;
  -webkit-align-items: stretch;
     -ms-flex-align: stretch;
  min-height: 0;
  gap: 10px;
  -webkit-gap: 10px;
     -moz-gap: 10px;
  padding: 10px;
  padding-right: 0px;
  align-self: stretch;
  -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
  height: 100%;
  border: 1px solid #4199f7;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  max-width: 20%;
  order: 4;
  -webkit-order: 4;
     -ms-flex-order: 4;
  background: #fff;
  overflow-y: auto;
}




.right_frame img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  -o-object-fit: contain;
  display: block;
}

/* Ensure embedded videos/iframes fill their container responsively */
#right_images iframe,
#right_images embed,
#right_images object,
#right_images video,
.right_frame iframe,
.right_frame embed,
.right_frame object,
.right_frame video,
#mobile_right_images iframe,
#mobile_right_images embed,
#mobile_right_images object,
#mobile_right_images video {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  border: none;
}

.main_text {
  flex-grow: 0;
  width: max-content;
  /* flex-shrink: 1; */
  flex-basis: auto;
  font-family: 'Times New Roman', serif;
  font-weight: normal;
  font-size: clamp(1em, 2vw, 2vw);
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-7-20-25);
}

.main_text[data-project]:hover,
.main_text[data-project].selected {
  color: #4199f7;
  cursor: pointer;
}

/* Bookshelf section headings with dashed underlines */
.border_dashed .main_text {
  position: relative;
  width: 100%;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.border_dashed .main_text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    #4199f7 0px,
    #4199f7 4px,
    transparent 4px,
    transparent 8px
  );
}

.descriptions {
  font-family: 'Times New Roman', serif;
  font-weight: normal;
  font-size: clamp(1em, 2vw, 2vw);
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-7-20-25);
  width: 100%;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  text-align: justify;
}

.artistic_description {
  margin-top: 8px;
  font-style: italic;
  color: rgba(0,0,0,0.85);
  font-size: clamp(0.9em, 1.8vw, 1.1em);
  line-height: 1.4;
}

.project_notes {
  margin-top: 6px;
  font-size: clamp(0.8em, 1.5vw, 0.95em);
  color: rgba(0,0,0,0.6);
  opacity: 0.95;
}

.materials {
  display: block;
  font-family: 'Cutive Mono', monospace;
  font-size: clamp(0.85em, 1.6vw, 1em);
  color: #4199f7;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.nametag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 100;
  display: inline-block;
  flex-grow: 0;
  -webkit-flex-grow: 0;
     -ms-flex-positive: 0;
  flex-shrink: 1;
  -webkit-flex-shrink: 1;
     -ms-flex-negative: 1;
  white-space: nowrap;
  font-family: 'Pinyon Script';
  font-weight: normal;
  font-size: 11vw;
  text-decoration: none;
  text-transform: none;
  text-align: justify;
  color: #fff;
  filter: drop-shadow(0px 4px 0px #4199f7);
  -webkit-filter: drop-shadow(0px 4px 0px #4199f7);
  padding-left: 50px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin-bottom: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  overflow: hidden;
  pointer-events: none;
  /* Allow scroll and pointer events to pass through */
}

.nametag span {
  pointer-events: auto;
  /* Only the text is clickable/selectable */
  cursor: pointer;
}

#description_link a,
#two-cats-link,
#one-band-link,
#radio-show-link {
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(1em, 2vw, 2vw);
  color: #4199f7;
  text-decoration: underline;
  display: inline;
  margin: 10px 0;
  cursor: pointer;
  line-height: 1.4;
  vertical-align: middle;
  transition: color 0.2s;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

#description_link a:hover,
.description-link:hover,
#two-cats-link:hover,
#one-band-link:hover,
#radio-show-link:hover {
  color: #000;
}

.description-link {
  font-family: 'Pinyon Script', cursive;
  font-size: 1em;
  color: #4199f7;
  text-decoration: underline;
  display: inline;
  margin: 10px 0;
  cursor: pointer;
  line-height: 1.4;
  vertical-align: middle;
  transition: color 0.2s;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

.description-link:hover{
  color: #000;

}

.bookshelf-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Ensure bookshelf containers work in both desktop and mobile layouts */
@media (max-width: 900px) {
  /* Under 900px we want the two bookshelf panels side-by-side */
  .bookshelf-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    /* stretch children so they get equal height */
    align-items: stretch;
    width: 100%;
  }

  /* Let each dashed block share available space and be responsive */
  .bookshelf-container .border_dashed {
    flex: 1 1 0;
    /* make each panel a column flex so inner content can stretch vertically */
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  /* Allow the table to take remaining vertical space inside the panel */
  .bookshelf-container .bookshelf-table {
    width: 100%;
    table-layout: fixed;
    /* let the table grow to fill the panel's height */
    flex: 1 1 auto;
    display: block;
    overflow: auto;
  }

  .bookshelf-container .book-cover img {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 600px) {
  .bookshelf-container {
    flex-direction: row !important;
    gap: 10px !important;
    /* keep equal-height stretching on very small screens as well */
    align-items: stretch !important;
    width: 100% !important;
  }

  .bookshelf-container .border_dashed {
    flex: 1 1 0 !important;
    /* keep panels as column flex so they stretch vertically */
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .bookshelf-container .bookshelf-table {
    width: 100% !important;
    table-layout: fixed !important;
    /* allow table to grow and scroll inside the panel */
    flex: 1 1 auto !important;
    display: block !important;
    overflow: auto !important;
  }

  .bookshelf-container .book-cover img {
    max-width: 100% !important;
    height: auto !important;
  }
}

.border_dashed {
  display: inline-block;
  /* Shrink to fit content */
  background-image: repeating-linear-gradient(0deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px), repeating-linear-gradient(90deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px), repeating-linear-gradient(180deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px), repeating-linear-gradient(270deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px);
  background-size: 1px calc(100% + 9px), calc(100% + 9px) 1px, 1px calc(100% + 9px), calc(100% + 9px) 1px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  padding: 10px;
  /* animation: borderAnimation 1s infinite linear; */
}

.contact {
  display: inline-block;
  /* Shrink to fit content */
  background-image: repeating-linear-gradient(0deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px), repeating-linear-gradient(90deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px), repeating-linear-gradient(180deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px), repeating-linear-gradient(270deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px);
  background-size: 1px calc(100% + 9px), calc(100% + 9px) 1px, 1px calc(100% + 9px), calc(100% + 9px) 1px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  /* animation: borderAnimation 1s infinite linear; */
  padding: 10px;
  overflow-x: scroll;
  overflow-y: hidden;
  padding-bottom: 20px;
}

.projects {
  display: inline-block;
  background-image: repeating-linear-gradient(0deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px), repeating-linear-gradient(90deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px), repeating-linear-gradient(180deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px), repeating-linear-gradient(270deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px);
  background-size: 1px calc(100% + 9px), calc(100% + 9px) 1px, 1px calc(100% + 9px), calc(100% + 9px) 1px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
  padding: 10px;
  /* Ensure the project list visually sits above the nametag when they overlap */
  position: relative;
  z-index: 200;
  /* animation: borderAnimation 1s infinite linear; */
  max-height: 100%;
  /* Limit height to parent */
  overflow-y: auto;
  /* Enable vertical scroll if needed */
  width: 100%;
  /* Take full width of parent */
  height: 100%;
  /* box-sizing: border-box; */
}

.projects .main_text::after,
.mobile-projects .main_text::after {
  content: " ©";
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  opacity: 1;
}

.contact .main_text::after,
.mobile-contact .main_text::after {
  content: " ©";
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  opacity: 1;
}

#cats-img-toggle {
  position: fixed;
  right: 20vw;
  width: 40vw;
  height: 100vw;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
  -o-object-fit: contain;
  background: transparent;
  z-index: 2000;
  cursor: pointer;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* Bookshelf section and label styles */
.bookshelf-section {
  margin-bottom: 22px;
}
.bookshelf-label {
  font-family: 'Anton', Arial, sans-serif;
  font-size: 1.1em;
  color: #4199f7;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* Bookshelf table styles */
.bookshelf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  margin-top: 0px;
}
.book-cover {
  width: 56px;
  min-width: 48px;
  vertical-align: top;
}
.book-cover img {
  width: 48px;
  height: 68px;
  object-fit: cover;
  border-radius: 4px;
  background: #eaf3fb;
}
.book-desc {
  padding-left: 6px;
  font-size: 0.98em;
  color: #000;
  font-family: 'Times New Roman', serif;
  vertical-align: middle;
}
.accordion-btn.selected {
  color: #4199f7;
  
}

.accordion-content {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
  -webkit-flex-direction: column;
     -ms-flex-direction: column;
  min-height: 0;
  gap: 10px;
  -webkit-gap: 10px;
     -moz-gap: 10px;
  /* padding: 10px;
  border: 1px solid #4199f7; */
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  flex: 1;
  overflow-y: auto;
  width: 100%;
}
/* Styles for the extra right column list */
.extra-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.extra-list-title {
  /* Match .main_text styles */
  flex-grow: 0;
  width: max-content;
  font-family: 'Times New Roman', serif;
  font-weight: normal;
  font-size: clamp(1em, 2.5vw, 2.5vw);
  text-decoration: none;
  text-transform: none;
  color: var(--text-rgb-7-20-25);
  cursor: pointer;
  transition: color 0.2s;
}

.extra-list-title:hover,
.extra-list-title.selected {
  color: #4199f7;
}

.astrid-webring {
width: 100%;
justify-content: center;
}

@keyframes borderAnimation {
  from {
    background-position: 0 0, -9px 0, 100% -9px, 0 100%;
  }

  to {
    background-position: 0 -9px, 0 0, 100% 0, -9px 100%;
  }
}

@media (max-width: 900px) {
  /* .left_frame, .right_frame, .extra_right_frame {
    max-width: 100%;
    width: 100%;
  }
  .middle_frame {
    width: 100%;
    max-width: 100%;
  }
  .extra_right_frame {
    order: 4;
  } */
}

/* Allow wrapping on small screens */
@media (max-width: 900px) {
  .nametag {
    /* white-space: normal; */
    /* overflow-wrap: break-word; */
    text-align: right;
    padding-left: 50%;
    padding-right: 7%;
    width: 100%;
    top: 30px;  
    line-height: 80%;
  }

  /* Hide original desktop frames on mobile */
  .left_frame, .middle_frame, .right_frame, .extra_right_frame {
    display: none !important;
  }

  body {
    flex-direction: column;
    -webkit-flex-direction: column;
       -ms-flex-direction: column;
    height: 100%;
    min-height: -webkit-fill-available;
    padding: 3px;
        gap: 10px;
  }

  /* Container for contact, projects and middle frame - 90% of screen */
  .mobile-contact,
  .mobile-main-row,
  .mobile-middle {
    flex-shrink: 0;
  }


  /* Mobile contact at top - horizontal */
  .mobile-contact {
    display: inline-block;
    /* Shrink to fit content */
    background-image: repeating-linear-gradient(0deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px), repeating-linear-gradient(90deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px), repeating-linear-gradient(180deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px), repeating-linear-gradient(270deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px);
    background-size: 1px calc(100% + 9px), calc(100% + 9px) 1px, 1px calc(100% + 9px), calc(100% + 9px) 1px;
    background-position: 0 0, 0 0, 100% 0, 0 100%;
    background-repeat: no-repeat;
    padding: 10px;
    overflow: visible;
    height: auto;
    min-height: fit-content;
    flex-shrink: 0;
  }

  /* Mobile projects and right frame row */
  .mobile-main-row {
    display: flex;
    order: 2;
    width: 100%;
    gap: 10px;
    min-height: 0;
    height: 60vh;
  }

  .mobile-projects {
    display: flex;
    flex-direction: column;
    width: 25vw;
    min-width: 25vw;
    max-width: 25vw;
    flex-shrink: 0;
    flex-grow: 0;
    background-image: repeating-linear-gradient(0deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px), repeating-linear-gradient(90deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px), repeating-linear-gradient(180deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px), repeating-linear-gradient(270deg, #4299f7, #4299f7 5px, transparent 5px, transparent 9px, #4299f7 9px);
    background-size: 1px calc(100% + 9px), calc(100% + 9px) 1px, 1px calc(100% + 9px), calc(100% + 9px) 1px;
    background-position: 0 0, 0 0, 100% 0, 0 100%;
    background-repeat: no-repeat;
    padding: 10px;
    overflow-y: auto;
    position: relative;
    /* Lower z-index so the ruler overlay (z-index:9..11) sits above mobile projects */
    z-index: 8;
    height: 100%;
  }

  .mobile-right {
    display: flex;
    flex-direction: row;
    width: 100%;
    border: 1px solid #4199f7;
    padding: 10px;
    gap: 10px;
    overflow-y: auto;
    height: 100%;
  }

  /* Mobile middle frame ribbon */
  .mobile-middle {
    display: flex;
    order: 3;
    flex-direction: row;
    width: 100%;
    height: 10vh; /* Fixed height */
    border: 1px solid #4199f7;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    flex-shrink: 0;
  }

  #mobile_description_link a,
  .description-link {
    font-family: 'Pinyon Script', cursive;
    font-size: clamp(1em, 2vw, 2vw);
    color: #4199f7;
    text-decoration: underline;
    display: inline;
    margin: 10px 0;
    cursor: pointer;
    line-height: 1.4;
    vertical-align: middle;
    transition: color 0.2s;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
  }

  #mobile_description_link a:hover,
  .description-link:hover {
    color: #000;
  }


  .mobile-middle img {
    height: 60px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
  }

  /* Mobile extra right frame - fills remaining space */
  .mobile-extra {
    display: flex;
    order: 4;
    flex-direction: column;
    width: 100%;
    flex: 1; /* Take remaining space */
    border: 1px solid #4199f7;
    padding: 10px;
    padding-bottom: 0px;
    gap: 10px;
    /* overflow-y: hidden; */
  }

  .vertical_container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 5px;
    overflow-x: hidden;
  }

  /* Ensure embedded content is full width on mobile */
  #mobile_right_images iframe,
  #mobile_right_images embed,
  #mobile_right_images object,
  #mobile_right_images video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    display: block;
    border: none;
  }

  /* @supports (height: 100dvh) {
    body {
      height: 100dvh;
    }
  }
  @supports (height: 100svh) {
    body {
      height: 100svh;
    }
  } */
}

/* Hide mobile layout on desktop */
@media (min-width: 900px) {
  .mobile-contact, .mobile-main-row, .mobile-middle, .mobile-extra {
    display: none !important;
  }
}