html {
  scroll-behavior: smooth;
}

body {
  font-family: "TimesHakgyoNoto2", serif;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--link);
  text-decoration: none;
  &:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

nav li a:hover::after {
  content: " 😘";
  position: absolute;
  padding-left: 0.5rem;
}

h4::before, h4::after {
  content: "*";
}

/* (a) (b) (c) … lettered list */
ul.alpha {
  counter-reset: alpha;
  text-indent: -1.25em;
  margin-left: 1.25em;
}
ul.alpha > li {
  counter-increment: alpha;
}
ul.alpha > li::before {
  content: "(" counter(alpha, lower-alpha) ") ";
}

ul.dot > li {
  position: relative;
  padding-left: 1.25em;
}
ul.dot > li::before {
  content: "·";
  position: absolute;
  margin-left: -1.25em;
}

article > p {
  margin-bottom: 1em;
}

/* main::before {
  content: "";
  position:fixed;
  height: 100vh;
  top:0;
  margin-left: -8px;
  border-right: 1px solid;
} */

/* details/summary — keep heading inline with the triangle */
summary {
  cursor: pointer;
}
summary h3 {
  display: inline;
}
summary h3 {
  padding-left: 0.25em;
}

/* Poster list: horizontal row (built left-to-right), then the whole track is
   rotated 90° clockwise as one piece so it reads top-to-bottom on the page. */
#poster-list {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 4rem;                     /* space between posters */
  transform: rotate(90deg) translateY(-100%);   /* -100% = track's own height → shifts it right after rotating */
  transform-origin: top left;
}
#poster-list > div {
  flex: 0 0 auto;                /* size to content; don't shrink */
  width: calc(8 * var(--col));   /* per-poster width; tune to taste */
}

figure.poster {
  display: inline-flex;
  align-items: center;   /* pin the image to the bottom of the box; empty space goes above */
  /* height: calc(5lh); */
  vertical-align: bottom;
}
figure.poster > img {
  /* Cap by BOTH dimensions so the aspect ratio is always preserved:
     tall/normal images are limited by height (the figure's N-line box),
     very wide images are limited by the column width. Never distorts. */
  max-height: calc(100% - 0.2em);
  max-width: 100%;
  width: auto;
  height: auto;
  /* padding-bottom: 0.2em; */
}

sup {
  position: absolute;
  margin: 0.25rem;
}

#poster-number:hover::after {
  content: " →";
  margin-left: 0.5rem;
}

/* CSS-only carousel — horizontal scroll-snap track (no JS) */
.carousel {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.carousel > * {
  flex: 0 0 auto;        /* keep each slide's own width (e.g. .col-6), don't shrink */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;     /* stack poem over caption; set the height per-slide in markup */
}
/* caption (last child) pinned to the bottom; the poem above takes the slack */
.carousel > * > :last-child {
  margin-top: auto;
}
/* optional: hide the scrollbar */
.carousel {
  scrollbar-width: none;            /* Firefox */
}
.carousel::-webkit-scrollbar {
  display: none;                    /* Chrome/Safari */
}

.track-tighter {
  letter-spacing: -0.1em;
}

/* menu-label ticker: two lines cycle one at a time, ~1s each.
   The 3rd line duplicates the 1st so the loop reset is seamless.
   The bar (.menu-label) IS the viewport — it sets its own height (h-2-5)
   and clips; each line fills that height and is vertically centered, and
   the roll steps by a full viewport (100%) rather than a single text line. */
.menu-label {
  overflow: hidden;        /* bar clips; the __ticker track scrolls inside */
  cursor: pointer;         /* it's a <label for="menu-toggle"> — signal it's tappable */
  position: relative;
  z-index: 2;              /* bar sits above the sliding panel so the panel tucks behind it */
  background: #fff;        /* opaque so the panel's closed (translated-up) position is masked */
}

/* CSS-only menu toggle. The hidden #menu-toggle checkbox drives its siblings:
   the .menu-content panel slides down from behind the bar, and the .menu-overlay
   fades in behind it. Both are click-to-close (the overlay is a <label> too). */
.menu-content {
  position: absolute;      /* out of flow so the closed menu doesn't grow the fixed bar */
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;              /* above the overlay, below the bar */
  background: #fff;
  transform: translateY(-100%);   /* closed: tucked up behind the opaque bar */
  transition: transform 0.35s ease;
}
#menu-toggle:checked ~ .menu-content {
  transform: translateY(0);       /* open: slid down into view */
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;              /* behind the panel, above page content (container is z-50) */
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;              /* non-interactive while closed */
  transition: opacity 0.35s ease, visibility 0s 0.35s;
}
#menu-toggle:checked ~ .menu-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;  /* no delay on the way in */
}

/* JS adds this for a one-shot instant close (nav-item tap) — no slide/fade */
.menu-bar--instant .menu-content,
.menu-bar--instant .menu-overlay {
  transition: none;
}

/* icon swap: show open by default, close when toggled */
.menu-icon--close { display: none; }
#menu-toggle:checked ~ .menu-label .menu-icon--open { display: none; }
#menu-toggle:checked ~ .menu-label .menu-icon--close { display: block; }

/* when open: stop the ticker and show the first two label lines, stacked */
#menu-toggle:checked ~ .menu-label {
  height: auto;
  align-items: start;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
#menu-toggle:checked ~ .menu-label .menu-label__ticker {
  animation: none;
  transform: none;
}
#menu-toggle:checked ~ .menu-label .menu-label__ticker > div {
  height: auto;              /* natural line height so lines stack */
  display: block;
}
#menu-toggle:checked ~ .menu-label .menu-label__ticker > div:nth-child(n+3) {
  display: none;             /* keep only lines 1 & 2 */
}

/* anchor jumps: leave room for the fixed menu bar (2.5rem) so it doesn't
   cover the section heading. Only below lg, where the bar exists. */
@media (max-width: 1023.98px) {
  section[id] {
    scroll-margin-top: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-content { transition: none; }
  .menu-overlay { transition: opacity 0s, visibility 0s; }
}
.menu-label__ticker,
.menu-label__ticker > div {
  height: 100%;
}
.menu-label__ticker > div {
  display: flex;
  align-items: center;
}
.menu-label__ticker {
  animation: menu-label-roll 12s infinite;
}
@keyframes menu-label-roll {
  0%,   20% { transform: translateY(0); }         /* line 1 holds */
  25%,  45% { transform: translateY(-100%); }     /* roll up to line 2, holds */
  50%,  70% { transform: translateY(-200%); }     /* roll up to line 3, holds */
  75%,  95% { transform: translateY(-300%); }     /* roll up to line 4, holds */
  100%      { transform: translateY(-400%); }     /* roll up to line 5 (= line 1); loop resets seamlessly */
}
@media (prefers-reduced-motion: reduce) {
  .menu-label__ticker { animation: none; }
}