/* Mobile portfolio corrections. Desktop layout remains untouched. */

/* Keep the visible brand independent from the SEO title stored in data.json. */
.site-name{
  font-size:0;
}
.site-name::before{
  content:"JESSICA NIHIL";
  font-size:clamp(1.2rem,1.8vw,1.65rem);
}
#footer-artist-name{
  font-size:0;
}
#footer-artist-name::before{
  content:"Jessica Nihil";
  font-size:.59rem;
}

@media (max-width:700px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .site-nav{
    padding-left:20px;
    padding-right:20px;
  }
  .site-name::before{
    font-size:1rem;
    letter-spacing:.07em;
    white-space:nowrap;
  }

  .portfolio-index,
  .about-section,
  .contact-section{
    width:100%;
    max-width:100%;
    padding-left:20px;
    padding-right:20px;
  }

  .portfolio-index{
    gap:26px;
    padding-bottom:64px;
  }

  .portfolio-stage,
  .project-card{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  /*
   * Mobile uses one stable 2:3 preview viewport for every Series.
   * Photographs are never cropped. Landscape images sit inside the same
   * footprint while the surrounding space remains the exact Portfolio ash.
   */
  .project-card{
    display:block;
    aspect-ratio:2 / 3;
    height:auto;
    min-height:0;
    max-height:none;
    padding:0;
    overflow:hidden;
    background:transparent;
  }
  .project-card .project-secondary{
    display:none;
  }
  .project-card .project-lead{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    min-height:0;
    background:transparent;
    overflow:hidden;
  }
  .project-card .project-lead::after{
    display:none;
  }
  .project-card .project-lead img{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center;
    border:1px solid rgba(111,31,42,.82);
  }

  .series-selector{
    width:100%;
    margin-top:18px;
  }
  .series-current{
    width:100%;
    padding-top:12px;
    gap:12px;
  }
  .series-label{
    flex:0 0 auto;
    font-size:.62rem;
  }
  .series-arrows{
    flex:1 1 auto;
    min-width:0;
    grid-template-columns:40px minmax(0,1fr) 40px;
    gap:4px;
  }
  .series-arrows>button{
    width:40px;
    min-width:40px;
    height:40px;
    font-size:1.55rem;
  }
  .series-numbers{
    justify-content:center;
    gap:8px;
  }
  .series-numbers button{
    min-width:30px;
    min-height:40px;
    font-size:.62rem;
  }

  /* Match the desktop hierarchy on dark fields: muted red for micro labels,
     full oxblood for structural emphasis. */
  .index-copy .micro-label,
  .index-details dt{
    color:var(--muted-oxblood);
  }
  .folio-rail span{
    color:#b86670;
  }
  .folio-rail:before,
  .series-progress span{
    background:var(--oxblood);
  }
  .folio-rail:after{
    background:#82404aa6;
  }
  .contact-kicker{
    color:#b15d68;
  }

  /* On the light About field, use full oxblood for labels and rules. */
  .about-kicker,
  .about-ledger dt{
    color:var(--oxblood);
  }

  /* Explicitly preserve the approved bone palette on mobile. */
  .about-section.theme-bone{
    clear:both;
    background:#e7e0d3;
    color:#1b1a18;
  }

  /* Increase About copy contrast while retaining the serif hierarchy. */
  .about-copy{
    color:#45413b;
  }
  .about-introduction{
    color:#565049;
  }

  /* Mobile ledger echoes the ruled metadata placard used in Portfolio. */
  .about-ledger{
    border-top:0;
    gap:0;
  }
  .about-ledger div,
  .about-ledger div:first-child{
    border-top:1px solid var(--oxblood);
    padding:18px 0;
  }
  .about-ledger dd{
    color:#1b1a18;
    opacity:1;
  }
}