:root {
  /*animation values*/
  --t-fast: 0.5s;
  --t-med: 0.8s;
  --t-slow: 1s;
  --easing: cubic-bezier(.2,.3,.5,1); 


  --accent-color: #eaeaea;
  
  --white: #eaeaea;
  --header-h: 10px;

}



body {
    background-color: black;
    color: var(--white);
    font-family: "agave";
    text-align: right;
    margin: 20px;
    padding: 0;
    min-height: 100vh;
}

.page{
  padding-top: var(--header-h);
  text-align: left;
}

.head {
  position: fixed;
  display: flex;
  background: black;
  padding: 10px;
  inset: 0px  2px 2px;
  height: var(--header-h);
  justify-content: left;
  align-items: center;
  z-index: 1000;
  font-weight: bold;
}

.logo {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  column-gap: 0;
  justify-items: right;
  color: #171330;
  background-color: var(--accent-color);
  text-decoration: none;
  padding:2px 2px 2px 2px;
  margin: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: all var(--t-med) var(--easing);
  
}
.logo::before,
.logo::after{
  display: inline-blocks;
  content:"";
  transition: all var(--t-med) var(--easing);
}
.logo::before{
  content:"[";
  grid-column: 1;
}
.logo::after{
  content:"]";
  grid-column: 3;
}
.logo:hover{
  column-gap: 2rem;
  color: black;
  background-color: var(--accent-color);
  /*transition: all var(--t-med) var(--easing);*/
}
.logo:hover::before{
  transform: translateX(-3px);
  transition: all var(--t-med) var(--easing);
}
.logo:hover::after{
  transform: translateX(3px);
  transition: all var(--t-med) var(--easing);
}

.path{
  position: relative;
  color: var(--white);
  text-decoration: none;
  display: inline-block;
  transition: all var(--t-fast) var(--easing);
  padding: 1px;
  cursor: pointer;
  margin-inline: 1px;
}
.path:hover{
  letter-spacing: 0.01rem;

}
/*logologo*/
l {
  position: relative;
  color: var(--white);
  text-decoration: none;
  display: inline-block;
  transition: all var(--t-fast) var(--easing);
  padding: 1px;
  cursor: pointer;
  margin-inline: 1px;

}
l:hover{
  letter-spacing: .1rem;
  background-color: #ff5700;
  color: #000000;

}

l::before,
l::after{
  content:"";
  position: relative;
  transition: all var(--t-fast) var(--easing);
}

l::before{
  content:" <";
  margin-right:1px;
}

l::after {
  content:"> ";
  margin-left:1px;
}
l:hover::before{
  content:"<";
  margin-right:1rem;
  transition: all var(--t-fast) var(--easing);
}
l:hover::after{
  content:">";
  margin-left:1rem;
  transition: all var(--t-fast) var(--easing);
}

a {
  text-decoration: none;
  color: var(--white);
}


.photo-container {
  display: flex;               /* image left, info right */
  align-items: center;
  gap: 16px;                   /* space between image and text */
  margin: 30px;
  border-radius: 10px;
}

.photo {
  width: 50vw;
  height:auto;
  border-radius: 10px;
  border: 0px solid var(--white);
  transition: transform 0.3s ease;
}

.photo-info {
  opacity: 0;                  /* hidden by default */
  transform: translateX(-10px); /* shifted slightly */
  transition: opacity var(--t-fast) var(--easing), transform var(--t-fast) var(--easing);
}

.photo:hover {
  transform: scale(1.03);      /* grow slightly */
  border: 1px solid var(--accent-color);
}

.photo:hover + .photo-info {
  opacity: 1;
  transform: translateX(0);    /* slide into place */
}
.writing-box{
  width:90vw;
  height:fit-content;
  border:1px solid var(--white);
  padding: 10px;
  margin-top:4px;
  margin-bottom:4px;
  display:flex;
  align-items: stretch;
  justify-content: stretch;
  white-space: normal;
  word-break: normal;
  cursor: pointer;
  transition: all var(--t-slow) var(--easing)

}
.writing-box.collapsed .content{
  overflow: hidden;
  max-height: 2.8em;
}

@supports (-webkit-line-clamp: 2) {
  .writing-box.collapsed .content {
    max-height: none;                /* superseded by clamp */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: clip;                  /* avoids scrollbars */
  }
}

/* 3) If your browser supports the unprefixed property */
@supports (line-clamp: 2) {
  .writing-box.collapsed .content {
    display: block;
    line-clamp: 2;
  }
}

.writing-box:not(.collapsed) .content {
  max-height: none;
  overflow: visible;
}

/* Optional: nicer animation when expanding/collapsing */
.writing-box .content {
  transition: max-height var(--t-slow) var(--easing);
}

@media (prefers-reduced-motion: reduce) {
  .writing-box .content { transition: none; }
}
.box {
  width:90vw;
  height:fit-content;
  padding: 10px;
  margin-top:4px;
  margin-bottom:4px;
  display:flex;
  align-items: stretch;
  justify-content: stretch;
  white-space: normal;
  word-break: normal;
  cursor: pointer;
  transition: all var(--t-slow) var(--easing)

}
}