/* Projects: lila and Plática. The site's frame stays neutral; each project
   brings its own material (a real page from lila's renderer, Plática's art). */

.projects {
  padding-block: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--rule);
}

.projects-head h2 {
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.projects-head p {
  margin-top: 0.75rem;
  color: var(--slate);
}

.project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 36rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.project + .project {
  border-top: 1px solid var(--rule);
}

.project--platica {
  grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
}

.project-copy > p {
  max-width: 34em;
  text-wrap: pretty;
}

.project-copy > p + p {
  margin-top: 1rem;
}

.project-name {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.project-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

/* lila's mark is black: give it the paper it's drawn on, in both themes */
.project-icon--lila {
  padding: 3px;
  background: #fbfaf6;
  box-shadow: inset 0 0 0 1px #1d1d1b1f;
}

/* Plática's tile is cream: a hairline keeps its edge on the light paper */
.project-icon--platica {
  box-shadow: 0 0 0 1px #1f1a1614;
}

.project-copy > .project-lede {
  margin-top: 0.9rem;
  font-size: var(--lede);
  line-height: 1.4;
  color: var(--slate);
  text-wrap: balance;
}

.project-copy > .project-meta {
  color: var(--slate);
}

.project .actions {
  margin-top: 1.75rem;
}

/* lila: a real page, and a loupe on its pixels */

.lila-plate {
  /* the page's width on screen, and the loupe's spot, in the X3's own pixels */
  --scale: 0.5;
  --w: calc(480px * var(--scale));
  --bezel: 12px;
  --cx: 458;
  --cy: 203;
  --margin-x: 461.5;
  --zoom: 2;
  --loupe: 168px;
  --gap: 116px;
  --spot: calc(var(--loupe) / var(--zoom) * var(--scale));
  --spot-x: calc(var(--bezel) + var(--cx) * var(--scale) * 1px);
  --spot-y: calc(var(--bezel) + var(--cy) * var(--scale) * 1px);

  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding: clamp(1.75rem, 4vw, 2.75rem) 1.5rem 1.5rem;
  border-radius: 12px;
  background: var(--lila-shelf);
  border: 1px solid var(--rule);
}

:root {
  --lila-shelf: #f3f0e7;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --lila-shelf: var(--shoal);
  }
}

:root:where([data-theme="dark"]) {
  --lila-shelf: var(--shoal);
}

.lila-stage {
  position: relative;
  width: calc(var(--spot-x) + var(--gap) + var(--loupe) / 2);
  max-width: 100%;
}

.lila-reader {
  width: calc(var(--w) + 2 * var(--bezel));
  padding: var(--bezel);
  border-radius: 18px;
  background: #2b2a27;
  box-shadow: inset 0 0 0 1px #ffffff14, 0 22px 40px -24px #1d1d1b99;
}

/* E-paper is always light; the renderer's white becomes the panel's grey */
.lila-screen {
  isolation: isolate;
  background: #f1f0eb;
  border-radius: 2px;
}

.lila-screen img {
  display: block;
  width: var(--w);
  height: auto;
  mix-blend-mode: multiply;
}

.lila-spot,
.lila-loupe {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.lila-spot {
  left: calc(var(--spot-x) - var(--spot) / 2);
  top: calc(var(--spot-y) - var(--spot) / 2);
  width: var(--spot);
  height: var(--spot);
  border: 1.5px solid #2f5d50;
}

/* the leader from the spot to the loupe */
.lila-spot::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: calc(var(--gap) - var(--loupe) / 2 - var(--spot) / 2);
  border-top: 1.5px solid #2f5d50;
}

.lila-loupe {
  left: calc(var(--spot-x) + var(--gap) - var(--loupe) / 2);
  top: calc(var(--spot-y) - var(--loupe) / 2);
  width: var(--loupe);
  height: var(--loupe);
  overflow: hidden;
  background-color: #f1f0eb;
  background-image: url("/lila/pages/x4/m-5.png");
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  background-size: calc(480px * var(--zoom)) calc(800px * var(--zoom));
  background-position:
    calc(var(--loupe) / 2 - var(--cx) * var(--zoom) * 1px)
    calc(var(--loupe) / 2 - var(--cy) * var(--zoom) * 1px);
  image-rendering: pixelated;
  box-shadow: 0 0 0 5px #2b2a27, 0 14px 30px -12px #1d1d1b80;
}

/* where the measure ends: the comma sits just past it */
.lila-margin {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--loupe) / 2 + (var(--margin-x) - var(--cx)) * var(--zoom) * 1px);
  border-left: 1px dashed #2f5d50;
}

.lila-plate figcaption {
  max-width: 26rem;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--slate);
  text-align: center;
  text-wrap: balance;
}

.lila-plate figcaption p + p {
  margin-top: 0.35rem;
}

/* Plática: the pack art */

.platica-art {
  display: block;
}

.platica-art img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  background: var(--shoal);
}

@media (max-width: 52rem) {
  .project,
  .project--platica {
    grid-template-columns: minmax(0, 1fr);
  }

  .project--platica .platica-art {
    max-width: 36rem;
  }
}

@media (max-width: 30rem) {
  .lila-plate {
    --scale: 0.34;
    --bezel: 9px;
    --loupe: 112px;
    --zoom: 1.7;
    --gap: 72px;
    padding-inline: 0.5rem;
  }
}

@media print {
  .lila-plate,
  .platica-art,
  .project-icon {
    display: none !important;
  }

  .projects {
    padding: 8pt 0 0;
  }

  .projects-head h2 {
    font-size: 13pt;
  }

  .projects-head p {
    display: none;
  }

  .project {
    display: block;
    padding: 4pt 0 6pt;
    border: 0;
    break-inside: avoid;
  }

  .project-name {
    display: inline;
    font-size: 11pt;
  }

  .project-copy > .project-lede {
    display: inline;
    margin-left: 6pt;
    font-size: 9.5pt;
  }

  .project-copy > p + p {
    margin-top: 3pt;
  }
}

/* The intro names the work, so the project list needs no header or rule of its own */

.projects--home {
  padding-top: 0;
  border-top: 0;
}

.projects--home .project:first-child {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}