/* Show the work: tab (work-show/tab.js; tokens.css, --work-show tab). The Work panel: the home page's projects, at the
   home page's widths unless a layout says otherwise, one or two to a row (--work-tab-cols), with About's greys and rows for the rows layout. The Orchard is its
   first screen alone. */

/* About's colours, which about.css keeps on .about. */
#work {
  --about-ink: #111111;
  --about-body: rgba(17, 17, 17, 0.9);
  --about-quiet: rgba(154, 147, 147, 0.9);
  --about-rule: rgba(34, 28, 25, 0.07);
  --about-split: oklch(0.971 var(--grey-chroma) var(--grey-hue));
  --about-hover: oklch(0.979 var(--grey-chroma) var(--grey-hue));
  color: var(--about-ink);
}

#work .column :is(h2, h3, p, ul) {
  margin: 0;
  padding: 0;
  font: inherit;
}

#work .rows h3 {
  font-size: calc(var(--text-size) + (var(--about-text) - var(--text-size)) * var(--about-one-size));
  font-weight: 350;
}

#work .rows li > p:first-of-type {
  font-size: calc(13px + (var(--about-text) - 13px) * var(--about-one-size));
}

#work .rows .slash,
#work .rows li > p span {
  color: var(--about-quiet);
}

/* A meeple in a row stands in a logo's 28px square, its pixels kept. */
#work .rows .logo.meeple {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* The Orchard, its first screen alone: no scroll, no chevron down to the work. */
html[data-work-show="tab"] #orchard {
  overflow: hidden;
}

html[data-work-show="tab"] #orchard .hero .down {
  display: none;
}

/* Only the layout that uses them shows the rows and the rail; the column holds only the rows. */
html:not([data-work-look="intro"]) #work :is(.work-intro, .work-more),
html:not([data-work-look="rows"]) #work .column,
html:not([data-work-look="rail"]) #work .work-rail {
  display: none;
}

/* The rail: first in the panel, no height, held at the card's middle as the panel scrolls, the meeples to the left of
   the column. */
#work .work-rail {
  position: sticky;
  top: 50%;
  z-index: 1;
  height: 0;
}

#work .work-rail-in {
  position: absolute;
  left: calc(50% - 33.5px - var(--about-width) / 2 - 88px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  translate: 0 -50%;
}

#work .work-rail button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity var(--motion-fast, 150ms) ease, background-color var(--motion-fast, 150ms) ease;
}

#work .work-rail button img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
}

#work .work-rail button[aria-current] {
  opacity: 1;
}

@media (hover: hover) {
  #work .work-rail button:hover {
    opacity: 1;
    background: var(--about-hover);
  }
}

#work .work-rail button:focus-visible {
  outline: 2px solid var(--ink, #111);
  outline-offset: 2px;
  opacity: 1;
}

/* The first project starts --about-top down the card, where About's photo does, less the projects' own 24px top
   padding; on a phone 56px down, as About's column does there. In rows the list above sets the room. */
html:not([data-work-look="rows"]) #work .projects {
  margin-top: calc(var(--about-top) - 24px);
}

@media (max-width: 899px) {
  html:not([data-work-look="rows"]) #work .projects {
    margin-top: 32px;
  }
}

/* The layouts, on a desktop. A phone keeps one column whichever (about.css and projects.css below 900px). */
@media (min-width: 900px) {
  /* column, rows and rail: the projects in About's column. */
  html:is([data-work-look="column"], [data-work-look="rows"], [data-work-look="rail"], [data-work-look="intro"]) #work .projects {
    position: relative;
    left: -33.5px;
    width: var(--about-width);
  }

  /* home keeps the projects' own widths (projects.css). */

  /* Two to a row (--work-tab-cols 2, the Columns switch; Keyan, 2026-11-10: "give control for 2 col on work page"), on
     any layout: the projects widen to the home page's two-column width and sit two to a row, --project-grid-gap across
     and --project-gap down, tops level, each filling its half (so Each's own widths step aside). The rail moves out to
     the wider column's left. This comes after the layouts so it wins over their column width. */
  html[data-work-cols="2"] #work .projects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: var(--project-grid-gap, 48px);
    row-gap: var(--project-gap);
    left: 0;
    width: min(var(--project-grid-width, 80vw), 100% - 32px);
  }

  html[data-work-cols="2"] #work .project {
    width: auto;
    margin-inline: 0;
  }

  html[data-work-cols="2"] #work .work-rail-in {
    left: calc(50% - min(var(--project-grid-width, 80vw), 100% - 32px) / 2 - 64px);
  }
}

@media (max-width: 899px) {
  #work .work-rail {
    display: none;
  }
}

/* intro (Keyan, 2026-11-11, after yiyang.ch): the raccoon, "Core work" and a line about the work in About's column and
   type (the title's size and 350 weight, the lede's body), then the projects, with "Additional work" under a divider
   before the fourth. */
#work .work-intro {
  position: relative;
  left: -33.5px;
  width: var(--about-width);
  margin: var(--about-top) auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#work .work-intro-meeple {
  width: 72px;
  height: auto;
  margin-bottom: 20px;
}

#work .work-intro h2,
#work .work-more {
  margin: 0;
  font-size: var(--about-title-size);
  font-weight: 350;
  line-height: 1.4;
  color: var(--about-ink);
}

#work .work-intro p {
  margin: 0;
  font-size: calc(15px + (var(--about-text) - 15px) * var(--about-one-size));
  line-height: 1.6;
  color: var(--about-body);
}

/* Additional work: a heading of its own under a 1px rule, the projects' gap above it. */
#work .work-more {
  /* The list's own gap sits on both sides of the heading, so pull it in: about 56px from the last project to the rule,
     32px from the rule to the words, 8px more before the next project. */
  margin-top: calc(56px - var(--project-gap));
  margin-bottom: calc(8px - var(--project-gap));
  padding-top: 32px;
  border-top: 1px solid var(--about-rule);
}

html[data-work-look="intro"] #work .projects {
  margin-top: 40px;
}

@media (max-width: 899px) {
  #work .work-intro {
    left: 0;
    width: calc(100% - 56px);
    margin-top: 56px;
  }
}

/* The gallery (work-show/gallery.js): a strip across the panel at the cover's height. Hidden until its project is under
   the hand; then its pictures come out from behind the cover to either side and it scrolls sideways. */
#work .project {
  position: relative;
}

#work .work-gallery {
  position: absolute;
  z-index: 2;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  pointer-events: none;
  visibility: hidden;
}

#work .work-gallery::-webkit-scrollbar {
  display: none;
}

#work .work-gallery-track {
  display: flex;
  height: 100%;
  gap: 16px;
  width: max-content;
}

#work .work-gallery img {
  height: 100%;
  width: auto;
  flex: none;
  object-fit: cover;
  border-radius: var(--cover-radius, 20px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transition: opacity 180ms ease, translate 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

#work .work-gallery img[data-side="left"] { translate: 40px 0; }
#work .work-gallery img[data-side="right"] { translate: -40px 0; }
#work .work-gallery img.is-cover { opacity: 1; translate: none; }

#work .project.is-gallery .work-gallery {
  pointer-events: auto;
  visibility: visible;
  cursor: pointer;
}

#work .project.is-gallery .work-gallery img {
  opacity: 1;
  translate: none;
}

#work .project.is-gallery .cover {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  #work .work-gallery img { transition: opacity 120ms ease; translate: none; }
}