/* ── horizoncolumns: portrait (default, mobile-first) ──────────────────
   .hcol-group stacks as a normal block; .hcol-label looks like a plain
   bold <h3>; bare columns show a hairline <hr>-style divider above them.
   Landscape rules are in the @media block below.                         */

.hcol-group {
  display: block;
  margin-bottom: 1.5rem;
}

.hcol-label {
  writing-mode: horizontal-tb;
  font-family: "Toppan Bunkyu Midashi Mincho", "Ten Mincho", "HYXuanSong", "FZYouSongJ GBK", "Source Han Serif", "Noto Serif TC", -apple-system, BlinkMacSystemFont, serif;
  font-weight: bold;
  font-size: 1.17em;
  margin: 1em 0 0.5em;
  color: currentColor;
}

.hcol-group--bare::before {
  content: '';
  display: block;
  background: radial-gradient(#919191 .5px, transparent 1px) 0 0 / 3px 3px, var(--dynamic-bg-color, transparent);
  height: 0.9rem;
  max-height: 1rem;
  margin: 2.5rem 0;
  border: none;
}

/* Archive columns: hidden until toggled */
.hcol-group--archived {
  display: none;
}

.hcol-scroll.archive-open .hcol-group--archived {
  display: block;
}

/* ── horizoncolumns: landscape ─────────────────────────────────────────
   Mirrors the archive landscape layout. Full-bleed technique:
     width: 100vw + margin-left: calc(50% - 50vw)
   escapes the centered .container (max-width: 768px) so the scroll stage
   spans edge-to-edge. padding-left aligns the first column with the
   surrounding page content edge.

   352 = (768 - 2x32) / 2  — half the container content width, used to
   compute the content-left offset from viewport centre on wide screens. */
@media (orientation: landscape) {
  .hcol-scroll {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: clip;
    align-items: flex-start;
    gap: 3.3rem;
    /* Full-bleed */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: max(32px, calc(50vw - 412px));
    padding-right: 32px;
    box-sizing: border-box;
  }

  .hcol-group {
    flex-shrink: 0;
    margin-bottom: 0;
    display: flex;
    gap: 1.87rem;
    align-items: flex-start;
  }

  /* Labeled column: vertical kanji-style label, same as .archive-year-label */
  .hcol-label {
    writing-mode: vertical-rl;
    font-family: "Redaction", "Toppan Bunkyu Midashi Mincho", "Ten Mincho", "HYXuanSong",
      "FZYouSongJ GBK", "Source Han Serif", "Noto Serif TC",
      -apple-system, BlinkMacSystemFont, serif;
    font-size: 2.33em;
    font-weight: 900;
    letter-spacing: 0.015em;
    color: color-mix(in srgb, currentColor 56%, transparent);
    flex-shrink: 0;
    padding: 2px 0 0 0;
    line-height: 1;
    margin-top: 0;
    text-wrap: nowrap;
  }

  /* Cap column content width */
  .hcol-body {
    max-width: 560px;
  }

  /* Bare column: suppress the portrait ::before divider */
  .hcol-group--bare::before {
    display: none;
  }

  /* Wide-column mode: no body max-width */
  .hcol-scroll--wide .hcol-body {
    max-width: 100vw;
  }

  /* Reset the global break-out media rules inside wide columns.
     The break-out (left:50%/transform) is designed for single-column pages;
     inside a horizontally-scrolling hcol-body it overflows the column. */
  .hcol-scroll--wide .hcol-body img:not(.icon),
  .hcol-scroll--wide .hcol-body video,
  .hcol-scroll--wide .hcol-body iframe:not(.giscus-frame):not(.giscus),
  .hcol-scroll--wide .hcol-body embed,
  .hcol-scroll--wide .hcol-body object {
    position: static !important;
    left: auto !important;
    transform: none !important;
    max-width: 95vw;
    max-height: 90vh;
    width: auto;
  }

  /* Reset the gallery-paragraph full-bleed positioning inside wide columns */
  .hcol-scroll--wide .hcol-body p:has(img[alt~="_gallery"]) {
    position: static;
    left: auto;
    translate: none;
    width: auto;
  }

  /* Archive columns hidden by default in landscape too.
     Must come AFTER .hcol-group { display: flex } to win cascade. */
  .hcol-group--archived {
    display: none;
  }

  /* Archive toggle: pointer cursor and dim/reveal label */
  .hcol-archive-toggle {
    cursor: pointer;
  }

  .hcol-archive-toggle .hcol-label {
    opacity: 0.56;
    transition: opacity 0.2s ease;
  }

  .hcol-archive-toggle:hover .hcol-label,
  .hcol-scroll.archive-open .hcol-archive-toggle .hcol-label {
    opacity: 1;
  }

  /* Reveal archive columns when open */
  .hcol-scroll.archive-open .hcol-group--archived {
    display: flex;
  }

  /* Horizontal fill for links inside vertical labels (matches tategaki fix) */
  .hcol-label a:not(.icon) {
    text-decoration: underline 2px #E2001A;
    text-underline-offset: -2px;
    background-image: linear-gradient(
      to left,
      rgba(0, 0, 0, 0) 50%,
      var(--link-hover-accent, #e2001a) 50%
    );
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: all 0.2s ease-in;
  }

  .hcol-label a:hover:not(.icon),
  .hcol-label a:focus:not(.icon) {
    background-position: 0 0;
  }
}