/* ==========================================================================
   HERRE STUDIO — RESPONSIVE.CSS  v2
   01. Desktop+ (≥1025px)   02. Tablet & Below (≤1024px)
   03. Mobile (≤768px)      04. Small Mobile (≤480px)
   ========================================================================== */


/* --------------------------------------------------------------------------
   01. DESKTOP+  (≥1025px)
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {

  /* Hide the "About" shortcut link — full about tabs live in the menu */
  .selected-projects .about-link {
    display: none;
  }

  /* About section is desktop-menu-only — not a separate section */
  .about-section {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   02. TABLET & BELOW  (≤1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* Desktop about panel — hidden, about content moves to about-section */
  .container-herre {
    display: none;
  }

  /* Hover preview panel — not useful on touch */
  .image-display {
    display: none;
  }

  /* Menu list expands to fill available width */
  .menu-list {
    width: calc(100vw - var(--sidebar-w));
    overflow-y: auto;
    pointer-events: auto;
  }

  /* Selected-projects label shifts right */
  .selected-projects {
    width: calc(90vw - var(--sidebar-w));
    justify-content: flex-end;
    top: 25px;
  }

  /* Menu items get more tap-friendly vertical padding */
  .menu-list a {
    padding-block: var(--sp-md);
  }
}


/* --------------------------------------------------------------------------
   03. MOBILE  (≤768px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

  /* Smaller numeral counters */
  .numeration {
    font-size: 4rem;
    line-height: 1;
    text-indent: -2px;
  }

  /* Tighter menu item label */
  .menu-voice {
    padding-inline: var(--sp-md);
    font-size: var(--fs-h5);
  }

  /* Hide the "SELECTED PROJECTS" label — space is precious */
  .selected-proj-i {
    display: none;
  }

  /* Mobile tabs need full width */
  .container-herre-m {
    width: 100%;
    font-size: var(--fs-sm);
  }

  .container-herre-m .tab-herre {
    max-width: 100vw;
    font-size: var(--fs-sm);
  }

  /* Ticker not shown on small screens — reduces visual noise */
  .scrolling-header {
    display: none !important;
  }

  /* Menu H button — slightly larger touch target */
  #menuButton {
    font-size: 30vw;
    line-height: 0.78;
  }

  /* Remove vertical divider borders from intro letters on mobile */
  .h-menu > .e,
  .h-menu > .r1,
  .h-menu > .r2,
  .h-menu > .e2 {
    border-left: none;
  }

  /* Reposition E letter for narrower viewport */
  .e {
    left: 20vw;
    text-indent: 0;
  }

  /* Hide detail labels in menu — only name + number visible */
  .details {
    display: none;
  }

  /* Tab info paragraphs — natural wrapping */
  .m-tab-info {
    height: auto;
    max-width: 100%;
    white-space: normal;
  }

  /* Compact font in list rows */
  .list-works-a,
  .container-herre-m .proj-spec,
  .container-herre-m .list-works-a {
    font-size: var(--fs-xs);
  }
}


/* --------------------------------------------------------------------------
   04. SMALL MOBILE  (≤480px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {

  #menuButton {
    font-size: 28vw;
  }

  .numeration {
    font-size: 3rem;
  }

  .menu-voice {
    font-size: 1rem;
    padding-inline: var(--sp-xs);
  }
}