/* The directory is always a vertical snap destination, including when leaving About. */
html.reading-directory { scroll-snap-type: y mandatory; }
#contents { scroll-snap-align: start; scroll-snap-stop: always; }

/* Progressive enhancement: without JS or enough vertical room, retain the old grid. */
html.horizontal-work #work {
  position: relative;
  width: 100%;
  max-width: none;
  height: var(--work-scroll-height, 100svh);
  min-height: 100svh;
  padding: 0;
}
.horizontal-work #work .work-stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(1280px, calc(100% - 112px));
  height: 100svh;
  margin: auto;
  padding: 108px 0 28px;
}
.horizontal-work .work-stage > * { flex-shrink: 0; }
.horizontal-work #work .section-kicker { margin-bottom: 18px; }
.horizontal-work #work .section-title { margin-bottom: 24px; }
.horizontal-work .project-window {
  width: 100%;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
.horizontal-work .project-window:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.horizontal-work #work .projects {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: min(680px, calc(100% - 80px));
  align-items: start;
  gap: 32px;
  padding: 4px 0 10px;
  transform: translate3d(calc(-1 * var(--work-offset, 0px)), 0, 0);
  will-change: transform;
}
.horizontal-work #work .project {
  grid-column: auto;
  margin: 0;
  padding: 0;
  scroll-snap-align: none;
}
.horizontal-work #work .project-image {
  height: clamp(180px, calc(100svh - 520px), 420px);
}
.horizontal-work #work .theatre-cover > img {
  width: auto;
  height: calc(100% - 24px);
  max-width: 49%;
  object-fit: contain;
}
.horizontal-work #work .project-info { margin-top: 16px; }
@media (min-width: 801px) {
  .horizontal-work #work .jala-cover {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 12px 28px;
    padding: 24px 30px;
  }
  .horizontal-work #work .cover-index { grid-column: 1 / -1; padding-right: 110px; }
  .horizontal-work #work .game-title { margin-top: 0; align-self: center; }
  .horizontal-work #work .game-title i { margin-top: 8px; }
  .horizontal-work #work .game-levels { margin-top: 0; align-self: center; }
}
.work-scroll-controls { margin-top: 14px; padding-left: 110px; font-size: var(--read-support); color: var(--muted); }
.horizontal-work .work-scroll-controls:not([hidden]) { display: flex; align-items: center; gap: 24px; }
.work-scroll-count { color: var(--blue); white-space: nowrap; font-variant-numeric: tabular-nums; }
.work-scroll-progress { height: 2px; flex: 1; background: var(--line); }
.work-scroll-progress > span {
  display: block;
  height: 100%;
  background: var(--blue);
  transform: scaleX(var(--work-progress, 0));
  transform-origin: left;
}
.work-touch-hint { display: none; }
@media (hover: none) {
  .work-wheel-hint { display: none; }
  .work-touch-hint { display: inline; }
}
@media (max-width: 1100px) {
  .horizontal-work #work .work-stage { width: calc(100% - 70px); }
}
@media (max-width: 800px) {
  .horizontal-work #work .work-stage { width: calc(100% - 40px); padding: 96px 0 24px; }
  .horizontal-work #work .projects { grid-auto-columns: 100%; gap: 24px; }
  .horizontal-work #work .project-image { height: clamp(200px, calc(100svh - 480px), 360px); aspect-ratio: auto; }
  .horizontal-work #work .section-title { margin-bottom: 20px; }
  .horizontal-work #work .section-title > .handwritten { margin-top: 8px; }
  .horizontal-work #work .project-info h3 { font-size: 26px; }
  .horizontal-work .work-scroll-controls:not([hidden]) { gap: 14px; }
  .work-scroll-controls { font-size: var(--read-meta); }
}
@media (min-width: 801px) and (max-height: 750px) {
  .horizontal-work #work .work-stage { padding: 90px 0 20px; }
  .horizontal-work #work .section-kicker { margin-bottom: 10px; }
  .horizontal-work #work .section-title { margin-bottom: 14px; }
  .horizontal-work #work .section-title h2 { font-size: 32px; }
  .horizontal-work #work .section-title > .handwritten { font-size: 18px; }
  .horizontal-work #work .project-image { height: clamp(140px, calc(100svh - 420px), 280px); }
  .horizontal-work #work .project-info { margin-top: 10px; }
  .horizontal-work #work .project-info h3 { margin-block: 4px; font-size: 28px; }
  .horizontal-work #work .jala-cover { padding: 16px 24px; gap: 8px 24px; }
  .horizontal-work .work-scroll-controls { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .horizontal-work #work .projects { will-change: auto; }
}

/* Let the closing page fill its screen; anchor the footer to the lower edge. */
#contact.contact {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-top: clamp(150px, 17svh, 190px);
  padding-bottom: 20px;
}
#contact > .section-kicker { flex-shrink: 0; margin-bottom: clamp(32px, 5svh, 60px); }
#contact .contact-main { flex: 1; align-items: center; margin-bottom: clamp(30px, 5svh, 60px); }
#contact footer { flex-shrink: 0; margin-top: auto; padding: 24px 0 64px; }
@media (max-width: 700px) {
  #contact.contact { padding-top: 120px; }
  #contact .contact-main { flex: none; }
  #contact footer { margin-top: auto; }
}