/* ======================================================================
   The case study (case.js): the Projects sheet zoomed into a whole white
   page about one project. A bar along the top, then the page: a heading,
   the screens in browser windows, the front end, and a way out. Between
   the blocks are lanes, each floored with an inked rule, and he walks them.
   ====================================================================== */

.case {
  --case-ink: var(--ink, #20201f);
  --case-muted: var(--muted-ink, #6e6b65);
  --case-rule: rgba(32, 32, 31, 0.14);
  --case-paper: #ffffff;
  --case-col: min(980px, calc(100vw - 48px));
  --case-fig-h: 92px;
  position: fixed;
  z-index: 60;
  inset: 0;
  background: var(--case-paper);
  color: var(--case-ink);
}

.case[hidden] {
  display: none;
}

.case__scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: auto;
}

/* While it is open the world stays put behind it, unseen. */
html.is-case-open .scene,
html.is-case-open .navbar {
  visibility: hidden;
}

/* ---------------------------------------------------------------- the bar */

.case__bar {
  position: sticky;
  z-index: 3;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px max(16px, calc((100vw - var(--case-col)) / 2));
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--case-rule);
  backdrop-filter: blur(8px);
}

.case__back,
.case__visit {
  justify-self: start;
  padding: 8px 14px 9px;
  border: 1.5px solid var(--case-ink);
  border-radius: 999px;
  background: none;
  color: var(--case-ink);
  font: 14px/1 Arial, Helvetica, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.case__visit {
  justify-self: end;
  background: var(--case-ink);
  color: #fff;
}

.case__back:hover,
.case__back:focus-visible {
  background: var(--case-ink);
  color: #fff;
}

.case__visit:hover,
.case__visit:focus-visible {
  background: none;
  color: var(--case-ink);
}

/* The switcher: the project list, and a step to either side. */
.case__switch {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.case__step {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0 0 3px;
  border: 1.5px solid var(--case-rule);
  border-radius: 50%;
  background: none;
  color: var(--case-ink);
  font: 22px/1 Georgia, serif;
  cursor: pointer;
  transition: border-color 160ms ease;
}

.case__step:hover,
.case__step:focus-visible {
  border-color: var(--case-ink);
}

.case__pick {
  min-width: 0;
}

.case__select {
  max-width: 100%;
  padding: 8px 34px 9px 16px;
  border: 1.5px solid var(--case-rule);
  border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2320201f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 10px 6px;
  color: var(--case-ink);
  font: 700 13px/1.2 var(--font-display);
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.case__select:hover,
.case__select:focus-visible {
  border-color: var(--case-ink);
}

.case__short {
  display: none;
}

/* ---------------------------------------------------------------- the page */

.case__page {
  position: relative;
  width: var(--case-col);
  margin: 0 auto;
  padding: 56px 0 120px;
}

.case__kicker {
  margin: 0 0 14px;
  font: 700 12px/1.2 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--case-muted);
}

.case__page h1 {
  margin: 0;
  font: 700 clamp(40px, 7vw, 76px)/0.98 var(--font-display);
  letter-spacing: 0.01em;
}

.case__page h1:focus {
  outline: none;
}

.case__lede {
  max-width: 44em;
  margin: 22px 0 0;
  font: clamp(17px, 1.6vw, 20px)/1.55 Georgia, "Times New Roman", serif;
}

/* The brief under the title: the problem, what he did, the outcome, side by
   side, one under another on a phone. */
.case__brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 32px;
  margin: 36px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(32, 32, 31, 0.16);
}

.case__brief dt {
  margin: 0 0 8px;
  font: 700 12px/1.2 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--case-muted);
}

.case__brief dd {
  margin: 0;
  font: 16px/1.6 Georgia, "Times New Roman", serif;
  color: #3b3a37;
}

@media (max-width: 760px) {
  .case__brief {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 28px;
  }
}

.case__page h2 {
  margin: 0 0 10px;
  font: 700 clamp(22px, 2.6vw, 30px)/1.1 var(--font-display);
  letter-spacing: 0.02em;
}

.case__page p {
  max-width: 44em;
}

.case__section > p {
  margin: 0 0 22px;
  font: 17px/1.6 Georgia, "Times New Roman", serif;
  color: #3b3a37;
}

/* A lane: room for him to stand and talk, floored with a rule he walks on,
   numbered at its right end like a stop. */
.case__lane {
  position: relative;
  height: calc(var(--case-fig-h) + 88px);
  border-bottom: 1.5px solid var(--case-ink);
  margin-bottom: 28px;
}

.case__lane::after {
  content: attr(data-mark);
  position: absolute;
  right: 0;
  bottom: -20px;
  font: 700 10px/1 var(--font-display);
  letter-spacing: 0.14em;
  color: var(--case-muted);
}

/* A screen, in a browser window. */
.case__window {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(32, 32, 31, 0.18);
  border-radius: 12px;
  background: #f3f2ee;
  box-shadow: 0 22px 44px rgba(32, 32, 31, 0.12), 0 2px 6px rgba(32, 32, 31, 0.06);
}

.case__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(32, 32, 31, 0.1);
}

.case__chrome i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d9d6ce;
}

.case__chrome span {
  flex: 1;
  max-width: 420px;
  margin-left: 10px;
  padding: 5px 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
  color: var(--case-muted);
  font: 12px/1.2 Arial, Helvetica, sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.case__window img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 900;
  background: #111;
}

.case__note {
  margin: 12px 0 0;
  font: italic 14px/1.5 Georgia, "Times New Roman", serif;
  color: var(--case-muted);
}

/* The front end. */
.case__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 20px;
  padding: 0;
  list-style: none;
}

.case__chips li {
  padding: 6px 13px 7px;
  border: 1.5px solid var(--case-ink);
  border-radius: 999px;
  font: 15px/1.2 Arial, Helvetica, sans-serif;
}

.case__also {
  font: 15px/1.5 Arial, Helvetica, sans-serif !important;
  color: var(--case-muted) !important;
}

.case__also b {
  margin-right: 0.5em;
  font: 700 11px/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The way out: the live site, and the next project. */
.case__end {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.case__end a,
.case__end button {
  padding: 12px 20px 13px;
  border: 1.5px solid var(--case-ink);
  border-radius: 999px;
  background: none;
  color: var(--case-ink);
  font: 16px/1 Arial, Helvetica, sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.case__end a {
  background: var(--case-ink);
  color: #fff;
}

/* ---------------------------------------------------------------- him */

.case__fig {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: var(--case-fig-h);
  width: calc(var(--case-fig-h) * 140 / 242);
  overflow: visible;
  fill: none;
  stroke: var(--case-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transform-origin: 50% 100%;
  will-change: transform;
}

.case__fig path,
.case__fig circle {
  vector-effect: non-scaling-stroke;
}

.case__fig .torso circle {
  fill: #fff;
}

.case__fig .hand {
  fill: var(--case-ink);
}

/* What he says: the site's speech bubble, smaller. */
.case__say {
  --tail: 50%;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  max-width: min(320px, calc(var(--case-col) - 8px));
  margin: 0;
  padding: 10px 16px 12px;
  border: 2px solid var(--case-ink);
  border-radius: 16px;
  background: #fff;
  color: var(--case-ink);
  font: 700 15px/1.3 var(--font-display);
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transform-origin: var(--tail) 100%;
  transition: opacity 160ms ease, transform 200ms cubic-bezier(0.3, 1.5, 0.6, 1);
}

.case__say::after {
  content: "";
  position: absolute;
  left: var(--tail);
  bottom: -9px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-right: 2px solid var(--case-ink);
  border-bottom: 2px solid var(--case-ink);
  background: #fff;
  transform: rotate(45deg) skew(8deg, 8deg);
}

.case__say.is-up {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------- phones */

@media (max-width: 760px) {
  .case {
    --case-col: calc(100vw - 32px);
    --case-fig-h: 74px;
  }

  .case__bar {
    grid-template-columns: auto 1fr auto;
    padding: 10px 16px;
  }

  .case__long {
    display: none;
  }

  .case__short {
    display: inline;
  }

  .case__step {
    display: none;
  }

  .case__select {
    width: 100%;
    padding-left: 12px;
    font-size: 12px;
  }

  .case__back,
  .case__visit {
    padding: 8px 12px;
    font-size: 13px;
  }

  .case__page {
    padding-top: 36px;
  }

  .case__section > p {
    font-size: 16px;
  }

  .case__chrome span {
    display: none;
  }

  .case__say {
    font-size: 13px;
    padding: 8px 12px 10px;
  }
}

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