:root{
    --ss-off:    #f2efe7;
    --ss-ivory:  #f4f1eb;
    --ss-dark:   #27221E;
    --ss-bronze: #ba9663;
    --ss-brown:  #6a4a35;
    --ss-ink:    #1b1b1b;
    --ss-border: rgba(0,0,0,.10);
  
    --ss-font: 'STIX Two Text', serif;
    --ss-radius: 0rem;
  }
  
  *{ box-sizing: border-box; }
  html, body{ height: 100%; }
  
  body{
    margin: 0;
    font-family: var(--ss-font);
    background: var(--ss-dark);
    color: rgba(255,255,255,.88);
  }
  
  /* da ne preklapa fixed navbar */
  .proj-page{
    padding-top: 5.5rem;
  }
  
  /* =========================================================
     HERO
  ========================================================= */
  .proj-hero{
    position: relative;
    min-height: min(75vh, 50rem);
    background-size: cover;
    background-position: center;
    overflow: hidden;
  
    /* centriranje sadržaja u hero */
    display: grid;
    place-items: center;
  }
  
  .proj-hero__overlay{
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        90deg,
        rgba(39,34,30,.92) 0%,
        rgba(39,34,30,.70) 55%,
        rgba(39,34,30,.25) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0,0,0,.12) 0%,
        rgba(0,0,0,.52) 100%
      );
  }
  
  .proj-hero__inner{
    position: relative;
    z-index: 2;
    padding: clamp(3.25rem, 7vh, 5.5rem) 0;
    max-width: 72ch;
    text-align: center;
  }
  
  .proj-hero__kicker{
    color: rgba(186,150,99,.85);
    letter-spacing: .16em;
    font-weight: 700;
    font-size: .8rem;
    margin-bottom: .9rem;
  }
  
  .proj-hero__title{
    font-size: clamp(2.1rem, 4.2vw, 3.4rem);
    font-weight: 900;
    font-style: italic;
    margin: 0 0 .9rem;
  }
  
  .proj-hero__lead{
    margin: 0 0 1.75rem;
    color: rgba(255,255,255,.82);
    line-height: 1.75;
  }
  
  /* Lokacija / Godina */
  .proj-meta{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
  
    width: min(34rem, 100%);
    margin: 1.25rem auto 0;
  }
  
  .proj-meta__item{
    border: .0625rem solid rgba(186,150,99,.28);
    background: rgba(0,0,0,.18);
    padding: .9rem 1rem;
  }
  
  .proj-meta__label{
    display: block;
    color: rgba(186,150,99,.85);
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .35rem;
  }
  
  .proj-meta__value{
    color: rgba(255,255,255,.88);
    font-weight: 600;
  }
  
  .proj-hero__actions{
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* dugmad (tvoj stil) */
  .btn-ss{
    background: var(--ss-dark);
    border: .0625rem solid rgba(186,150,99,.55);
    color: rgba(255,255,255,.92);
    padding: .75rem 1.25rem;
    border-radius: var(--ss-radius);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
  }
  
  .btn-ss:hover{
    background: var(--ss-bronze);
    color: #fff;
  }
  
  .btn-ss--outline{
    background: transparent;
    border-color: rgba(255,255,255,.28);
  }
  
  .btn-ss--outline:hover{
    background: rgba(255,255,255,.10);
    color: #fff;
  }
  
  /* =========================================================
     CONTENT SECTION (Opis projekta)
  ========================================================= */
  .proj-section{
    padding: 4.25rem 0;
    background: var(--ss-dark);
  }
  
  /* sad je 1 kolona */
  .proj-grid{
    display: block;
  }
  
  /* puni blok (ali kontrolisan max da izgleda profi na velikim ekranima) */
  .proj-copy{
    width: min(70rem, 100%);
    margin: 0 auto;
  }
  
  .proj-h2{
    font-size: clamp(1.6rem, 2.4vw, 2.15rem);
    margin: 0 0 .9rem;
    font-weight: 900;
    color: rgba(255,255,255,.92);
    text-align: center;
  }
  
  .proj-copy p{
    margin: 0 0 1rem;
    line-height: 1.85;
    color: rgba(255,255,255,.82);
    max-width: none;
  }
  
  .proj-list{
    margin: 1rem 0 0;
    padding-left: 1.1rem;
    color: rgba(255,255,255,.82);
    max-width: none;
  }
  
  .proj-list li{
    margin: .45rem 0;
  }
  
  /* =========================================================
     PANEL (ako ga koristiš kasnije)
  ========================================================= */
  .proj-panel{
    border: .125rem solid rgba(186,150,99,.55);
    background: rgba(0,0,0,.16);
    padding: 1.25rem 1.25rem 1.1rem;
  }
  
  .proj-panel__title{
    color: rgba(186,150,99,.9);
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .82rem;
    margin-bottom: 1rem;
  }
  
  .proj-panel__row{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: .0625rem solid rgba(255,255,255,.08);
  }
  
  .proj-panel__row span{ color: rgba(255,255,255,.68); }
  .proj-panel__row strong{ color: rgba(255,255,255,.9); }
  
  .proj-panel__cta{
    margin-top: 1.1rem;
    display: inline-flex;
    text-decoration: none;
    color: #fff;
    background: var(--ss-bronze);
    border: .0625rem solid rgba(0,0,0,.12);
    padding: .8rem 1.1rem;
    border-radius: var(--ss-radius);
    font-weight: 700;
  }
  
  .proj-panel__cta:hover{
    background: #5b3f2f;
    color: #fff;
  }
  
  /* =========================================================
     GALLERY
  ========================================================= */
  .proj-head{
    max-width: 70ch;
    margin: 0 auto 1.25rem;   
    text-align: center;     
  }
  
  .proj-sub{
    margin: 0;
    color: rgba(255,255,255,.72);
  }
  
  .proj-gallery{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: .9rem;
  }
  
  .proj-shot{
    display: block;
    grid-column: span 4;
    border: .0625rem solid rgba(186,150,99,.28);
    background: rgba(0,0,0,.16);
    overflow: hidden;
  }
  
  .proj-shot img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    transform: scale(1.02);
    transition: transform 220ms ease, filter 220ms ease;
  }
  
  .proj-shot:hover img{
    transform: scale(1.06);
    filter: contrast(1.02);
  }
  

  /*
  SECTION DIVIDER
  */

  .ss-section-divider{
    height: 0.25rem; /* 4px */
    width: 100%;
    background-color: var(--ss-dark);
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(186,150,99,.45) 15%,
      rgba(186,150,99,.95) 40%,
      rgba(186,150,99,.95) 60%,
      rgba(186,150,99,.45) 85%,
      transparent 100%
    );
  }
  /* =========================================================
     RESPONSIVE
  ========================================================= */
  @media (max-width: 62em){
    .proj-meta{
      grid-template-columns: 1fr;
      width: min(26rem, 100%);
    }
  
    .proj-shot{
      grid-column: span 6;
    }
  }
  
  @media (max-width: 36em){
    .proj-page{ padding-top: 5.25rem; }
  
    .proj-shot{
      grid-column: span 12;
    }
  }