/* Section: Misc (Original) — revived 2009-2013 grid, based on the
   pre-2024 miscellaneous.kyuhashim.com layout. */
.s-misc-orig {
  background: #000;
  color: #ccc;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  line-height: 14px;
  padding: 80px 30px 60px 30px;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
}
/* Top centered title — fixed at the very top of the viewport, swapped IN/OUT
   with the nav based on whether misc-original is in view (body class toggle
   from JS: `misc-orig-visible`). Same position the nav sits in, same styling
   conventions, so the two read as alternate states of one element. */
.s-misc-orig .misc-orig-toptitle {
  position: fixed;
  top: 0; left: 0; width: 100%;
  text-align: center;
  font-size: 13px; font-weight: 400;
  letter-spacing: 0.5px; line-height: normal;
  padding: 14px 24px; color: #fff;
  z-index: 99999;       /* same band as #portfolio-nav */
  pointer-events: none;
  mix-blend-mode: exclusion;
  display: none;        /* hidden until misc-original is the active section */
}
/* toptitle stays hidden; nav remains visible while scrolling through misc. */
/* Multi-column dialogue text (mirrors the .misc-text-col layout). */
.s-misc-orig .misc-orig-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  line-height: 17px;
  color: #888;
  column-count: 3;
  column-gap: var(--misc-orig-gutter);
  column-fill: balance;
  margin-bottom: 40px;
}
.s-misc-orig .misc-orig-text .misc-orig-para {
  margin-bottom: 18px;
  break-inside: avoid;
}
.s-misc-orig .misc-orig-text .misc-orig-head { color: #ddd; }
.s-misc-orig .misc-orig-text .misc-orig-it   { color: #888; }
/* JS-driven masonry (Masonry.js): row-major fill order, no vertical gaps.
   Column count is fixed at GRID_COLS (currently 8); item width = column width
   in % so cards reflow with the viewport. */
.s-misc-orig {
  --misc-orig-cols: 6;
  --misc-orig-gutter: 20px;
}
.s-misc-orig .misc-orig-grid {
  position: relative;
}
.s-misc-orig .misc-orig-item,
.s-misc-orig .misc-orig-grid-sizer {
  /* (100% - (N-1) gutters) / N  →  one column width */
  width: calc(
    (100% - (var(--misc-orig-cols) - 1) * var(--misc-orig-gutter))
    / var(--misc-orig-cols)
  );
}
.s-misc-orig .misc-orig-item {
  margin-bottom: 32px;
  cursor: pointer;
}
.s-misc-orig .misc-orig-title {
  font-weight: 500;
  letter-spacing: 1px;
  color: #ddd;
  padding-bottom: 3px;
  line-height: 10px;
}
.s-misc-orig .misc-orig-plus {
  color: #888;
  font-weight: 400;
  padding-top: 0;
  padding-bottom: 3px;
  line-height: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-misc-orig .misc-orig-plus:empty { display: none; }
/* Stack-of-photos look: up to 3 images per project, offset diagonally with
   the next image peeking out on the right/bottom. On hover the back image
   cycles to the front (handled in JS). */
.s-misc-orig {
  --misc-orig-stack-offset: 8px;
}
.s-misc-orig .misc-orig-imgwrap {
  position: relative;
  background: transparent;
  overflow: visible;
}
.s-misc-orig .misc-orig-img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  /* Each image is slightly narrower so the offset stack fits the cellW. */
  width: calc(100% - 2 * var(--misc-orig-stack-offset));
  height: auto;
  /* Solid black fill so PNG/WebP transparency reads on the dark page bg
     (and so back-stack images don't show through). */
  background: #000;
  outline: 0.5px solid #555;
  outline-offset: -0.5px;
}
/* No outline when only one image is visible — either a 1-image project or
   a `.first-only` locked item (stack hidden, no peek to delineate). */
.s-misc-orig .misc-orig-imgwrap > .misc-orig-img:only-of-type,
.s-misc-orig .misc-orig-item.first-only .misc-orig-img {
  outline: none;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease;
}
.s-misc-orig .misc-orig-img[data-rank="0"] { transform: translate(0, 0); z-index: 30; }
.s-misc-orig .misc-orig-img[data-rank="1"] {
  transform: translate(var(--misc-orig-stack-offset), var(--misc-orig-stack-offset));
  z-index: 20;
}
.s-misc-orig .misc-orig-img[data-rank="2"] {
  transform: translate(calc(2 * var(--misc-orig-stack-offset)), calc(2 * var(--misc-orig-stack-offset)));
  z-index: 10;
}
.s-misc-orig .misc-orig-counter { display: none; }

/* Click-to-lock: only the front image is shown for the locked project
   (back-stack siblings are hidden). No visual badge — silent toggle. */
.s-misc-orig .misc-orig-item.first-only .misc-orig-img:not([data-rank="0"]) {
  display: none;
}

@media (max-width: 640px) {
  .s-misc-orig { padding: 60px 20px 40px 20px; }
  .s-misc-orig .misc-orig-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    column-gap: 16px;
    row-gap: 30px;
  }
}