/* Project pages. Scoped to .project so the gallery can host them. */
body.flat { margin: 0; background: #f3f2ee; }

.project {
  --bg: #f3f2ee;
  --ink: #1d1c1a;
  --ink-2: #4f4c47;
  --ink-3: #85817a;
  --rule: rgba(29, 28, 26, .14);
  --navy: #07090f;
  --pad: clamp(18px, 4vw, 48px);
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  background: var(--bg); color: var(--ink);
  font: 400 19px/1.6 var(--serif);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: clip;
}
.project *, .project *::before, .project *::after { box-sizing: border-box; margin: 0; padding: 0; }
.project a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.project img { max-width: 100%; height: auto; }
.project:focus { outline: none; }
.project :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* top */
.project .top {
  position: sticky; top: 0; z-index: 3; background: var(--bg);
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px var(--pad); font: 400 15px var(--sans);
}
.project .top a { text-decoration: none; }
.project .top a:hover { text-decoration: underline; }
.project .top span { font-weight: 500; }

/* the same image that hangs in the gallery */
.project .hero { padding: 8px var(--pad) 0; }
.project .hero img {
  display: block; margin: 0 auto; height: auto; aspect-ratio: var(--ar);
  width: min(1200px, 100%, calc(64vh * var(--ar)));
}

.project [data-hero] { cursor: zoom-out; }
/* deck slides keep the rounded corners they have in the deck */
.project img.slide { border-radius: 10px; }

/* header */
.project header.head { max-width: 680px; margin: 0 auto; padding: 56px var(--pad) 0; box-sizing: content-box; }
.project h1 { font: 500 clamp(34px, 4.4vw, 48px)/1.1 var(--sans); letter-spacing: -.02em; }
.project .dek { font-size: 22px; line-height: 1.45; color: var(--ink-2); margin-top: 14px; }
.project .facts { margin-top: 28px; font: 400 15px/1.5 var(--sans); border-top: 1px solid var(--rule); }
.project .facts div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.project .facts dt { color: var(--ink-3); }

/* text */
.project .text { max-width: 680px; margin: 0 auto; padding: 24px var(--pad) 40px; box-sizing: content-box; }
.project h2 { font: 600 19px/1.35 var(--sans); margin: 56px 0 12px; }
.project p + p { margin-top: 18px; }
.project ul, .project ol { padding-left: 1.2em; margin: 18px 0; }
.project li + li { margin-top: 8px; }
.project .aside { font: 400 15px/1.55 var(--sans); color: var(--ink-2); }

/* figures break out of the text column */
.project figure.fig { width: min(960px, calc(100vw - 2 * var(--pad))); margin: 40px 0 40px 50%; transform: translateX(-50%); }
.project figure.fig > img, .project figure.fig > a > img { display: block; width: 100%; height: auto; }
.project .dark { background: var(--navy); padding: clamp(16px, 3vw, 32px); }
.project .dark .narrow { max-width: 448px; margin: 0 auto; display: block; }
.project figcaption a, .project .facts a { text-decoration: underline; }
.project figcaption { font: 400 14px/1.5 var(--sans); color: var(--ink-3); margin-top: 10px; max-width: 680px; }
.project .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.project .pair p { font: 400 14px var(--sans); color: var(--ink-3); margin: 0 0 6px; }
.project .pair img { display: block; width: 100%; height: auto; }

/* rows of phone screens */
.project .phones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.project .phones.two { grid-template-columns: repeat(2, 1fr); max-width: 472px; margin: 0 auto; }
.project .phones img { display: block; width: 100%; height: auto; }

/* small tables of numbers */
.project table { width: 100%; border-collapse: collapse; margin: 24px 0; font: 400 15px/1.45 var(--sans); }
.project th, .project td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.project thead th { color: var(--ink-3); font-weight: 400; border-bottom-color: var(--ink); }
.project td.n, .project th.n { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }

/* bars */
.project .bars { font: 400 15px var(--sans); margin: 24px 0; }
.project .bars div { display: grid; grid-template-columns: 90px 1fr 48px; gap: 14px; align-items: center; padding: 5px 0; }
.project .bars i { display: block; height: 8px; background: var(--ink); width: var(--w); }
.project .bars b { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }

/* monthly columns */
.project .charts { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; font: 400 14px var(--sans); }
.project .charts h3 { font: 500 14px var(--sans); margin-bottom: 14px; }
.project .cols { display: flex; align-items: flex-end; gap: 8px; height: 150px; border-bottom: 1px solid var(--ink); }
.project .cols div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.project .cols em { font-style: normal; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.project .cols i { display: block; width: 100%; height: var(--h); background: var(--ink); }
.project .months { display: flex; gap: 8px; margin-top: 6px; color: var(--ink-3); font-size: 12px; }
.project .months span { flex: 1; text-align: center; }

/* color steps */
.project .ladder { display: flex; margin-top: 16px; font: 400 12px/1.5 var(--sans); }
.project .ladder div { flex: 1; padding: 12px 10px 8px; color: #8b93a6; }

/* drag to compare */
.project .compare { --pos: 50%; position: relative; overflow: hidden; user-select: none; touch-action: pan-y; }
.project .compare img { display: block; width: 100%; height: auto; }
.project .compare .after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.project .compare .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.project .compare .tag { position: absolute; bottom: 10px; font: 400 12px var(--sans); padding: 3px 7px; background: rgba(7, 9, 15, .8); color: #e8e9ee; pointer-events: none; }
.project .compare .tag.l { left: 10px; } .project .compare .tag.r { right: 10px; }
.project .compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.project .compare input:focus-visible ~ .handle { outline: 2px solid #e3b155; }

/* end of page */
.project .end { max-width: 680px; margin: 0 auto; padding: 40px var(--pad) 80px; box-sizing: content-box; border-top: 1px solid var(--rule); font: 400 15px/1.6 var(--sans); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.project .end a { text-decoration: underline; }
.project .end nav { display: flex; gap: 18px; }

@media (max-width: 700px) {
  .project { font-size: 17.5px; }
  .project .dek { font-size: 19px; }
  .project .facts div { grid-template-columns: 1fr; gap: 0; }
  .project .pair, .project .charts { grid-template-columns: 1fr; }
  .project .phones { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .project .bars div { grid-template-columns: 70px 1fr 40px; }
  .project table { font-size: 14px; }
}