/* Works gallery: same layout as the template, one circular tile per project.
   Clicking a tile opens the project view (works.js).
   Colours follow the template's theme variables: in the light theme --c-dark-primary is
   #0f0f0f and --c-light-primary #f0f0f0, in the "invert color" theme they swap, so the
   project view is dark on the light theme and light on the inverted one. */

#works .works-list__thumb {
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: #1c1c1c;
}
html[data-theme=dark] #works .works-list__thumb { background: #e3e3e3; }
#works .works-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
#works .works-list__item:hover .works-list__thumb img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  #works .works-list__thumb img { transition: none; }
}

/* Layout: circles at 88% of the column width, centred, and every other column half a tile
   lower, like a brick bond turned 90 degrees (the column filler in the bundle counts that
   half tile, see tools/apply_content.py). All percentages resolve against the column width,
   so the circle centres sit one column pitch (column width + gap) apart down each column and
   across, and the gap between circles is the same vertically and horizontally.
   On desktop the lowered column also gets the half tile below it, so all columns measure
   the same and the template's scrubbed parallax (which bottom-aligns the columns) keeps
   the stagger instead of evening it out. */
#works .columns-list { --pw-gap: var(--column-gap); }
#works .works-list__thumb { width: 88%; margin: 0 auto; }
#works .works-list__item:not(:first-child) { margin-top: calc(12% + var(--pw-gap)); }
#works .columns-list__item:nth-child(even) { padding: calc(50% + var(--pw-gap) / 2) 0; }
@media (max-width: 1023px) {
  #works .columns-list { --pw-gap: var(--offset-6); }
  #works .columns-list__item:nth-child(even) { padding-bottom: 0; }
}

/* The site's own cursor (a small difference-blended dot, z-index 1100; the system cursor is
   hidden on desktop) sits above the project view and its open/close disc while they are up */
html:has(.pw-work.is-open) .cursor-pos,
html:has(.pw-work-disc.is-on) .cursor-pos { z-index: 9001; }

/* ---- project view ---------------------------------------------------- */
.pw-work {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--c-dark-primary);
  color: var(--c-light-primary);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: none;   /* not visibility: a fresh subtree on each open, no stale inherited style */
}
.pw-work.is-open { display: block; }

/* open/close: a plain dark disc scales over the screen, a ghost of the clicked
   tile grows and fades on top of it (transform + opacity only) */
.pw-work-disc,
.pw-work-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9000;
  border-radius: 50%;
  display: none;
  will-change: transform, opacity;
}
.pw-work-disc { background: var(--c-dark-primary); }
.pw-work-ghost { overflow: hidden; }
.pw-work-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-work-disc.is-on,
.pw-work-ghost.is-on { display: block; }

.pw-work__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  font-size: .84375rem;  /* matches the site's enlarged small text (type.css) */
  line-height: 1;
  background: linear-gradient(var(--c-dark-primary) 60%, color-mix(in srgb, var(--c-dark-primary) 0%, transparent));
}
.pw-work__bar button,
.pw-work__bar a {
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
/* Close: a large target (about 135 x 60 px, square corners so the whole box takes the click)
   at the top right of the sticky bar, label a step up from the small text and the x in a
   44 px ring that fills on hover */
.pw-work__bar { padding: .5rem .5rem .5rem 1rem; }
.pw-work__bar .pw-work__close {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 3.75rem;
  padding: .5rem .5rem .5rem 1.5rem;
  font-size: 1.125rem;
  letter-spacing: -.01em;
}
.pw-work__close svg {
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  padding: .875rem;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 50%;
  transform: rotate(45deg);
  transition: background-color .25s ease, border-color .25s ease;
}
.pw-work__close:hover svg { background: color-mix(in srgb, currentColor 18%, transparent); border-color: currentColor; }
.pw-work__close:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.pw-work__close:focus:not(:focus-visible) { outline: none; }

.pw-work__head {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  column-gap: 1rem;
  padding: 18vh 1rem 6rem;
}
.pw-work__title {
  grid-column: 1 / -1;
  margin: 0 0 4rem;
  font-size: clamp(3rem, 9vw, 10rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.04em;
}
.pw-work__meta {
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .75rem 2rem;
  margin: 0;
  font-size: .84375rem;  /* matches the site's enlarged small text (type.css) */
  line-height: 1.3;
}
.pw-work__meta dt { opacity: .5; }
.pw-work__meta dd { margin: 0; }
.pw-work__text {
  grid-column: 5 / 9;
  margin: 0;
  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -.01em;
}
.pw-work__visit {
  grid-column: 5 / 9;
  justify-self: start;
  margin-top: 2rem;
  font-size: .84375rem;  /* matches the site's enlarged small text (type.css) */
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.pw-work__shots {
  display: grid;
  gap: 1rem;
  padding: 0 1rem;
}
.pw-work__shots img {
  width: 100%;
  height: auto;
  display: block;
  background: #1c1c1c;
  opacity: 0;
  transition: opacity .5s ease-out;
}
.pw-work__shots img.is-ready { opacity: 1; }
html[data-theme=dark] .pw-work__shots img { background: #e3e3e3; }
@media (prefers-reduced-motion: reduce) {
  .pw-work__shots img { transition: none; }
}

.pw-work__next {
  display: block;
  margin-top: 1rem;
  padding: 8rem 1rem 3rem;
  border-top: 1px solid color-mix(in srgb, var(--c-light-primary) 15%, transparent);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  background: none;
  width: 100%;
  text-align: left;
  font: inherit;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
.pw-work__next small { display: block; font-size: .84375rem; opacity: .5; margin-bottom: 1rem; }
.pw-work__next span {
  font-size: clamp(2.5rem, 6vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.04em;
}

@media (max-width: 1023px) {
  .pw-work__head { padding-top: 14vh; padding-bottom: 3rem; }
  .pw-work__title { margin-bottom: 2.5rem; }
  .pw-work__meta { grid-column: 1 / -1; margin-bottom: 2rem; }
  .pw-work__text, .pw-work__visit { grid-column: 1 / -1; }
  .pw-work__shots { gap: .5rem; padding: 0 .5rem; }
  .pw-work__next { padding-top: 5rem; }
}


/* company name over each circle on hover / keyboard focus */
#works .works-list__thumb { position: relative; }
#works .works-list__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(9, 11, 42, .62);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
#works .pw-tile-name {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, calc(-50% + 6px));
  max-width: 80%;
  color: #f0f0f0;
  font-size: clamp(1.25rem, 2.2vw, 2.25rem);
  line-height: 1;
  letter-spacing: -.03em;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
#works .works-list__item:hover .works-list__thumb::after,
#works .works-list__thumb:focus-visible::after { opacity: 1; }
#works .works-list__item:hover .pw-tile-name,
#works .works-list__thumb:focus-visible .pw-tile-name { opacity: 1; transform: translate(-50%, -50%); }
@media (hover: none) {
  /* touch: no hover, so the name sits small at the bottom of each circle */
  #works .pw-tile-name { opacity: 1; top: auto; bottom: 12%; transform: translateX(-50%); font-size: .875rem; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #works .pw-tile-name, #works .works-list__thumb::after { transition: none; }
}