/* Projects page only (site/projects/index.html links this file itself).

   Without the script, the page reads top to bottom: the logos, then each
   project in full. With the script (site/assets/projects.js?v=29abee1494), a project opens
   in a window over the page and shows one screen at a time. */

.project-notice {
  max-width: var(--measure);
  margin: 1rem auto 0;
  padding: 0.5rem 1rem;
  border: 1px dashed var(--text-muted);
  background: var(--page);
  color: var(--text-muted);
  font-size: 0.95rem;
  text-align: center;
}

/* ---- The list of projects ------------------------------------------------- */

/* The page sits on the same plain sheet as the About page, so its words never
   sit on the honeycomb. */
main:has(.project-list) {
  background: var(--page);
  border-right: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

@media (min-width: 48rem) {
  main:has(.project-list) {
    padding-right: 2.5rem;
    padding-left: 2.5rem;
  }
}

/* One line under the page title saying what the page is. */
.projects-intro {
  max-width: var(--measure);
  margin: 0.75rem auto 0;
  color: var(--text-muted);
  text-align: center;
}

/* Each project is one wide entry on a plain sheet: its logo card on the left,
   and its name, place, one sentence and a button on the right. More projects
   stack below. On a phone the logo sits above the words. */
.project-list {
  display: grid;
  gap: 1.25rem;
  max-width: 52rem;
  margin: 2rem auto 0;
}

.project-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 1.25rem;
  border: 1px solid var(--rule);
  background: var(--page);
}

@media (min-width: 40rem) {
  .project-entry {
    grid-template-columns: 16rem 1fr;
    gap: 1.75rem;
  }
}

.project-entry h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 400;
}

.project-entry-where {
  margin: 0.2rem 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.project-entry-text p {
  margin: 0.75rem 0 0;
}

.project-entry-text .project-entry-where {
  margin-top: 0.2rem;
}

/* A last word under the list, pointing to a free consultation. */
.projects-cta {
  margin: 2.5rem auto 0;
  text-align: center;
}

.projects-cta p {
  margin: 0 0 0.9rem;
}

.project-card {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.586;   /* the shape of a bank card */
  border-radius: 0.6rem;
  border: 1px solid var(--rule);
  background: var(--page);
  overflow: hidden;
}

.project-card:hover,
.project-card:focus-visible {
  border-color: var(--link);
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* the logo fills the card */
}

/* The company's name, on a see-through bar that comes up from the bottom when
   the logo is pointed at or reached with the keyboard. */
.project-name {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.45rem 0.5rem;
  background: rgb(20 22 27 / 0.72);
  color: #ffffff;
  font-size: 0.95rem;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.15s ease-out;
}

.project-card:hover .project-name,
.project-card:focus-visible .project-name {
  transform: none;
}

/* A touch screen has no pointer to hover with, so the name is always shown. */
@media (hover: none) {
  .project-name {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-name {
    transition: none;
  }
}

/* ---- One project, as it reads without the script -------------------------- */

.project {
  max-width: 52rem;
  margin: 3rem auto 0;
  border: 1px solid var(--rule);
  background: var(--page);
}

.project-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
}

.project-head img {
  width: auto;
  height: 3rem;
}

.project-head h2 {
  font-size: 1.5rem;
  font-weight: 500;
}

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

/* The screenshot runs edge to edge, with nothing above it. */
.project-step > img {
  display: block;
  width: 100%;
  height: auto;
}

.project-text {
  padding: 0.75rem 1.25rem 1rem;
}

/* "Before", "After" or "Summary": a small label, not a heading bar. */
.project-text h3 {
  margin: 0 0 0.15rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.project-text p {
  margin: 0;
}

.project-text ul {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* The last screen: before and after side by side, then the result. */
.project-summary .project-text {
  padding: 1.5rem 1.75rem;
}

.project-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 2.5rem;
  margin-top: 0.5rem;
}

@media (min-width: 36rem) {
  .project-compare {
    grid-template-columns: 1fr 1fr;
  }
}

.project-summary h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
}

.project-summary .project-text > h4 {
  margin-top: 1.25rem;
}

.project-quote {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.project-quote blockquote {
  margin: 0;
}

.project-quote blockquote p {
  color: var(--quote, var(--text));
}

.project-quote figcaption {
  margin-top: 0.35rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* A small print line at the foot of the summary. */
.project-note {
  margin-top: 0.9rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* ---- A before-and-after screen -------------------------------------------- */

/* The two sides' colours, both from the logo: silver for the old way, a wash
   of the violet orb for the new one. */
:root {
  --side-before: #cfd4d8;   /* logo silver */
  --side-after: #dcd6f6;    /* logo violet, lightened */
}

@media (prefers-color-scheme: dark) {
  :root {
    --side-before: #262a31;
    --side-after: #29244a;
  }
}

/* The point of the screen in one plain sentence, above the two pictures. */
.project-pair .project-text {
  padding: 1.1rem 1.25rem 0.9rem;
}

.project-count {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.project-pair .project-text h3 {
  margin: 0.2rem 0 0;
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Before on the left, after on the right, split by a thin indigo line. On a
   narrow screen they stack. */
.project-sides {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 36rem) {
  .project-sides {
    grid-template-columns: 1fr 1fr;
  }

  .project-after {
    border-left: 2px solid var(--link);
  }
}

.project-side {
  margin: 0;
  padding: 0.9rem 1.25rem 1.1rem;
}

.project-before {
  background: var(--side-before);
}

/* The first screen: who the business is (on the plain page colour, with its
   logo) beside the problem it had (on the before silver). */
.project-about {
  background: var(--page);
}

/* The logo and the business's name, centred together at the top. */
.project-pair.project-intro .project-text {
  border-bottom: 2px solid var(--link);   /* the same indigo line as between the two sides */
  text-align: center;
}

.project-intro .project-text img {
  display: block;
  width: 13rem;
  max-width: 60%;
  height: auto;
  margin: 0 auto 0.6rem;
  border-radius: 0.4rem;
}

@media (min-width: 36rem) {
  .project-intro .project-before {
    border-left: 2px solid var(--link);
  }
}

.project-side ul {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
  font-size: 1.05rem;
}

.project-side li + li {
  margin-top: 0.3rem;
}

/* A screen with only the before picture uses the whole width. */
.project-wide {
  grid-column: 1 / -1;
}

.project-after {
  background: var(--side-after);
}

.project-side figcaption,
.project-side .project-side-label {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.project-before figcaption,
.project-side .project-side-label {
  color: var(--text-muted);
}

.project-after figcaption {
  color: var(--link);
}

/* The real screenshot, as it looks in the spreadsheet. */
.project-side img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: #ffffff;
}

.project-side p {
  margin: 0.6rem 0 0;
  font-size: 1.05rem;
}

/* ---- With the script: a project opens in a window over the page ---------- */

.project-window {
  width: min(80rem, 94vw);
  max-height: 94vh;
  border-radius: 0.6rem;   /* the same slight rounding as the logo cards */
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--page);
  color: var(--text);
  overflow: hidden;
}

/* The page behind fades back. */
.project-window::backdrop {
  background: rgb(10 10 20 / 0.72);
}

/* The window grows out from the middle as it opens, and shrinks as it closes. */
.project-window[open] {
  animation: project-grow 0.22s ease-out;
}

.project-window[open]::backdrop {
  animation: project-fade 0.22s ease-out;
}

.project-window.is-closing {
  animation: project-shrink 0.16s ease-in forwards;
}

.project-window.is-closing::backdrop {
  animation: project-fade-out 0.16s ease-in forwards;
}

@keyframes project-grow {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
}

@keyframes project-fade {
  from {
    opacity: 0;
  }
}

@keyframes project-shrink {
  to {
    opacity: 0;
    transform: scale(0.82);
  }
}

@keyframes project-fade-out {
  to {
    opacity: 0;
  }
}

/* Every screen sits in the same spot, one on top of the other, and only the
   current one is shown. The window is therefore as tall as the tallest screen
   and never changes size or needs scrolling as you step through. */
.project-window .project {
  display: grid;
  max-width: none;
  margin: 0;
  border: 0;
}

.project-window .project-head {
  display: none;
}

.project-window .project-step {
  grid-area: 1 / 1;
  border: 0;
  visibility: hidden;
}

.project-window .project-step.is-showing {
  visibility: visible;
}

/* The screenshot shrinks on a short screen so the words under it stay in view. */
.project-window .project-step > img {
  max-height: calc(94vh - 8.5rem);
  object-fit: contain;
  background: var(--surface);
}

.project-window .project-summary {
  align-self: center;
}

/* Room at the sides so the arrows never sit on top of the words. */
.project-window .project-summary .project-text,
.project-window .project-pair .project-text {
  padding-right: 3.75rem;
  padding-left: 3.75rem;
}

.project-window .project-before {
  padding-left: 3.75rem;
}

.project-window .project-after,
.project-window .project-wide {
  padding-right: 3.75rem;
}

/* On the first screen the silver side is on the right instead. */
.project-window .project-about {
  padding-left: 3.75rem;
}

.project-window .project-intro .project-before {
  padding-right: 3.75rem;
  padding-left: 1.25rem;
}

/* The two coloured sides fill the window down to its bottom edge, with their
   picture and words in the middle, so no screen leaves an empty gap. */
.project-window .project-pair {
  display: flex;
  flex-direction: column;
}

.project-window .project-pair .project-sides {
  flex: 1;
}

.project-window .project-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* On the first screen the two sides share one set of rows: the headings sit on
   one line, the sentences start on one line, the lists start on one line, and
   the whole block sits in the middle of the coloured area. */
@media (min-width: 36rem) {
  .project-window .project-intro .project-sides {
    grid-template-rows: 1fr auto auto auto 1fr;
  }

  .project-window .project-intro .project-side {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    align-content: start;
  }

  .project-window .project-intro .project-side > :nth-child(1) {
    grid-row: 2;
  }

  .project-window .project-intro .project-side > :nth-child(2) {
    grid-row: 3;
  }

  .project-window .project-intro .project-side > :nth-child(3) {
    grid-row: 4;
  }
}

/* The pictures shrink on a short screen so the whole screen stays in view. */
.project-window .project-side img {
  width: auto;
  max-width: 100%;
  max-height: calc(94vh - 15rem);
}

/* On a phone the window is narrow: less room at the sides, the before and
   after lists stay side by side, and a long summary may be scrolled. */
@media (max-width: 36rem) {
  .project-window .project-step {
    max-height: calc(94vh - 2px);
    overflow-y: auto;
  }

  .project-window .project-pair .project-text,
  .project-window .project-before,
  .project-window .project-after,
  .project-window .project-about,
  .project-window .project-intro .project-before {
    padding-right: 2.25rem;
    padding-left: 2.25rem;
  }

  .project-window .project-side img {
    max-height: none;
  }

  .project-window .project-summary .project-text {
    padding: 2rem 1.1rem 1rem;
    font-size: 0.92rem;
  }

  .project-window .project-compare {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
}

/* A small X in the corner, drawn the same way as the arrows below. */
.project-close {
  position: absolute;
  z-index: 2;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(110 116 123 / 0.28);
  transition: color 0.12s;
  cursor: pointer;
}

/* Arrows at the sides: large, thick, and with nothing around them. They sit
   there very faintly, and turn a solid dark grey when pointed at. */
.project-arrow {
  position: absolute;
  z-index: 2;
  top: 42%;
  width: 3.5rem;
  height: 5rem;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(110 116 123 / 0.28);
  transform: translateY(-50%);
  transition: color 0.12s;
  cursor: pointer;
}

.project-close svg,
.project-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.project-back {
  left: 0.25rem;
}

.project-next {
  right: 0.25rem;
}

.project-close:hover,
.project-close:focus-visible,
.project-arrow:hover,
.project-arrow:focus-visible {
  color: #4a4f57;
}

/* A thin pale edge on the dark arrow keeps it visible over a dark screenshot
   or the dark page, as well as over a light one. */
.project-close:hover svg,
.project-close:focus-visible svg,
.project-arrow:hover svg,
.project-arrow:focus-visible svg {
  filter: drop-shadow(0 0 1px rgb(255 255 255 / 0.55));
}

/* No arrow at an end with nowhere to go. */
.project-arrow:disabled {
  display: none;
}

/* A touch screen cannot hover, so the arrows are shown more firmly there. */
@media (hover: none) {
  .project-close,
  .project-arrow {
    color: rgb(74 79 87 / 0.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-window[open],
  .project-window[open]::backdrop,
  .project-window.is-closing,
  .project-window.is-closing::backdrop {
    animation: none;
  }

  .project-close,
  .project-arrow {
    transition: none;
  }
}

/* Read out by screen readers when the screen changes; not shown. */
.project-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}