/*────────────────────────────────────────
  Monument Grotesk @font-face
────────────────────────────────────────*/
@font-face {
  font-family: 'Monument Grotesk';
  src: url('../assets/fonts/Monument_Grotesk/MonumentGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Monument Grotesk';
  src: url('../assets/fonts/Monument_Grotesk/MonumentGrotesk-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Monument Grotesk';
  src: url('../assets/fonts/Monument_Grotesk/MonumentGrotesk-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*────────────────────────────────────────
  Variables & Reset
────────────────────────────────────────*/
:root {
  --font:         'Monument Grotesk', sans-serif;
  --bg:           #fff;
  --text:         #000;
  --accent:       #8b0000;

  --pad:          0.5rem;
  --gutter:       0.25rem;
  --indent:       0.5rem; /* base indent for folder labels */
  --lh:           1.1;
  --ls:           0;

  /* Tree-line parameters */
  --tree-color:   rgba(0, 0, 0, 1);
  --tree-width:   3px;
  --tree-gap:     0.1rem;

  --fs-list:      clamp(1.5rem,6vw,2rem);
  /* --fs-content:   clamp(0.8rem,1.8vw,0.95rem); */
  --fs-content: clamp(0.95rem, 2.2vw, 1.15rem);

  --line:         1px solid #000;
  --line-light:   1px solid rgba(0,0,0,0.2);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font);
  font-weight: 500;
  line-height: var(--lh);
  letter-spacing: var(--ls);
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
}

/*────────────────────────────────────────
  Layout
────────────────────────────────────────*/
.container {
  display: flex;
  height: 100vh;
}

.split-line {
  width: 0;
  border-left: var(--line-light);
  z-index: 2;
}

/*────────────────────────────────────────
  Sidebar & Content panels
────────────────────────────────────────*/
.sidebar,
.content {
  padding: var(--pad);
  overflow-y: auto;
}

.sidebar {
  flex: 0 0 50%;
  overflow-x: hidden;
}

.content {
  flex: 0 0 50%;
  position: relative;
  z-index: 1;
  background: var(--bg);
}

/*────────────────────────────────────────
  Single‐pane landing and two‐pane detail
────────────────────────────────────────*/
body.home .sidebar {
  flex: 0 0 100%;
}
body.home .split-line,
body.home .content {
  display: none;
}
body.detail .container {
  display: block;
  position: relative;
}
body.detail .sidebar {
  flex: 0 0 50%;
}
body.detail .split-line {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: var(--line);
  z-index: 2;
}
body.detail .content {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  background: var(--bg);
  overflow-y: auto;
}

/*────────────────────────────────────────
  Folder-Tree Navigation (collapsable)
────────────────────────────────────────*/

.tree {
  margin-left: calc(-4 * var(--indent));
}
.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tree li.collapsed > ul {
  display: none;
}
.tree li {
  position: relative;
  /* indent text by icon width plus gutter */
  padding-left: calc(var(--fs-list) * 0.85 + var(--gutter));
}
.tree ul > li > ul {
  position: relative;
  margin: var(--gutter) 0 0 0;
  padding-left: 0;
}
.tree li:not(.collapsed) > ul::before {
  content: '';
  position: absolute;
  /* start gap below parent folder label */
  top: var(--tree-gap);
  /* center under icon: half of icon width */
  left: calc((var(--fs-list) * 0.85) / 2 + var(--gutter));
  /* end gap above last child */
  bottom: var(--tree-gap);
  width: 0;
  border-left: var(--tree-width) solid var(--tree-color);
}

.folder-header,
.folder {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-list);
  font-weight: 300;
  color: var(--text);
  margin-bottom: var(--gutter);
  margin-left: var(--indent);
}
.sidebar a {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-list);
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  text-decoration: none;
  margin-bottom: var(--gutter);
  margin-left: var(--indent);
}
.sidebar a.active {
  color: var(--accent);
}
.folder-icon {
  width: calc(var(--fs-list) * 0.85);
  height: calc(var(--fs-list) * 0.85);
  margin-right: var(--gutter);
  background: no-repeat center/contain url('../assets/icons/folder3.svg');
}
.file-icon {
  display: none;
}

/*────────────────────────────────────────
  Close button
────────────────────────────────────────*/
.close-btn {
  display: block;
  text-align: right;
  margin: var(--gutter) 0 calc(var(--pad) * 2) 0;
  font-size: var(--fs-content);
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.close-btn.close-bottom {
  display: none;
}
body.detail .close-btn.close-bottom {
  display: block;
  position: fixed;
  bottom: var(--pad);
  right: var(--pad);
  z-index: 10;
}

/*────────────────────────────────────────
  Gap after close buttons on both About & Project pages
────────────────────────────────────────*/
.about-page .close-btn,
.project-page .close-btn {
  margin-bottom: 0.5em;
  color: var(--accent);
}

/*────────────────────────────────────────
  Content styling (project & about)
────────────────────────────────────────*/
.content,
.project-page,
.about-page {
  font-size: var(--fs-content);
  font-weight: 500;
  line-height: var(--lh);
}
.content h1 {
  font-size: var(--fs-content);
  margin-bottom: var(--gutter);
  color: var(--accent);
  font-weight: 500;
}
.content p,
.content a {
  font-size: var(--fs-content);
  margin-bottom: var(--gutter);
  color: var(--text);
  text-decoration: none;
}

/*────────────────────────────────────────
  Placeholder rectangles
────────────────────────────────────────*/
.placeholder-img {
  background: #000;
  width: 100%;
  height: 150px;
  margin: var(--gutter) 0;
}
.float-left {
  float: left;
  width: 40%;
  margin: 0 var(--gutter) var(--gutter) 0;
}
.float-right {
  float: right;
  width: 40%;
  margin: 0 0 var(--gutter) var(--gutter);
}
.project-details::after,
.about-page .about-row::after {
  content: "";
  display: table;
  clear: both;
}

/*────────────────────────────────────────
  Two-row split layout
────────────────────────────────────────*/
.project-intro,
.about-page .about-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: var(--gutter);
  padding-bottom: var(--pad);
  border-bottom: var(--line-light);
  margin-bottom: var(--pad);
}
.project-intro .project-title,
.project-intro .project-creators,
.project-intro .artistic {
  font-size: var(--fs-content);
}
.about-page .label,
.about-page .detail {
  font-size: var(--fs-content);
}
.about-page .label {
  font-weight: 500;
}
.about-page .detail p {
  margin: 0 0 var(--gutter) 0;
}
.about-page .detail p:last-child {
  margin-bottom: 0;
}

/*────────────────────────────────────────
  Mobile adjustments
────────────────────────────────────────*/
@media (max-width: 768px) {
  .container {
    display: block;
  }
  body.home .sidebar {
    display: block;
    height: 100vh;
    padding: var(--pad);
  }
  body.home .split-line,
  body.home .content {
    display: none;
  }
  body.detail .sidebar,
  body.detail .split-line {
    display: none;
  }
  body.detail .content {
    position: static;
    width: 100%;
    display: block;
    padding: var(--pad);
    height: 100vh;
    overflow-y: auto;
  }

  .project-intro,
  .about-page .about-row {
    grid-template-columns: 1fr !important;
  }
  .project-details figure,
  .project-details video {
    max-width: 100%;
    float: none;
    margin: var(--gutter) 0;
  }
  .float-left,
  .float-right {
    float: none;
    width: 100%;
    margin: var(--gutter) 0;
  }
}

.project-details iframe {
  width: 95%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  margin: 0 auto; /* centers horizontally */
  border: 1px solid #000; /* optional */
}

.project-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* space between images */
  padding: 10px 0;
}

.project-gallery img {
  flex: 1 1 calc(50% - 16px); /* two images per row on large screens */
  max-width: calc(50% - 16px);
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .project-gallery img {
    flex: 1 1 100%; /* full width on mobile */
    max-width: 100%;
  }
}

/* Arrow on hover for sidebar project links */
.sidebar .tree a {
  position: relative;
}

.sidebar .tree a::after {
  content: "→";
  display: inline-block;
  width: 1ch;              /* reserve space so layout doesn’t jump */
  margin-left: 0.25ch;
  color: var(--accent);    /* matches your red accent */
  visibility: hidden;      /* immediate show/hide (no fade) */
}

.sidebar .tree a:hover::after,
.sidebar .tree a:focus-visible::after {
  visibility: visible;
}

.sidebar a.active {
  color: var(--accent);
}

/* Inline links inside content */
.content a {
  font-size: var(--fs-content);
  margin-bottom: var(--gutter);
  color: var(--accent); /* dark grey */
  text-decoration: none;
  transition: color 0.2s;
}

.content a:hover {
  color: var(--accent); /* dark red */
}

.status-box {
  background-color: #e7e6e6;
  border: 2px solid #000;
  padding: 1rem;
  margin-top: 1rem;
  font-size: var(--fs-content);
  max-width: 100%;
}

@media (min-width: 769px) {
  .status-box {
    max-width: 49.5%;
  }
}

.status-box {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.status-photo {
  width: 200px; /* desktop size */
  height: 200px;
  object-fit: cover;
  /* border-radius: 50%; circle crop */
  border: 2px solid var(--text); /* black border */
}

.status-text {
  flex: 1;
}

@media (max-width: 768px) {
  .status-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .status-photo {
    width: 150px;
    height: 150px;
  }
}