/* Case study pages. Shared by every project page under /work/.
   Layout: a hero that holds the main project image, then a sticky section
   menu on the left with the project content scrolling beside it. */

/* ---------- Top bar (same as the home page) ---------- */

.site-bar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 10px var(--page-pad);
  color: #fff;
}

.site-name,
.site-bar__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: inherit;
}

.site-name {
  justify-self: center;
}

.site-bar__link--left {
  justify-self: start;
}

.site-bar__link--right {
  justify-self: end;
}

.site-name:hover,
.site-bar__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.site-name:focus-visible,
.site-bar__link:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 4px;
}

/* ---------- Pixel links: "Scroll" and "Go back" ---------- */

.pixel-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.pixel-link svg {
  flex: 0 0 auto;
  animation: pixel-nudge-down 1.6s steps(2, jump-none) infinite;
}

.pixel-link--back svg {
  animation-name: pixel-nudge-left;
}

.pixel-link:hover {
  color: var(--blue);
}

@keyframes pixel-nudge-down {
  from { transform: translateY(0); }
  to { transform: translateY(4px); }
}

@keyframes pixel-nudge-left {
  from { transform: translateX(0); }
  to { transform: translateX(-4px); }
}

/* ---------- Hero ---------- */

.case-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(440px, 80svh, 860px);
  padding: 96px var(--page-pad) 88px;
  overflow: hidden;
  background: var(--blue);
  color: #fff;
}

/* The main project image. To add it: set a background-image on .case-hero__media in
   that page's <style> tag, with a tint over it if the image is light. */
.case-hero__media {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
}

.case-hero__text {
  position: relative;
  z-index: 1;
}

.case-hero__kicker {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.case-hero__title {
  position: relative;
  max-width: 15em;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 5.4vw, 5.25rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.case-hero__note {
  position: absolute;
  top: 50%;
  right: var(--page-pad);
  z-index: 1;
  margin: 0;
  padding: 5px 8px;
  background: #fff;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.case-hero .pixel-link {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  z-index: 1;
  padding: 6px 14px;
  color: #fff;
  transform: translateX(-50%);
}

.case-hero .pixel-link:focus-visible {
  outline: 1px solid #fff;
}

/* ---------- A hero that is only a picture, filling the screen ----------
   Add case-hero--image to the hero, give .case-hero__media its background in the page,
   and put the screens in an <img class="case-hero__phones">. */
.case-hero.case-hero--image {
  --hero-h: max(440px, 100vh);
  align-items: center;
  justify-content: center;
  min-height: var(--hero-h);
  padding: 84px var(--page-pad) 56px;
}

@supports (height: 100svh) {
  .case-hero.case-hero--image {
    --hero-h: max(440px, 100svh);
  }
}

.case-hero__phones {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(var(--hero-h) - 140px);
  filter: drop-shadow(0 18px 28px rgba(10, 10, 25, 0.35));
}

@media (max-width: 768px) {
  .case-hero.case-hero--image {
    padding: 76px var(--space-2) 40px;
  }

  .case-hero__phones {
    max-height: calc(var(--hero-h) - 116px);
  }
}

/* Text that is read out but not seen */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The title stays hidden until its pixel reveal is ready, so it cannot flash.
   If the script never runs, it shows after 1.5s. */
.js-reveal .case-hero__title {
  visibility: hidden;
  animation: case-failsafe 0s 1.5s forwards;
}

@keyframes case-failsafe {
  to { visibility: visible; }
}

.pixel-reveal {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

/* ---------- Scroll transitions (same as the home page) ---------- */

.reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms ease var(--reveal-delay, 0ms),
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms);
}

.reveal-on [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Body: section menu beside the content ---------- */

.case-body {
  --side-w: 200px;
  --side-gap: clamp(40px, 6vw, 104px);
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  column-gap: var(--side-gap);
  padding: var(--space-8) var(--page-pad) var(--space-10);
}

/* After the full-screen break the menu and content start again */
.case-body--cont .case-content > section:first-child {
  padding-top: 0;
  border-top: 0;
}

.case-side {
  position: sticky;
  top: var(--space-3);
  align-self: start;
}

.case-side .pixel-link {
  margin-bottom: var(--space-2);
}

.case-nav {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Same type as the skills and tools chips on the home page */
.case-nav a {
  position: relative;
  display: inline-block;
  padding: 7px 0;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
  color: var(--ink-2);
}

.case-nav a:hover,
.case-nav a:focus-visible,
.case-nav a.is-active {
  color: var(--blue);
}

/* Pixel arrow beside the section you are in, like the menu on phones */
.case-nav a::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--blue);
  clip-path: polygon(0 0, 25% 0, 25% 25%, 50% 25%, 50% 37.5%, 75% 37.5%, 75% 62.5%, 50% 62.5%, 50% 75%, 25% 75%, 25% 100%, 0 100%);
  opacity: 0;
}

.case-nav a.is-active::before {
  opacity: 1;
}

/* Text and figures stop at a readable width; the full-screen break does not */
.case-content > section,
.case-content > .meta-strip,
.signoff {
  max-width: 1040px;
}

/* The gap between the page and a full-screen break is the same above and below it,
   for the content and for the section menu: the menu stops this far above the
   image and starts again this far below it. */
.case-body {
  --break-gap: var(--space-8);
}

.case-body:not(.case-body--cont) {
  padding-bottom: var(--break-gap);
}

.case-body:not(.case-body--cont) .case-content > section:last-child {
  padding-bottom: 0;
}

.case-body--cont {
  padding-top: var(--break-gap);
}

/* "Go back" has more empty space above its text than the last menu item has
   below it. This evens that out, so the lettering sits the same distance from
   the image on both sides. */
.case-side {
  margin-bottom: 7px;
}

/* ---------- Project facts ---------- */

.meta-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding-bottom: var(--space-6);
}

.meta-strip dt,
.case-content h2,
.num {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-2);
}

.meta-strip dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* ---------- Sections ---------- */

.case-content section {
  padding: var(--space-8) 0;
  border-top: var(--hairline) solid var(--line);
  scroll-margin-top: var(--space-2);
}

/* Section name: a small label. The claim under it carries the weight. */
.case-content h2 {
  margin-bottom: var(--space-2);
}

.case-content p {
  max-width: 62ch;
  margin: 0 0 1rem;
  color: var(--ink-2);
}

.case-content p:last-child {
  margin-bottom: 0;
}

.case-content p.claim {
  max-width: 24em;
  margin-bottom: var(--space-3);
  font-size: clamp(1.5rem, 2.5vw, 2.125rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
  color: var(--ink);
}

.case-content p.lead {
  max-width: 36em;
  font-size: 1.25rem;
  line-height: 1.5;
}

.case-content p.disclaimer,
.device-shot figcaption.disclaimer {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* A phone on a tinted panel, sitting in the content column (not full width).
   The screen takes one image; the caption underneath carries the disclaimer. */
.device-shot {
  margin: var(--space-4) 0 0;
}

.device-shot__stage {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: var(--space-4);
  background: #e9edff;
  overflow: hidden;
}

.device-shot__phone {
  position: relative;
  height: 100%;
  aspect-ratio: 390 / 800;
  border: 8px solid var(--ink);
  border-radius: 34px;
  background: #fff;
  overflow: hidden;
  box-shadow: 10px 10px 0 rgba(23, 23, 23, 0.12);
}

.device-shot__phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* A ready-made picture instead of the phone frame. */
.device-shot__photo {
  display: block;
  width: 100%;
  height: auto;
}

.case-content p.device-shot__empty {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  padding: var(--space-2);
  background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 8px, #f1f1f1 8px, #f1f1f1 16px);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-2);
}

.device-shot figcaption.disclaimer {
  margin-top: var(--space-2);
}

.case-content h3 {
  margin: 0 0 12px;
  font-size: clamp(1.3125rem, 1.9vw, 1.5rem);
  font-weight: var(--weight-strong, 450);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* Research at a glance: one card per choice, with the reason underneath */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: 0 4px 4px 0;
  list-style: none;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 13.5rem;
  padding: 18px 18px 20px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  background: var(--stat, var(--yellow));
  color: var(--ink);
}

.stat--yellow { --stat: var(--yellow); }
.stat--sky { --stat: var(--sky); }
.stat--orange { --stat: var(--orange); }
.stat--blue { --stat: var(--blue); color: #fff; }

.stat__value {
  margin-top: 14px;
  font-family: var(--font-pixel-geist);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.1;
}

.stat__value--num {
  font-size: 3.5rem;
  line-height: 0.95;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* Three cards across (success metrics) */
.stats--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats--three .stat__value {
  margin-bottom: 16px;
}

/* Pushed to the bottom so the rule lines up across the row */
.case-content p.stat__why {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 2px solid currentColor;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: inherit;
}

/* ---------- Full-screen break ----------
   Sits between two stretches of the page. The menu and content above scroll
   away before it; a fresh menu and the next sections start after it. */

.case-break {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  margin: 0;
  padding: var(--space-10) var(--page-pad);
  background-color: var(--ink);
  background-position: center;
  background-size: cover;
  color: #fff;
}

.case-break__note {
  position: absolute;
  top: var(--space-4);
  right: var(--page-pad);
  margin: 0;
  padding: 5px 8px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.case-break__label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--yellow);
}

.case-break__claim {
  max-width: 22em;
  margin: 0 0 var(--space-3);
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  font-weight: var(--weight-body, 400);
  line-height: 1.12;
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
}

.case-break__sub {
  max-width: 36em;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

/* The text on a full-screen break waits until the image has properly arrived, then
   eases up into place one line after another. case-study.js adds .is-in.
   Without scripts (.reveal-on is never set) the text is simply there. */
.reveal-on .case-break__text > * {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 900ms ease var(--line-delay, 0ms),
    transform 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--line-delay, 0ms);
}

.reveal-on .case-break__text > :nth-child(2) { --line-delay: 140ms; }
.reveal-on .case-break__text > :nth-child(3) { --line-delay: 300ms; }

.reveal-on .case-break.is-in .case-break__text > * {
  opacity: 1;
  transform: none;
}


/* ---------- Findings ---------- */

.num,
.case-content p.num {
  margin-bottom: 8px;
  color: var(--blue);
}

/* Closing thoughts: a few larger paragraphs, each opening on a darker phrase */
.case-content .story p {
  max-width: 38em;
  margin-bottom: var(--space-3);
  font-size: 1.25rem;
  line-height: 1.5;
}

.case-content .story p:last-child {
  margin-bottom: 0;
}

.story strong {
  font-weight: 400;
  color: var(--ink);
}

@media (max-width: 600px) {
  .case-content .story p {
    font-size: 1.125rem;
  }
}

/* One finding: number, claim, a line or two, then the evidence */
.finding {
  margin-top: var(--space-6);
}

.finding--plain {
  margin-top: 0;
}

blockquote {
  margin: var(--space-3) 0;
  padding: 0 0 0 var(--space-2);
  border-left: 3px solid var(--blue);
}

.case-content blockquote p {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--weight-body, 400);
  line-height: 1.4;
}

/* Handwriting for the doodle quotes. Patrick Hand, SIL Open Font License
   (licence text: fonts/PatrickHand-LICENSE.txt). */
@font-face {
  font-family: "Patrick Hand";
  src: url("../fonts/PatrickHand-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* What participants said, as doodles with the quote written inside.
   The drawings are SVG files in the project's assets folder, so they can be swapped
   for hand-drawn ones; the quote is real text placed over the empty part of each. */
.doodles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-3) 0 0;
}

.doodle {
  position: relative;
  flex: 1 1 320px;
  max-width: 500px;
  margin: 0;
  container-type: inline-size;
}

.doodle img {
  display: block;
  width: 100%;
  height: auto;
}

.doodle__quote {
  position: absolute;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
}

/* Where the empty space is in each drawing */
.doodle--plan .doodle__quote { left: 10%; top: 22%; width: 49%; height: 46%; transform: rotate(-2deg); }
.doodle--dog .doodle__quote { left: 59%; top: 30%; width: 36%; height: 41%; transform: rotate(1deg); }

/* No bubble: the drawing on the left, the quote simply written beside it */
.doodle--beside {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 640px;
  container-type: normal;
}

.doodle--beside img {
  flex: 0 0 auto;
  width: clamp(130px, 38%, 250px);
}

.doodle--beside .doodle__quote {
  position: static;
  display: block;
  flex: 1 1 0;
  text-align: left;
  transform: rotate(-1.5deg);
}

.case-content .doodle__quote p {
  max-width: none;
  margin: 0;
  font-family: "Patrick Hand", "Comic Sans MS", cursive;
  font-size: 1.125rem;
  font-size: clamp(1rem, 4.3cqw, 1.375rem);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--ink);
}

.case-content .doodle--plan .doodle__quote p {
  font-size: 1.5rem;
  font-size: clamp(1.25rem, 6.2cqw, 2rem);
  line-height: 1.1;
}

.case-content .doodle--beside .doodle__quote p {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.15;
}

/* One change per finding, each with its screen underneath */
.fixes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--space-3);
  margin-top: var(--space-4);
}

.fix {
  display: flex;
  flex-direction: column;
}

.fix .placeholder {
  margin-top: auto;
  padding-top: var(--space-3);
}

.placeholder,
.video-embed {
  margin: 0;
}

.placeholder--wide,
.video-embed {
  margin-top: var(--space-3);
}

.placeholder__frame {
  width: 100%;
  aspect-ratio: 390 / 844;
  border: 1px dashed #bdbdbd;
  border-radius: 28px;
  background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 8px, #f1f1f1 8px, #f1f1f1 16px);
}

.placeholder--wide .placeholder__frame {
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.video-embed video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ink);
}

.placeholder figcaption,
.video-embed figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-2);
}

/* ---------- Before / after slideshow ----------
   One slide per change. On wide screens "Before" and "After" sit side by side;
   on phones a switch shows one at a time. Without scripts the slides still
   scroll sideways and both screens are shown. */

.ba-show {
  max-width: 1040px;
  margin-top: var(--space-4);
}

.ba-show__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin-bottom: var(--space-2);
}

.case-content p.ba-show__count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-mono);
  color: var(--ink-2);
}

.ba-show__count [data-ba-current] {
  color: var(--ink);
}

@media (max-width: 480px) {
  .ba-show__what {
    display: none;
  }
}

.ba-show__nav {
  display: none;
  gap: 10px;
}

.ba-show.is-ready .ba-show__nav {
  display: flex;
}

.ba-show__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}

.ba-show__btn:hover:not(:disabled) {
  background: var(--btn-hover-bg, var(--blue));
  color: var(--btn-hover-ink, #fff);
}

.ba-show__btn:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: none;
}

.ba-show__btn:disabled {
  opacity: 0.28;
  box-shadow: none;
  cursor: default;
}

.ba-show__btn:focus-visible,
.ba-show__track:focus-visible,
.phone__screen:focus-visible,
.ba__toggle button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.phone__screen:focus-visible {
  outline-offset: -3px;
}

.ba-show__track {
  position: relative;
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ba-show__track::-webkit-scrollbar {
  display: none;
}

.ba {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  min-width: 0;
  scroll-snap-align: start;
}

.ba__head {
  margin-bottom: var(--space-3);
}

.case-content .ba__head h3 {
  margin: 0;
}

.ba__toggle {
  display: none;
}

/* Three shared rows (label, words, phone) so the two phones line up and the
   words sit just above them, however long each side's text is. */
.ba__panels {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  gap: 0 2px;
}

.ba__panel {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background: var(--paper, #f6f6f6);
}

.case-content p.ba__label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink);
}

.case-content .ba__panel--after p.ba__label {
  color: var(--blue);
}

.case-content p.ba__text {
  max-width: 40ch;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Short points under a description, each led by a small pixel icon */
.ba__notes {
  display: grid;
  gap: 8px;
  max-width: 40ch;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.ba__notes li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink);
}

.ba__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: var(--pin-bg, var(--blue));
  color: var(--pin-ink, #fff);
}

.ba__copy {
  margin-bottom: var(--space-3);
}

@media (min-width: 769px) {
  @supports (grid-template-rows: subgrid) {
    .ba__panel {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
    }

    .ba__panel > .phone {
      align-self: start;
    }
  }
}

/* ---------- Phone mock-up ---------- */

/* A drawn phone: the body is one image, the screen scrolls inside it, and the
   camera island (plus the status icons, on phones marked phone--status) sit on top.
   The numbers are the screen's place inside the 409 x 843 body. */
.phone {
  position: relative;
  flex: none;
  width: min(100%, 290px);
  aspect-ratio: 409 / 843;
  margin-right: auto;
  margin-left: auto;
}

.phone::before,
.phone::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* The body image is 3px wider each side than the phone, for the side buttons */
.phone::before {
  right: -0.7335%;
  left: -0.7335%;
  background-image: url("../assets/device/phone-body.png");
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.16));
}

.phone::after {
  right: 0;
  left: 0;
  z-index: 3;
  background-image: url("../assets/device/phone-island.png");
}

.phone--status::after {
  background-image: url("../assets/device/phone-top.png");
}

/* Dark status icons, for a screen that is light at the top */
.phone--status-dark::after {
  background-image: url("../assets/device/phone-top-dark.png");
}

.phone__screen {
  position: absolute;
  top: 1.4235%;
  left: 2.934%;
  width: 94.132%;
  height: 97.153%;
  border-radius: 13.5% / 6.35%;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.phone__screen::-webkit-scrollbar {
  display: none;
}

/* Bars that stay put while the screen scrolls: one at the top, one at the bottom.
   --pull is how far the content tucks up under the top bar. */
.phone__bar,
.phone__dock {
  position: sticky;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
}

.phone__bar {
  top: 0;
}

.phone__bar + .phone__content {
  margin-top: calc(-1 * var(--pull, 0%));
}

.phone__dock {
  bottom: 0;
  margin-top: calc(-1 * var(--dock, 0%));
}

/* A white strip behind the status bar that stays put, so a screen with no top bar
   of its own does not scroll its text up under the clock. 94 / 770 of the width. */
.phone__screen--strip::before {
  content: "";
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  margin-bottom: -12.208%;
  padding-top: 12.208%;
  background: #fff;
}

.phone__content {
  position: relative;
  min-height: 100%;
}

.phone__content img,
.phone__content video {
  display: block;
  width: 100%;
  height: auto;
}

.case-content p.phone__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  max-width: none;
  margin: 0;
  padding: var(--space-2);
  background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 8px, #f1f1f1 8px, #f1f1f1 16px);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-2);
}

.pin {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  background: var(--pin-bg, var(--blue));
  color: var(--pin-ink, #fff);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* Shown by the script on screens that are longer than the phone */
.phone__hint {
  position: absolute;
  z-index: 4;
  bottom: 17%;
  left: 50%;
  padding: 6px 10px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 240ms ease;
}

.phone__hint.is-gone {
  opacity: 0;
}

/* ---------- A recording playing inside the phone ---------- */

.clip {
  max-width: 1040px;
  margin: var(--space-3) 0 0;
}

.clip__stage {
  display: grid;
  place-items: center;
  padding: var(--space-5) var(--space-4);
  background: var(--paper, #f6f6f6);
}

/* A line under the recording saying what it shows */
.clip figcaption {
  max-width: 46em;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* The recording is a little shorter than the phone's screen, so it sits under
   the status bar on white, and reads as one full screen. */
.phone__screen--video {
  background: #fff;
  overflow: hidden;
}

/* The bar at the foot of the screen, as on a real phone */
.phone__screen--video::after {
  content: "";
  position: absolute;
  bottom: 1.2%;
  left: 50%;
  width: 35%;
  height: 0.7%;
  min-height: 4px;
  border-radius: 99px;
  background: rgba(0, 4, 51, 0.28);
  transform: translateX(-50%);
}

.phone__video {
  position: absolute;
  top: 6.227%;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
}

/* A video made to fill the whole screen, status bar strip included */
.phone__video--full {
  top: 0;
  height: 100%;
  object-fit: cover;
}

.phone__screen--full::after {
  content: none;
}

/* The whole screen is the pause / play control. The play icon shows only while paused. */
.phone__toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.phone__toggle svg {
  display: none;
  width: 52px;
  height: 52px;
  padding: 16px;
  background: var(--pin-bg, var(--blue));
  color: var(--pin-ink, #fff);
}

.phone__toggle.is-paused svg {
  display: block;
}

.phone__toggle:focus-visible {
  outline: 3px solid var(--pin-bg, var(--blue));
  outline-offset: -4px;
}

/* ---------- New feature: video plus still screens ---------- */

.feature {
  margin-top: var(--space-8);
}

.feature__stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 1040px;
  margin-top: var(--space-4);
  padding: var(--space-5) var(--space-4);
  background: var(--paper, #f6f6f6);
}

.feature__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin: 0;
}

.feature__item .phone {
  width: min(100%, 240px);
}

.feature__item figcaption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: center;
  color: var(--ink-2);
}

@media (max-width: 768px) {
  .ba__panels {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .ba__panel {
    padding: var(--space-3) var(--space-2) var(--space-4);
  }

  .ba-show.is-ready .ba__toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--space-2);
    border: 2px solid var(--ink);
  }

  .ba__toggle button {
    min-height: 44px;
    padding: 0 var(--space-2);
    border: 0;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    cursor: pointer;
  }

  .ba__toggle button[aria-pressed="true"] {
    background: var(--ink);
    color: #fff;
  }

  .ba-show.is-ready .ba[data-view="before"] .ba__panel--after,
  .ba-show.is-ready .ba[data-view="after"] .ba__panel--before {
    display: none;
  }

  .feature__stage {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .feature__stage::-webkit-scrollbar {
    display: none;
  }

  .feature__item {
    flex: 0 0 70%;
    scroll-snap-align: center;
  }
}

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

/* ---------- Sign-off ---------- */

.signoff {
  position: relative;
  padding: var(--space-6) 120px var(--space-5) 0;
}

.signoff__thanks {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-2);
}

.signoff__name,
.case-content p.signoff__name {
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  color: var(--blue);
}

.signoff__name span {
  position: relative;
  display: inline-block;
}

/* The eyes from the tab icon, peering over the line at the end of the page */
.signoff__eyes {
  position: absolute;
  right: var(--space-3);
  bottom: 0;
  display: block;
}

/* ---------- End of page ---------- */

.case-foot {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  max-width: 1040px;
  padding-top: var(--space-2);
  border-top: 2px solid var(--ink);
}

.case-foot__links {
  display: flex;
  gap: var(--space-4);
}

/* ---------- Smaller screens ---------- */

@media (max-width: 1100px) {
  .stats,
  .meta-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Three cards stay in a row until they get too narrow, then stack */
@media (max-width: 1100px) {
  .stats--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .stats--three {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats--three .stat {
    min-height: 0;
  }

  .stats--three .stat__value {
    margin-bottom: 0;
  }

  .case-content .stats--three p.stat__why {
    margin-top: var(--space-2);
  }
}

/* Tablets in portrait and phones: one column. The section menu is not shown
   here; "Go back" stays as a plain link at the top of the content. */
@media (max-width: 900px) {
  .case-body {
    display: block;
  }

  .case-body:not(.case-body--cont) {
    padding-top: var(--space-2);
    padding-bottom: 0;
  }

  .case-body--cont {
    padding-top: var(--space-6);
    padding-bottom: var(--space-10);
  }

  .case-side {
    position: static;
    margin: 0 0 var(--space-3);
  }

  .case-side .pixel-link {
    margin-bottom: 0;
  }

  .case-side nav,
  .case-body--cont .case-side {
    display: none;
  }

  .case-content section {
    padding: var(--space-6) 0;
    scroll-margin-top: var(--space-2);
  }

  .case-body:not(.case-body--cont) .case-content > section:last-child {
    padding-bottom: var(--space-6);
  }

  .case-break {
    padding-top: var(--space-12);
    padding-bottom: var(--space-8);
  }

  .case-foot {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .site-bar {
    grid-template-columns: 1fr;
  }

  .site-bar__link {
    display: none;
  }

  .case-hero {
    min-height: clamp(460px, 88svh, 860px);
    padding-top: 88px;
  }

  .case-hero__note {
    top: 96px;
    left: var(--page-pad);
    right: auto;
  }

  .fixes {
    grid-template-columns: minmax(0, 1fr);
  }

  .device-shot__stage {
    aspect-ratio: 4 / 5;
    padding: var(--space-3);
  }

  /* Crop in on the middle of the picture so the phone stays readable. */
  .device-shot__photo {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% center;
  }

  .signoff__eyes {
    right: var(--space-2);
    width: 60px;
    height: 32px;
  }

  .case-break__sub {
    font-size: 1.125rem;
  }

  .fix .placeholder {
    max-width: 320px;
    margin-top: 0;
  }

  .case-content blockquote p {
    font-size: 1.125rem;
  }
}

@media (max-width: 480px) {
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .stat {
    min-height: 0;
  }

  .case-content p.stat__why {
    margin-top: var(--space-2);
  }
}

@media (max-width: 390px) {
  .site-bar,
  .case-hero,
  .case-body,
  .case-break {
    --page-pad: var(--space-2);
  }

  .meta-strip {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-link svg {
    animation: none;
  }

  .reveal-on [data-reveal],
  .reveal-on .case-break__text > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}