/* ============================================================================
   RESPONSIVE  —  below 1100px the chassis collapses.
   The sidebar and the identity/nav cells move into a full-screen drawer
   behind a round hamburger; the sign re-centres; panels drop to a third of
   the viewport so a phone can still scan the archive quickly.
   ============================================================================ */

.top-nav,
.big-nav {
  display: none;
}

@media (max-width: 1100px) {
  :root {
    --sidebar-w: 200px;
    --head-h: 104px;
  }
  .nav-item {
    font-size: 1rem;
  }
  .nav4-0 h1 {
    font-size: 1.2rem;
    margin-left: 14px;
  }
  .nav4-0 [data-barcode] {
    width: 55%;
    margin-left: 14px;
  }
  .nav4-0-0 {
    padding-inline: 14px;
  }
  .sign-c {
    height: 220px;
  }
  section.project > h1 {
    font-size: min(3.4em, 9vw);
  }
  .content-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .timeline-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 820px) {
  :root {
    --gutter: 8px;
    --head-h: 92px;
  }

  .container {
    grid-template-columns: var(--gutter) 1fr var(--gutter);
    grid-template-rows: var(--gutter) var(--head-h) 1fr var(--gutter);
    grid-template-areas:
      "c0 c1 c2"
      "c7 topnav c8"
      "c9 main c10"
      "c11 c12 c13";
  }
  .c3,
  .c4,
  .c5,
  .c14,
  .c15,
  .c16 {
    display: none;
  }

  .nav0,
  .nav1,
  .nav2,
  .nav3,
  .nav4,
  .sidebar {
    display: none;
  }

  /* compact top bar: wordmark + three links + hamburger */
  .top-nav {
    grid-area: topnav;
    display: flex;
    align-items: center;
    gap: var(--gap);
    background: var(--black);
    min-width: 0;
  }
  .top-nav .brand {
    background: var(--background);
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-family: var(--font-tech);
    font-style: italic;
    font-weight: 700;
    font-size: 1.1rem;
    white-space: nowrap;
    min-width: 0;
  }
  .top-nav .nav-item {
    background: var(--secondary);
    font-size: 0.8rem;
    min-width: 0;
    flex: 1;
  }
  .top-nav .open-nav {
    flex: 0 0 auto;
    height: calc(100% - 6px);
    aspect-ratio: 1;
    margin: 3px;
    border: 1px solid var(--black);
    border-radius: 50%;
    background: var(--background);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 9px 7px;
  }
  .top-nav .open-nav div {
    height: 1px;
    width: 100%;
    background: var(--black);
    transition:
      transform 0.35s cubic-bezier(0.76, 0, 0.24, 1),
      opacity 0.2s ease;
  }
  body.nav-open .top-nav .open-nav div:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  body.nav-open .top-nav .open-nav div:nth-child(2) {
    opacity: 0;
  }
  body.nav-open .top-nav .open-nav div:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* drawer holds the identity block, the nav, the sidebar and the theme cell */
  .big-nav {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    background: var(--black);
    padding: var(--gap);
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
  }
  .big-nav > * {
    background: var(--background);
  }
  .big-nav .drawer-head {
    padding: 14px 16px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .big-nav .drawer-head h1 {
    font-family: var(--font-tech);
    font-style: italic;
    font-size: 1.6rem;
  }
  .big-nav .nav-item {
    padding: 16px;
    font-size: 1.4rem;
    justify-content: flex-start;
    border-bottom: var(--gap) solid var(--black);
  }
  .big-nav .nav-item a {
    justify-content: flex-start;
  }
  .big-nav .drawer-foot {
    display: flex;
    gap: var(--gap);
    background: var(--black);
    padding: 0;
  }
  .big-nav .drawer-foot > div {
    background: var(--background);
    height: 48px;
    flex: 1;
    display: flex;
  }
  .big-nav .drawer-foot a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .big-nav .drawer-foot svg {
    width: 22px;
    height: 22px;
  }

  .big-nav .drawer-extras {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    background: var(--black);
    padding: 0;
  }
  .big-nav .drawer-block {
    background: var(--background);
    padding: 10px 14px;
  }
  .big-nav .drawer-block h4 {
    margin-bottom: 6px;
    font-family: var(--font-tech);
    font-weight: 600;
  }
  .big-nav .drawer-lang {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .big-nav .drawer-lang a {
    color: var(--black);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    border: 1px solid var(--black);
    padding: 4px 9px;
  }
  .big-nav .drawer-block.color-change {
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: var(--secondary);
  }
  .big-nav .drawer-block.color-change h3 {
    font-family: var(--font-display);
  }
  .big-nav .drawer-id {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .big-nav .drawer-id [data-barcode] {
    width: 120px;
    height: 22px;
  }

  .sign-c {
    left: 50%;
    transform: translate(-50%, -50%);
    top: auto;
    bottom: 26px;
    width: 56px;
    height: 190px;
  }
  .sign {
    font-size: 1.15em;
  }

  section.project {
    border-width: 3px;
    box-shadow: inset 0 0 0 1px var(--black);
  }
  section.project:not(.hero) {
    height: calc(var(--main-height) / 1.6);
  }
  section.project.hero {
    height: calc(var(--main-height) / 2.4);
  }
  section.project.entry-panel {
    height: calc(var(--main-height) / 2);
  }
  section.content {
    padding: 12px;
    min-height: auto;
  }
  .facts {
    grid-template-columns: 1fr 1fr;
  }
  .carousel {
    height: calc(var(--main-height) * 0.5);
    gap: 16px;
    padding: 40px 8px 8px;
  }
  span.brd + .pixelation-wrapper {
    width: 100%;
    padding: 8px;
  }
  span.brd + .pixelation-wrapper img {
    max-height: 40vh;
    width: 100%;
    object-fit: cover;
  }
  .scroll-progress {
    display:;
  }
}

@media (max-width: 520px) {
  :root {
    --head-h: 78px;
  }
  .top-nav .nav-item {
    font-size: 0.7rem;
  }
  .top-nav .brand {
    font-size: 0.95rem;
    padding: 0 8px;
  }
  section.project > h1 {
    font-size: min(2.2em, 10vw);
    margin-bottom: 8px;
  }
  .content-head .lede {
    font-size: 0.95rem;
  }
  .text-block p {
    font-size: 0.78rem;
  }
  .facts {
    grid-template-columns: 1fr;
  }
  .sign-c {
    width: 46px;
    height: 150px;
    bottom: 18px;
  }
  .sign {
    font-size: 0.68em;
    padding-right: 4px;
  }
  .entry-face h1 {
    font-size: 1.3rem;
  }
}

/* short viewports: keep the header from eating the panels */
@media (max-height: 620px) {
  :root {
    --head-h: 84px;
  }
  .sign-c {
    height: 190px;
  }
  .sidebar .s2 {
    display: none;
  }
}

@media print {
  .cursor,
  #sparks,
  .loader,
  .sign-c,
  .top-nav,
  .big-nav,
  .page-curtain {
    display: none !important;
  }
  body {
    overflow: visible;
    background: #fff;
  }
  .main {
    overflow: visible;
    height: auto;
  }
  section.project {
    height: auto;
    page-break-after: always;
  }
}