:root{

--font-main:"Inter", Arial, sans-serif;

--title:55px;
--subtitle:17px;
--text:12px;
--credit:9px;

--bg:#ededeb;
--line:rgba(0,0,0,0.15);

}


*{
box-sizing:border-box;
}
.mobile-nav{
    display:none;
}


html,body{

margin:0;
width:100%;
height:100%;

overflow:hidden;

font-family:var(--font-main);

background:var(--bg);
color:#111;

}



/* MAIN ARCHIVE */

.archive-layout{

display:grid;

grid-template-columns:
280px
1fr
1fr
1fr
280px;

height:100vh;

}


/* =====================================
   ARCHIVE INTRO PANEL
===================================== */


.intro-panel{
    padding:25px;
    padding-top:5px;
}

.intro-panel h1{
    font-size:63px;
    font-weight:500;
    letter-spacing:-1.5px;
    margin:0 0 -10px;
    color:#555555;
}

.subtitle-main {
    font-size:15px;
    line-height:1.6;
    margin:0;
    color:#555555;
}

.subtitle-secondary {
    font-size:17px;
    font-weight:600;
    margin-top:35px;
}

.author{
    margin-top:1px;
    font-size:10px;
    color: #a283b7;
}

.description{
    margin-top:35px;
    font-size:12px;
    line-height:1.6;
    color:#666;
    max-width:220px;
}

.intro-intro {
   margin-top: 15px;
    color: #aaaaaa;
    
}



/* search */

#searchInput{

    margin-top:35px;

    width:100%;

    height:32px;

    border:none;

    border-bottom:1px solid var(--line);

    background:transparent;

    font-family:inherit;

    font-size:12px;

    padding:5px 0;

}



#searchInput:focus{

    outline:none;

    border-bottom:1px solid #111;

}


/* COLUMNS */

.archive-column{
height:100vh;
overflow-y:auto;
}

.archive-column:first-of-type{
border-left:1px solid var(--line);
}

.case-panel{
border-left:1px solid var(--line);
}


.column-header{

height:130px;
padding:20px;
border-bottom:none;
position:relative;

}

.archive-layout{
  position:relative;
}



.tag-select{

position:absolute;
right:3px;
top:125px;
transform:none;
border:none;
background:none;
font-family:inherit;
font-size:12px;
cursor:pointer;
width:250px;
color:inherit;
direction:rtl;
text-align:right;
direction:ltr;
}


.column-content{

padding:40px 20px 20px 20px;

}

.archive-column:nth-child(4) .column-content,
.archive-column:nth-child(5) .column-content{
   
border-left:1px solid var(--line);
}


.column-content::-webkit-scrollbar{

display:none;
}



/* CARDS */


.article-card{

margin-bottom:35px;
cursor:pointer;
border-bottom:1px solid var(--line);
padding-bottom:20px;
background:transparent;
}



.article-image{

  width:100%;
  overflow:hidden;
  background:transparent;
}


.article-image img{

  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  filter:grayscale(20%);

}


.article-category{

font-size:var(--credit);
color:#777;
margin-top:10px;

}



.article-title{

font-size:var(--subtitle);
font-weight:600;
margin-top:5px;
}



.article-excerpt{

font-size:var(--text);
line-height:1.5;
margin-top:8px;
}



/* CASE FILES */

.case-panel{
padding:25px;
padding-top:102px;
border-left:1px solid var(--line);
height: 100vh;
overflow-y: auto;
display: flex;
flex-direction: column;
}

.case-panel{
font-size:var(--subtitle);
}

.case-item{
font-size:var(--text);
padding:15px 0;
border-bottom:1px solid var(--line);
}


.article-content{
    position:relative;
}


.article-content{
    position:relative;
}


.article-comments-button{

    position:absolute;
    top:0;
    right:0;

    border:none;
    background:none;

    color:#c9a7e8;

    font-size:12px;

    cursor:pointer;
}

.article-dialogue{

    border:1px solid rgba(201,167,232,0.6);

    padding:25px;

    margin-top:40px;

}

/* ARTICLE VIEW */

.article-view {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 280px 1fr 1fr 1fr 280px;
  background: var(--bg);
  z-index: 9999;
  overflow: auto;

}


.hidden{

display:none !important;
}

.article-tag{
font-size:var(--credit);
color:#777;
border:1px solid var(--line);
padding:4px 8px;
margin-right:6px;
display:inline-block;

}



/* BIG IMAGE */

.article-image-panel {
  grid-column: 1 / 4;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.article-image-panel img {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 40px);
  object-fit: contain;
  object-position: top center;
}

.article-media-info {
  margin-top: 8px;
  font-size: var(--credit);
  color: #777;
  text-align: center;
}


/* TEXT */


.article-content {
  grid-column: 4 / 6;
  max-height: 100vh;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  padding-top: 20px;  
  padding-left: 30px;  
  padding-right: 40px;
}

.article-content h2{
font-size:var(--title);
font-weight:500;
margin-top: 10px;
margin-bottom: 20px;
}

.article-content p {
  font-size: var(--text);
  line-height: 1.8;
}

#articleTags {
  margin-top: 10px;
}

#articleBody p {
  margin: 0 0 1px;
  line-height: 1.8;
}

.article-content strong {
  color: #b86b2b; /* warm brown-orange */
}

#articleExcerpt {
    display: block;
    border-top: 1px solid var(--line);
    padding-top: 10px;
    margin-bottom: -20px;
}

/* =========================
   ARTICLE DIVIDER
========================= */

.article-divider {
  width: 100%;
  height: 1px;
  background: var(--line);
  margin: 35px 0;
}


.article-card:hover img{

filter:grayscale(0%);
}

.article-image-panel:hover img{

filter:grayscale(0%);
}



/* =====================================
   DIALOGUE
===================================== */

.your-contribution{
    margin-bottom:30px;
}


.your-contribution h5{
    font-size:12px;
    font-weight:500;
}


.contribution-box{

    display:none;

    margin-top:15px;

    padding:15px;

    border:1px solid #ddd;

}





.contribution-box input,
.contribution-box textarea{

    width:100%;

    font-family:inherit;

    font-size:12px;

    margin-bottom:10px;

}


.contribution-box textarea{

    height:100px;

}



.dialogue-comment{

    margin-top:25px;

}



.dialogue-comment strong{

    font-size:12px;

    font-weight:500;

}



.dialogue-comment p{

    font-size:13px;

    line-height:1.5;

    margin:8px 0;

}



.dialogue-comment small{

    font-size:10px;

    opacity:0.6;

}

.comment-article-title {
    color: #b8a1d9;
}



/* PUBLIC DIALOGUE */

#publicDialogue h4{

    margin-bottom:25px;

}


/* contribution button */

.contribution-trigger{

    border:1px solid #ccc;

    padding:12px;

    font-size:13px;

    cursor:pointer;

    margin-bottom:20px;

}





/* hover opens form */

.contribution-box{

    display:none;

    border:1px solid #ddd;

    padding:15px;

    margin-bottom:30px;

}







/* form styling */

.contribution-box label{

    display:block;

    font-size:11px;

    margin-top:12px;

}



.contribution-box input,
.contribution-box textarea{

    width:100%;

    border:1px solid #ddd;

    padding:8px;

    font-family:inherit;

    font-size:12px;

}



.contribution-box textarea{

    height:100px;

}



.contribution-box button{

    margin-top:12px;

    padding:8px 15px;

    background:none;

    border:1px solid #000;

    cursor:pointer;

}



/* comments */

#dialogueList{

    margin-top:50px;

}



.dialogue-comment{

    border-top:1px solid #ddd;

    padding-top:15px;

    margin-top:20px;

}



.dialogue-comment strong{

    font-size:12px;

}



.dialogue-comment p{

    font-size:13px;

    line-height:1.5;

}



.dialogue-comment small{

    font-size:10px;

    opacity:0.6;

}

.reply-button{

background:none;

border:none;

font-size:10px;

cursor:pointer;

padding:0;

margin-top:10px;

color :#d98b4a;

}



.reply-box{

margin-top:15px;

margin-left:15px;

}



.reply-box textarea,
.reply-box input{

width:100%;

font-family:inherit;

font-size:11px;

margin-bottom:8px;

}

.reply-comment{

    margin-left:20px;

    padding-left:15px;

    border-left:1px solid var(--line);

    margin-top:15px;

}


.reply-comment strong{

    font-size:11px;

}


.reply-comment p{

    font-size:12px;

    line-height:1.5;

}




/* Disscussion box */

#articleDialogue {
    padding: 0;
    margin: 0;
    border: none;
}

/* only when discussion content exists */
#articleDialogue:not(:empty) {
    
    padding: 40px;
    margin-top: 25px;
    margin-bottom: 25px;
}

#articleDialogue small {
    font-size: 9px;
}
#articleDialogue {
    background: rgba(119, 119, 119, 0.077);
}
/* author name */
#articleDialogue strong {
    color: #c9a7e8;
    font-weight: 500;
}





/* HIDE ALL SCROLLBARS */

*{
    scrollbar-width:none; /* Firefox */
}

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





/* =====================================
   AUTOMATIC DARK MODE
===================================== */

@media (prefers-color-scheme: dark){

  :root{

    --bg:#1c1c1b;
    --line:rgba(255,255,255,0.15);
  }


  html,
  body{
    background:var(--bg);
    color:#eee;
  }
  .archive-column,
  .intro-panel,
  .case-panel,
  .article-view,
  .article-content{
    background:#20201f;
  }


  .column-header{

    border-color:rgba(255,255,255,0.15);
  }


  .article-card{

    background:#252524;
  }


  .article-card:hover{

    background:#2d2d2b;
  }


  .article-excerpt{

    color:#bbb;
  }


 
  .article-category,
  .credit{

    color:#888;
  }


  input{

    color:#1f4d3a;
    border-color:rgba(255,255,255,0.2);
  }


  .tag-select{

    color:white;

  }


  .article-image{

    background:var(--bg);

  }


}



/* =========================
   MOBILE VERSION
========================= */

@media (max-width: 700px) {

  /* -------------------------
     BASE RESET
  ------------------------- */

  html,
  body {
    height: auto;
    overflow-y: auto;
  }

  /* switch layout from grid → vertical flow */
  .archive-layout {
    display: block;
    height: auto;
    min-height: 100vh;
    padding-top: 50px; /* space for mobile nav */
  }

  /* -------------------------
     MOBILE NAV
  ------------------------- */

  .mobile-nav {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    justify-content: space-around;
    align-items: center;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    z-index: 1000;
  }

  .mobile-nav button {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 12px;
    color: inherit;
  }

  /* -------------------------
     VIEW SYSTEM (JS CONTROLLED)
  ------------------------- */

  /* hide everything by default on mobile */
  .intro-panel,
  .archive-column,
  .case-panel {
    display: none;
  }

  /* =========================
     INFO VIEW
  ========================= */

  .archive-layout.show-info .intro-panel {
    display: block;
    padding: 70px 15px 15px;
  }

  .intro-panel h1 {
    font-size: 36px;
  }

  .description {
    max-width: 100%;
  }

  /* =========================
     ARTICLES VIEW
     (ALL COLUMNS STACKED)
  ========================= */

  .archive-layout.show-articles .archive-column {
    display: block;
    width: 100%;
    border-left: none;
    border-bottom: 1px solid var(--line);
    padding: 0;
  }

  .archive-layout.show-articles .column-content {
    height: auto;
    overflow: visible;
    padding: 15px;
  }
  .archive-layout.show-articles .column-header{
    display:none;
  }


  /* card tweaks */
  .article-card {
    margin-bottom: 20px;
  }

  .article-title {
    font-size: 14px;
  }

  .article-excerpt {
    font-size: 12px;
    line-height: 1.4;
  }

  /* =========================
     DIALOGUE VIEW
  ========================= */

  .archive-layout.show-dialogue .case-panel {
    display: block;
    padding: 70px 15px 15px;
  }
 

  /* =========================
     ARTICLE VIEW (MOBILE)
  ========================= */

  .article-view {
    display: block;
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .article-image-panel {
    height: auto;
  }

  .article-content {
    padding: 20px;
  }

  .article-content h2 {
    font-size: 28px;
  }
  .archive-column{
      height:auto;
      overflow:visible;
  }
}