* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  background: #f7f6f2;
  color: #252724;
  font:
    16px/1.65 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: #566e45;
}
a:focus-visible,
button:focus-visible {
  outline: 3px solid #566e45;
  outline-offset: 5px;
}
header {
  position: sticky;
  top: 0;
  background: #f7f6f2f5;
  border-bottom: 1px solid #dddcd5;
  z-index: 5;
}
.nav {
  max-width: 1120px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  gap: 20px;
}
.brand {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -1px;
}
.links {
  display: flex;
  gap: 27px;
  align-items: center;
  font-size: 14px;
}
.pill {
  border: 1px solid #aaa;
  padding: 7px 16px;
  border-radius: 30px;
}
.wrap {
  max-width: 1120px;
  margin: auto;
  padding: 0 28px;
}
.hero {
  padding: 72px 0 62px;
  max-width: 770px;
}
.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #65715f;
}
h1 {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.13;
  font-weight: 500;
  letter-spacing: -2.5px;
  margin: 20px 0;
}
h2 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -1px;
}
h3 {
  font-size: 25px;
  font-weight: 500;
  margin: 10px 0;
}
p {
  color: #62655e;
  max-width: 680px;
}
.hero p {
  font-size: 19px;
  max-width: 590px;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid #d9dbd2;
  padding-top: 25px;
}
.section-head span,
.meta {
  font-size: 12px;
  color: #75786f;
}
.project {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 55px;
  align-items: center;
  padding: 36px 0 46px;
  border-bottom: 1px solid #d9dbd2;
}
.visual {
  height: 270px;
  background: #e9e6f1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  position: relative;
}
.visual.tally {
  background: #e1e7e9;
}
.visual.sketch {
  background: #f1e8e3;
}
.screen {
  width: 73%;
  height: 65%;
  background: #ffffffb3;
  border: 1px solid #ffffff;
  border-radius: 7px;
  padding: 18px;
  box-shadow: 0 12px 30px #29272c0d;
}
.bar {
  height: 6px;
  background: #cbc8d0;
  width: 40%;
  margin: 12px 0;
  border-radius: 3px;
}
.bar.long {
  width: 85%;
  background: #e6e4e9;
}
.tile {
  display: inline-block;
  width: 29%;
  height: 50px;
  background: #e6e4e9;
  margin: 10px 2% 0 0;
  border-radius: 4px;
}
.caption {
  position: absolute;
  bottom: 14px;
  font-size: 11px;
  color: #777;
}
.arrow {
  display: inline-block;
  margin-top: 15px;
  border-bottom: 1px solid #566e45;
  padding-bottom: 4px;
  font-size: 14px;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin: 35px 0 70px;
}
.placeholder {
  background: #e8e9e2;
  min-height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #73776a;
  font-size: 13px;
  border: 1px dashed #bbc0b3;
  border-radius: 5px;
}
.block {
  padding: 32px 0 55px;
  border-bottom: 1px solid #d9dbd2;
}
.note {
  background: #ebeee5;
  padding: 12px 18px;
  font-size: 13px;
  color: #65715f;
  border-radius: 4px;
  margin: 25px 0;
}
.footer {
  padding: 55px 0 25px;
  margin-top: 55px;
  border-top: 1px solid #d9dbd2;
}
.footer h2 {
  font-size: 38px;
  margin: 5px 0 24px;
}
.footer-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 55px;
  font-size: 11px;
  color: #85887f;
}
.case {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 60px;
  margin-top: 50px;
}
.toc {
  position: sticky;
  top: 115px;
  align-self: start;
  font-size: 13px;
}
.toc a {
  display: block;
  margin: 15px 0;
  color: #777;
}
.toc a.active {
  color: #344f29;
  font-weight: 650;
}
.case section {
  padding: 20px 0 55px;
  border-bottom: 1px solid #ddd;
}
.case .placeholder {
  min-height: 180px;
}
.small {
  font-size: 13px;
}
.role {
  font-size: 13px;
  color: #777;
}
@media (max-width: 700px) {
  .nav {
    padding: 17px 20px;
    flex-wrap: wrap;
  }
  .links {
    gap: 15px;
    flex-wrap: wrap;
    font-size: 12px;
  }
  .wrap {
    padding: 0 20px;
  }
  .hero {
    padding: 45px 0;
  }
  h1 {
    letter-spacing: -1.5px;
  }
  .project {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .visual {
    height: 230px;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .case {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .toc {
    position: relative;
    top: 0;
    display: flex;
    gap: 15px;
    overflow: auto;
  }
  .toc .eyebrow {
    display: none;
  }
  .toc a {
    white-space: nowrap;
  }
  .bottom {
    gap: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
.brand {
  display: flex;
  align-items: center;
}
.brand img {
  width: 190px;
  height: auto;
  display: block;
}
.footer {
  margin-top: 0;
  padding: 45px 0 48px;
  border-top: 1px solid #d9dbd2;
}
.footer-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  font-size: 14px;
  color: #62655e;
  letter-spacing: 0;
}
.footer-links a {
  padding: 8px 0;
}
.footer-credit {
  font-size: 13px;
  color: #93958e;
  white-space: nowrap;
}
#work > .project:last-child,
.project:last-of-type,
.block:last-of-type {
  border-bottom: 0;
}
.hero {
  padding: 58px 0 46px;
}
@media (max-width: 700px) {
  .brand img {
    width: 150px;
  }
  .footer-row {
    flex-direction: column;
    gap: 16px;
  }
  .footer-links {
    gap: 18px;
    font-size: 13px;
  }
  .footer {
    padding: 28px 0 32px;
  }
  .footer-credit {
    font-size: 12px;
  }
}

.back-link {
  display: inline-block;
  font-size: 14px;
  color: #62655e;
  margin-bottom: 28px;
}
.back-link:hover {
  color: #252724;
  text-decoration: underline;
}
/* Wider layouts on large displays, with readable text columns. */
.nav,
.wrap {
  width: 100%;
  max-width: 1440px;
  padding-left: clamp(24px, 4vw, 64px);
  padding-right: clamp(24px, 4vw, 64px);
}
.project {
  gap: clamp(32px, 4vw, 72px);
}
.visual {
  height: auto;
  aspect-ratio: 1.8;
  min-height: 270px;
}
.project p {
  max-width: 560px;
}
.case article {
  min-width: 0;
}
.case article p {
  max-width: 720px;
}
header {
  background: #f7f6f2;
}
@media (min-width: 1800px) {
  .nav,
  .wrap {
    max-width: 1640px;
  }
  .visual {
    min-height: 330px;
  }
  .hero {
    max-width: 900px;
  }
  .hero h1 {
    font-size: 72px;
  }
}
@media (max-width: 700px) {
  .nav,
  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .project {
    gap: 20px;
  }
  .visual {
    min-height: 220px;
  }
  .hero h1 {
    font-size: 40px;
  }
}

@media (max-width: 700px) {
  .nav {
    gap: 10px;
  }
  .links {
    gap: 16px;
  }
  .brand img {
    width: 140px;
  }
  .project {
    grid-template-columns: minmax(0, 1fr);
  }
  .project > div {
    min-width: 0;
  }
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .toc {
    padding: 0 0 10px;
    max-width: 100%;
    overscroll-behavior-x: contain;
  }
  .toc a {
    padding: 10px 2px;
    margin: 0;
  }
  .hero p {
    font-size: 17px;
  }
  .footer-links a:first-child {
    overflow-wrap: anywhere;
  }
  .case {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 440px) {
  .nav {
    align-items: flex-start;
  }
  .brand {
    width: 100%;
  }
  .links {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
  .links a {
    min-height: 36px;
    display: flex;
    align-items: center;
  }
  .hero {
    padding-top: 32px;
  }
  .hero h1 {
    font-size: 38px;
  }
  .footer-links {
    column-gap: 20px;
    row-gap: 0;
  }
  .visual {
    min-height: 190px;
  }
  h2 {
    font-size: 28px;
  }
  html {
    scroll-padding-top: 145px;
  }
}

/* White brand direction and restrained interaction feedback. */
body,
header {
  background: #fff;
  color: #292d33;
}
p,
.role,
.footer-links {
  color: #626a75;
}
.eyebrow,
a:hover {
  color: #60758c;
}
header,
.section-head,
.project,
.footer,
.block,
.case section {
  border-color: #e3e6ea;
}
.arrow {
  border-color: #60758c;
}
.note {
  background: #f1f4f8;
  color: #60758c;
}
a {
  transition: color 0.16s ease;
}
a:focus-visible {
  outline: 2px solid #60758c;
  outline-offset: 6px;
}
.project .visual {
  transition: transform 0.25s ease;
}
.project:hover .visual,
.project:focus-visible .visual {
  transform: translateY(-4px);
}
.arrow {
  transition: transform 0.18s ease;
}
.project:hover .arrow {
  transform: translateX(4px);
}
.interaction-cursor {
  display: none;
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  transform: translate(-50%, -50%);
  align-items: center;
  justify-content: center;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #60758c;
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
  transition:
    width 0.14s,
    height 0.14s,
    border-radius 0.14s;
  box-shadow: 0 0 0 3px #60758c12;
}
.interaction-cursor.is-link {
  width: auto;
  min-width: 32px;
  height: 30px;
  padding: 0 12px;
  border-radius: 20px;
}
.click-feedback {
  position: fixed;
  pointer-events: none;
  z-index: 999;
  left: var(--x);
  top: var(--y);
  width: 14px;
  height: 14px;
  border: 1px solid #60758c;
  border-radius: 50%;
  animation: click-ring 0.35s ease-out forwards;
}
.interaction-status {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #292d33;
  color: #fff;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 12px;
  z-index: 1001;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.interaction-status.visible {
  opacity: 1;
}
@keyframes click-ring {
  from {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  to {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}
@media (hover: hover) and (pointer: fine) {
  html.custom-cursor,
  html.custom-cursor a {
    cursor: none;
  }
  .custom-cursor .interaction-cursor {
    display: flex;
  }
}
@media (prefers-reduced-motion: reduce) {
  a,
  .project .visual,
  .arrow,
  .interaction-cursor,
  .interaction-status {
    transition: none;
  }
  .project:hover .visual,
  .project:focus-visible .visual,
  .project:hover .arrow {
    transform: none;
  }
  .click-feedback {
    display: none;
  }
}

/* Consistent collaborative pointer. */
.interaction-cursor,
.interaction-cursor.is-link {
  width: 28px;
  min-width: 0;
  height: 32px;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  transform: translate(-3px, -2px);
  transition: none;
  align-items: flex-start;
  justify-content: flex-start;
}
.cursor-arrow {
  display: block;
  width: 28px;
  height: 32px;
  flex: none;
  filter: none;
}
.cursor-label {
  position: absolute;
  left: 23px;
  top: 25px;
  padding: 6px 10px;
  background: #60758c;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 0 11px 11px 11px;
  font-size: 11px;
  line-height: 1.2;
  box-shadow: none;
  transform-origin: top left;
  transition: transform 0.16s ease;
}
.interaction-cursor.is-link .cursor-label {
  background: #60758c;
}
.cursor-symbol {
  display: none;
}
.interaction-cursor.is-clicked .cursor-label {
  transform: scale(0.94);
}
.click-feedback {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .cursor-label {
    transition: none;
  }
  .interaction-cursor.is-clicked .cursor-label {
    transform: none;
  }
}

/* Outline compass while browsing, diagonal arrow on links. */
.cursor-label {
  display: flex;
  align-items: center;
  gap: 7px;
}
.cursor-symbol {
  display: block;
  flex: none;
  width: 14px;
  height: 14px;
  animation: none;
  background: center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M14 6L11.5 11.5L6 14L8.5 8.5Z' fill='none' stroke='white' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M8.5 8.5L11.5 11.5' stroke='white' stroke-width='1.4'/%3E%3C/svg%3E");
}
.interaction-cursor.is-link .cursor-symbol {
  background: center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 15L15 5M5 5H15V15' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cursor-label,
.interaction-cursor.is-link .cursor-label {
  background: #ff851b;
  color: #fff;
}

/* White outline remains visible against the white page. */
.cursor-arrow {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.16));
}
.cursor-label {
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.12);
}
.links a,
.footer-links a,
.back-link {
  border-radius: 4px;
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}
@media (hover: hover) and (pointer: fine) {
  .links a:hover,
  .footer-links a:hover,
  .back-link:hover {
    background: #fff4e9;
    box-shadow: 0 0 0 6px #fff4e9;
    color: #292d33;
  }
  .project:hover .visual {
    box-shadow: 0 0 0 2px #ff851b25;
  }
  .arrow:hover {
    color: #292d33;
    border-color: #ff851b;
  }
}
@media (prefers-reduced-motion: reduce) {
  .links a,
  .footer-links a,
  .back-link {
    transition: none;
  }
}

/* Matching outline weight and softer collaborative label. */
.cursor-label {
  left: 23px;
  top: 25px;
  border: 2px solid #fff;
  border-radius: 4px 15px 15px 15px;
  padding: 6px 11px;
  line-height: 1.25;
  box-shadow:
    0 2px 5px rgb(0 0 0 / 0.18),
    0 5px 12px rgb(0 0 0 / 0.06);
}
.cursor-arrow {
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.17));
}

/* Smaller pointer with rounded path corners. */
.interaction-cursor,
.interaction-cursor.is-link {
  width: 22px;
  height: 25px;
  transform: translate(-2.4px, -2px);
}
.cursor-arrow {
  width: 22px;
  height: 25px;
}
.cursor-label {
  left: 18px;
  top: 20px;
}

/* Reveal the original underline from left to right, without recolouring. */
.arrow {
  position: relative;
  border-bottom: 0;
  padding-bottom: 5px;
}
.arrow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #60758c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.arrow:hover::after,
.arrow:focus-visible::after,
.project:hover .arrow::after,
.project:focus-visible .arrow::after {
  transform: scaleX(1);
}
.arrow:hover {
  border-color: transparent;
  color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .arrow::after {
    transition: none;
  }
}

/* Always-visible link underline, replayed only over the link itself. */
.arrow {
  border-bottom: 1px solid #60758c;
  padding-bottom: 4px;
  background: #fff;
}
.arrow::after {
  display: none;
}
.arrow:hover,
.arrow:focus-visible {
  border-bottom-color: transparent;
  animation: underline-replay 0.32s ease-out forwards;
}
.project:hover .arrow,
.project:focus-visible .arrow {
  transform: none;
}
@keyframes underline-replay {
  0% {
    background-image: linear-gradient(#60758c, #60758c);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 0 1px;
  }
  100% {
    background-image: linear-gradient(#60758c, #60758c);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .arrow:hover,
  .arrow:focus-visible {
    animation: none;
    border-bottom-color: #60758c;
  }
}

.location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: #626a75;
}
.location svg {
  flex: none;
}
#work {
  scroll-margin-top: 100px;
}
.hero h1 {
  font-size: clamp(38px, 4.5vw, 66px);
  max-width: 1050px;
  letter-spacing: -2px;
}
.hero {
  max-width: 1100px;
}
.hero p {
  max-width: 650px;
  line-height: 1.65;
}
@media (max-width: 700px) {
  .hero h1 {
    font-size: 38px;
    letter-spacing: -1.3px;
  }
  .hero {
    padding-bottom: 36px;
  }
}

/* Introduction balances positioning with explanation. */
.hero:has(.intro-layout) {
  max-width: none;
  padding-top: 65px;
  padding-bottom: 66px;
}
.intro-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.intro-layout h1 {
  font-size: clamp(38px, 4vw, 64px);
  line-height: 1.16;
  letter-spacing: -2px;
  margin: 24px 0 0;
}
.intro-copy {
  max-width: 470px;
  padding-top: 22px;
}
.intro-copy p {
  font-size: 18px;
  margin: 0 0 24px;
  line-height: 1.75;
}
.design-word {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 9px;
  text-decoration-color: #a8b3bf;
}
.development-word {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  font-weight: 400;
  letter-spacing: -2.5px;
}
@media (max-width: 900px) {
  .intro-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .intro-copy {
    max-width: 620px;
    padding-top: 0;
  }
  .hero:has(.intro-layout) {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
@media (max-width: 440px) {
  .intro-layout h1 {
    font-size: 36px;
    letter-spacing: -1.3px;
  }
  .intro-copy p {
    font-size: 17px;
  }
  .development-word {
    letter-spacing: -1.8px;
  }
}

.design-word,
.development-word {
  text-decoration: none;
  font-family: inherit;
  font-size: 1em;
  font-weight: inherit;
  letter-spacing: inherit;
  color: #5268aa;
  background: linear-gradient(110deg, #427da8 0%, #7165a7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.intro-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}
@media (max-width: 900px) {
  .intro-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.intro-layout {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
}
.intro-layout h1 {
  font-size: clamp(36px, 3.4vw, 58px);
  letter-spacing: -1.8px;
}
.keyword-line {
  white-space: nowrap;
}
.design-word,
.development-word {
  color: #c66515;
  background: linear-gradient(110deg, #be5d12, #df7922);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 900px) {
  .intro-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .intro-layout h1 {
    font-size: clamp(32px, 5vw, 48px);
  }
}
@media (max-width: 600px) {
  .keyword-line {
    white-space: normal;
  }
  .intro-layout h1 {
    font-size: clamp(29px, 7.4vw, 38px);
    letter-spacing: -1px;
  }
}

.design-word,
.development-word {
  color: #f47732;
  background: linear-gradient(100deg, #f46b51 0%, #ff922e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.intro-layout h1 {
  font-weight: 500;
  letter-spacing: -1.25px;
  line-height: 1.2;
}
.intro-copy {
  padding-top: 0;
}

/* Full opening screen, with supporting copy in the lower right. */
.hero:has(.intro-layout) {
  min-height: calc(100svh - 100px);
  display: flex;
  flex-direction: column;
  padding-top: clamp(44px, 7vh, 90px);
  padding-bottom: clamp(48px, 7vh, 90px);
}
.intro-layout {
  flex: 1;
  align-items: start;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
}
.intro-layout h1 {
  margin-top: 28px;
  font-size: clamp(38px, 3.5vw, 62px);
  line-height: 1.22;
}
.intro-copy {
  align-self: end;
  padding-top: 60px;
  max-width: 470px;
}
.intro-copy p {
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .hero:has(.intro-layout) {
    min-height: calc(100svh - 100px);
    padding-top: 40px;
    padding-bottom: 48px;
  }
  .intro-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .intro-layout h1 {
    font-size: clamp(34px, 5vw, 48px);
  }
  .intro-copy {
    justify-self: end;
    max-width: 520px;
    padding-top: 0;
  }
}
@media (max-width: 440px) {
  .hero:has(.intro-layout) {
    min-height: calc(100svh - 115px);
    padding-top: 28px;
    padding-bottom: 40px;
  }
  .intro-layout {
    gap: 30px;
  }
  .intro-layout h1 {
    font-size: 32px;
    line-height: 1.22;
  }
  .keyword-line {
    white-space: normal;
  }
  .intro-copy p {
    font-size: 16px;
    line-height: 1.65;
  }
}

.intro-layout {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
}
.intro-copy {
  width: 100%;
  max-width: 600px;
}
.intro-copy p {
  max-width: none;
  font-size: 18px;
  line-height: 1.65;
}
@media (max-width: 900px) {
  .intro-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .intro-copy {
    max-width: 650px;
  }
}
@media (max-width: 440px) {
  .intro-copy p {
    font-size: 16px;
  }
}

/* Compact opening: grouped introduction, with the work section hinted below. */
.hero:has(.intro-layout) {
  min-height: 0;
  display: block;
  padding-top: clamp(48px, 7vh, 78px);
  padding-bottom: clamp(64px, 10vh, 110px);
}
.intro-layout {
  min-height: clamp(300px, 42vh, 440px);
  align-items: center;
  flex: none;
}
.intro-layout h1 {
  margin-top: 24px;
}
.intro-copy {
  align-self: center;
  padding-top: 68px;
}
@media (max-width: 900px) {
  .hero:has(.intro-layout) {
    min-height: 0;
    padding-top: 40px;
    padding-bottom: 56px;
  }
  .intro-layout {
    min-height: 0;
    gap: 30px;
  }
  .intro-copy {
    align-self: auto;
    justify-self: start;
    padding-top: 0;
  }
}
@media (max-width: 440px) {
  .hero:has(.intro-layout) {
    min-height: 0;
    padding-top: 28px;
    padding-bottom: 44px;
  }
  .intro-layout {
    gap: 24px;
  }
}

.intro-line {
  display: block;
}
@media (min-width: 1200px) {
  .intro-copy p {
    font-size: clamp(15px, 1.05vw, 18px);
  }
  .intro-line {
    white-space: nowrap;
  }
}
@media (max-width: 1199px) {
  .intro-line {
    display: inline;
    white-space: normal;
  }
}

.after-work {
  padding: 18px 0 46px;
}
.after-work .arrow {
  margin-top: 0;
}
.intro-copy p {
  margin-bottom: 0;
}

/* Centered opening and persistent navigation location. */
.hero:has(.intro-layout) {
  text-align: center;
  padding-top: clamp(48px, 7vh, 80px);
  padding-bottom: clamp(64px, 9vh, 96px);
}
.intro-layout {
  display: block;
  min-height: 0;
}
.intro-layout h1 {
  max-width: none;
  margin: 42px auto 30px;
  font-size: clamp(36px, 3.7vw, 62px);
  line-height: 1.3;
  letter-spacing: -1.6px;
}
.headline-second {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.82em;
}
.intro-copy {
  max-width: none;
  width: 100%;
  padding-top: 0;
  margin: auto;
}
.intro-copy p {
  max-width: none;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.85;
  margin: 0;
}
.intro-line {
  display: block;
  white-space: nowrap;
}
.links {
  gap: 14px;
}
.links a {
  padding: 8px 13px;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: none;
}
.links a.is-current {
  background: #fff0e3;
  color: #292d33;
}
.links a.is-current:hover {
  background: #fff0e3;
  box-shadow: none;
}
.links a:hover {
  box-shadow: none;
}
@media (max-width: 1100px) {
  .headline-second {
    white-space: normal;
  }
  .intro-line {
    white-space: normal;
  }
  .intro-copy {
    max-width: 760px;
  }
  .intro-layout h1 {
    font-size: clamp(34px, 4.5vw, 50px);
  }
}
@media (max-width: 700px) {
  .hero:has(.intro-layout) {
    padding-top: 32px;
    padding-bottom: 48px;
  }
  .intro-layout h1 {
    margin-top: 28px;
    font-size: 36px;
    letter-spacing: -1px;
  }
  .intro-copy p {
    font-size: 16px;
    line-height: 1.65;
  }
  .intro-line + .intro-line {
    margin-top: 10px;
  }
  .links {
    gap: 4px;
  }
  .links a {
    padding: 8px 10px;
  }
}

.intro-layout h1 {
  line-height: 1.16;
  margin-top: 32px;
  margin-bottom: 22px;
}
.headline-second {
  font-size: 0.82em;
  line-height: 1.16;
}
.intro-copy p {
  line-height: 1.6;
}
.intro-line + .intro-line {
  margin-top: 0;
}
/* Hover and current location have distinct meanings. */
.links a:hover {
  background: transparent;
  box-shadow: none;
}
.links a.is-current,
.links a.is-current:hover {
  background: #fff0e3;
  color: #292d33;
  box-shadow: none;
}
@media (max-width: 700px) {
  .intro-layout h1 {
    margin-top: 26px;
    margin-bottom: 20px;
  }
  .intro-copy p {
    line-height: 1.65;
  }
}

/* Centered headline, with a readable left-aligned supporting text block. */
.intro-copy {
  max-width: 620px;
  margin: 28px auto 0;
  text-align: left;
}
.intro-copy p {
  font-size: 17px;
  line-height: 1.65;
  max-width: none;
  margin: 0;
}
.intro-copy .intro-skills {
  color: #404750;
  margin-bottom: 12px;
}
.intro-copy .intro-value {
  color: #6b727d;
}
@media (max-width: 700px) {
  .intro-copy {
    max-width: 540px;
    margin-top: 24px;
  }
  .intro-copy p {
    font-size: 16px;
    line-height: 1.65;
  }
}

/* Intro occupies the first screen, with the work heading peeking below. */
.hero:has(.intro-layout) {
  min-height: calc(100svh - 185px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 54px;
  padding-bottom: 70px;
}
.intro-copy {
  width: 100%;
  max-width: 1120px;
  margin: 44px auto 0;
  padding-top: 0;
  text-align: center;
}
.intro-copy p,
.intro-copy .intro-skills,
.intro-copy .intro-value {
  color: #626a75;
  font-size: 18px;
  line-height: 1.75;
  margin: 0;
}
.intro-copy .intro-skills {
  margin-bottom: 10px;
}
.skill-highlight {
  white-space: nowrap;
  text-decoration-line: underline;
  text-decoration-color: #ffcba8;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
@media (max-width: 700px) {
  .hero:has(.intro-layout) {
    min-height: calc(100svh - 160px);
    padding-top: 36px;
    padding-bottom: 50px;
  }
  .intro-copy {
    margin-top: 30px;
    max-width: 560px;
  }
  .intro-copy p,
  .intro-copy .intro-skills,
  .intro-copy .intro-value {
    font-size: 16px;
    line-height: 1.7;
  }
  .intro-copy .intro-skills {
    margin-bottom: 14px;
  }
}

/* A quiet scroll cue balances the supporting introduction. */
.skill-highlight {
  text-decoration: none;
}
.hero-bottom {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  align-items: center;
  gap: 60px;
  width: 100%;
  margin-top: clamp(54px, 8vh, 96px);
}
.hero-bottom .intro-copy {
  max-width: 760px;
  margin: 0 0 0 auto;
  text-align: right;
}
.hero-bottom .intro-copy .intro-skills {
  margin-bottom: 4px;
}
.work-scroll {
  justify-self: start;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #626a75;
  font-size: 14px;
  margin-left: clamp(0px, 6vw, 90px);
}
.work-scroll span {
  border-bottom: 1px solid #60758c;
  padding-bottom: 5px;
}
.work-scroll:hover {
  color: #626a75;
}
.work-scroll svg {
  transition: transform 0.2s ease;
}
.work-scroll:hover svg {
  transform: translateY(4px);
}
@media (max-width: 900px) {
  .hero-bottom {
    grid-template-columns: 1fr 2fr;
    gap: 28px;
  }
  .hero-bottom .intro-copy {
    text-align: left;
  }
  .work-scroll {
    margin-left: 0;
  }
}
@media (max-width: 700px) {
  .hero-bottom {
    display: flex;
    flex-direction: column-reverse;
    gap: 28px;
    margin-top: 30px;
  }
  .hero-bottom .intro-copy {
    text-align: center;
    margin: 0 auto;
  }
  .work-scroll {
    align-self: center;
  }
  .hero:has(.intro-layout) {
    padding-bottom: 42px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .work-scroll svg {
    transition: none;
  }
}

.hero-bottom .intro-copy {
  grid-column: 2;
  max-width: 800px;
  width: 100%;
}
.copy-row {
  display: block;
}
@media (min-width: 1100px) {
  .copy-row {
    white-space: nowrap;
  }
}
@media (max-width: 700px) {
  .hero-bottom .intro-copy {
    width: 100%;
  }
  .copy-row {
    display: inline;
  }
  .copy-row + .copy-row:before {
    content: " ";
  }
}

/* Supporting copy shares the headline's central axis. */
.hero-bottom {
  display: block;
  margin-top: 44px;
}
.hero-bottom .intro-copy {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 700px) {
  .hero-bottom {
    display: block;
    margin-top: 30px;
  }
  .hero-bottom .intro-copy {
    max-width: 560px;
  }
}

.dusk-heading {
  padding: 42px 0 28px;
}
.dusk-heading > .eyebrow {
  margin-top: 36px;
}
.dusk-heading h1 {
  font-size: 64px;
  margin: 14px 0;
}
.dusk-lead {
  font-size: 24px;
  max-width: 780px;
  margin: 0 0 18px;
}
.dusk-case .case {
  margin-top: 24px;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 64px;
}
.dusk-case article {
  min-width: 0;
  max-width: 1050px;
}
.dusk-case article p {
  max-width: 780px;
}
.dusk-case .case section {
  scroll-margin-top: 115px;
  padding: 32px 0 56px;
}
.dusk-case h2 {
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.25;
  max-width: 800px;
}
.dusk-case .toc a.active {
  color: #292d33;
  background: #f0ecf8;
  border-radius: 8px;
  padding: 7px 10px;
  margin-left: -10px;
}
.dusk-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 28px 0;
}
.dusk-summary h3 {
  font-size: 20px;
}
.dusk-summary p {
  font-size: 15px;
}
.evidence-slot {
  padding: 48px 24px;
  background: #f5f4fa;
  border: 1px dashed #d6d2e3;
  border-radius: 8px;
  color: #72707d;
  text-align: center;
  margin: 28px 0 0;
}
.evidence-slot small {
  font-size: 13px;
}
.journey-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 30px 0;
}
.journey-grid > div {
  border-top: 1px solid #d9dce2;
  padding-top: 16px;
}
.journey-grid h3 {
  font-size: 18px;
}
.journey-grid p {
  font-size: 14px;
}
.journey-grid small {
  display: block;
  color: #7a6e68;
  font-size: 12px;
}
.dusk-note {
  padding: 18px 22px;
  background: #faf7f4;
  border-radius: 6px;
  color: #626a75;
  margin-top: 26px;
  font-size: 15px;
}
.decision-list > div {
  padding: 14px 0;
}
.decision-list h3 {
  font-size: 22px;
}
.flow-list {
  padding-left: 22px;
  color: #626a75;
}
.flow-list li {
  margin: 14px 0;
}
.dusk-case details {
  color: #626a75;
  border-top: 1px solid #e3e6ea;
  padding: 18px 0;
}
.dusk-case summary {
  cursor: pointer;
}
@media (max-width: 900px) {
  .dusk-case .case {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .dusk-case .toc {
    position: sticky;
    top: 80px;
    display: flex;
    overflow: auto;
    gap: 18px;
    background: white;
    z-index: 3;
    padding: 8px 0;
  }
  .dusk-case .toc .eyebrow {
    display: none;
  }
  .dusk-case .toc a {
    white-space: nowrap;
    margin: 0;
    padding: 7px 10px;
  }
  .dusk-case .toc a.active {
    margin: 0;
  }
  .journey-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dusk-summary {
    grid-template-columns: 1fr;
  }
  .dusk-heading h1 {
    font-size: 48px;
  }
  .dusk-lead {
    font-size: 20px;
  }
}
@media (max-width: 500px) {
  .journey-grid {
    grid-template-columns: 1fr;
  }
  .dusk-case .toc {
    top: 85px;
  }
  .dusk-heading {
    padding-top: 24px;
  }
}

.dusk-case .case article > section:first-child {
  padding-top: 0;
}
.dusk-case .toc {
  padding-top: 0;
}
.dusk-case .toc > .eyebrow {
  margin-bottom: 14px;
}
.dusk-case .toc a {
  display: block;
  margin: 0 0 10px;
  padding: 7px 10px;
  margin-left: -10px;
  line-height: 20px;
}
.dusk-case .toc a.active {
  margin: 0 0 10px -10px;
}
.dusk-case .case article > section:first-child > .eyebrow {
  padding-top: 41px;
  line-height: 20px;
}
.work-log-figure {
  margin: 26px 0 32px;
}
.work-log-scroll {
  overflow-x: auto;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
}
.work-log-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.work-log-figure figcaption {
  font-size: 12px;
  color: #858b96;
  margin-top: 10px;
}
.overview-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.overview-story h3 {
  font-size: 21px;
}
.overview-role {
  border-top: 1px solid #e3e6ea;
  margin-top: 24px;
  padding-top: 18px;
}
@media (max-width: 900px) {
  .dusk-case .case article > section:first-child > .eyebrow {
    padding-top: 16px;
  }
  .dusk-case .toc > .eyebrow {
    display: none;
  }
  .dusk-case .toc a,
  .dusk-case .toc a.active {
    margin: 0;
  }
  .overview-story {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
@media (max-width: 600px) {
  .work-log-figure img {
    width: 900px;
    max-width: none;
  }
}

.sheet-preview {
  background: #f7f5fc;
  border-radius: 12px;
  padding: 22px;
}
.sheet-title {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font:
    13px/1.5 ui-monospace,
    monospace;
  padding-bottom: 18px;
  color: #9294a7;
}
.sheet-title strong {
  color: #343541;
}
.sheet-preview .work-log-scroll {
  border-radius: 0;
  border-color: #d9d7e0;
}
.work-log-table {
  width: 100%;
  min-width: 1140px;
  border-collapse: collapse;
  background: #fff;
  font-size: 12px;
  line-height: 1.5;
  color: #454750;
}
.work-log-table th,
.work-log-table td {
  padding: 10px 12px;
  border: 1px solid #dedde3;
  text-align: left;
  vertical-align: top;
}
.work-log-table th {
  background: #eeebf6;
  font-weight: 600;
  white-space: nowrap;
}
.work-log-table td:nth-child(2) {
  min-width: 240px;
}
.work-log-table td:last-child {
  min-width: 230px;
}
.work-log-table .sheet-done {
  background: #e7f0e2;
  white-space: nowrap;
}
.work-log-table .sheet-hold {
  background: #f0eff2;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .sheet-preview {
    padding: 14px;
  }
}

.final-work-log .work-log-scroll {
  border: 0;
  border-radius: 0;
}
.final-work-log img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
@media (max-width: 700px) {
  .final-work-log img {
    width: 1100px;
    min-width: 1100px;
    max-width: none;
  }
  .final-work-log .work-log-scroll {
    overflow-x: auto;
  }
}

.dusk-case .sheet-story-title {
  font-size: 24px;
  margin-top: 36px;
  margin-bottom: 14px;
  line-height: 1.3;
}

/* Overview text follows the same content width as its evidence image. */
.dusk-case #overview > p,
.dusk-case #overview > h2,
.dusk-case #overview > h3 {
  width: 100%;
  max-width: none;
}

.dusk-case #overview h2 {
  font-size: 32px;
  line-height: 1.3;
  margin: 24px 0 20px;
}
.dusk-case #overview > .overview-subhead {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
  margin: 40px 0 16px;
}
.dusk-case #overview > p {
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 20px;
}
.notion-evidence {
  margin: 28px 0 36px;
}
.notion-image-scroll {
  overflow-x: auto;
  border: 1px solid #e8e9ed;
  border-radius: 8px;
}
.notion-evidence img {
  display: block;
  width: 100%;
  height: auto;
}
.notion-evidence figcaption {
  font-size: 13px;
  line-height: 1.5;
  color: #858b96;
  margin-top: 10px;
}
.dusk-case #overview .report-mark {
  background: #eee7f7;
  color: #414952;
  border-radius: 3px;
  padding: 1px 3px;
  margin-inline: -3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (max-width: 700px) {
  .dusk-case #overview h2 {
    font-size: 28px;
  }
  .dusk-case #overview > p {
    font-size: 16px;
  }
  .dusk-case #overview > .overview-subhead {
    font-size: 21px;
  }
  .notion-evidence img {
    width: 1100px;
    max-width: none;
  }
}

.notion-filter-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin: 28px 0 36px;
}
.notion-filter-pair figure {
  margin: 0;
  min-width: 0;
}
.filter-crop {
  overflow: hidden;
  border: 1px solid #e8e9ed;
  border-radius: 8px;
  aspect-ratio: 1.7;
}
.filter-crop img {
  display: block;
  width: 200%;
  max-width: none;
  height: auto;
}
.notion-filter-pair figcaption {
  font-size: 13px;
  line-height: 1.5;
  color: #858b96;
  margin-top: 10px;
}
@media (max-width: 700px) {
  .notion-filter-pair {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.notion-filter-pair figcaption {
  font-size: 15px;
  line-height: 1.6;
  color: #626a75;
  margin-top: 14px;
}
.notion-filter-pair figcaption strong {
  display: inline-block;
  font-size: 16px;
  color: #292d33;
  margin-bottom: 4px;
}

/* Distinguish spacing inside a group from spacing between groups. */
.dusk-case #overview .overview-group {
  margin-top: 56px;
}
.dusk-case #overview .overview-group > .overview-subhead {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 10px;
}
.dusk-case #overview .overview-group > p {
  font-size: 18px;
  line-height: 1.65;
  max-width: none;
  margin: 0;
}
.dusk-case #overview .notion-filter-pair {
  margin: 22px 0 0;
  gap: 28px;
}
.dusk-case #overview .notion-filter-pair figcaption {
  margin-top: 10px;
  line-height: 1.6;
}
.dusk-case #overview .notion-filter-pair figcaption strong {
  margin-bottom: 3px;
}
.dusk-case #overview .dusk-transition-group {
  margin-top: 64px;
}
@media (max-width: 700px) {
  .dusk-case #overview .overview-group {
    margin-top: 40px;
  }
  .dusk-case #overview .overview-group > p {
    font-size: 16px;
  }
  .dusk-case #overview .dusk-transition-group {
    margin-top: 44px;
  }
}

/* Reporting journey: each column is one step in the actual workflow. */
.dusk-case .journey-intro{max-width:none;margin-bottom:24px}.journey-map-scroll{overflow-x:auto;border:1px solid #e5e3ec;border-radius:12px;padding:12px;background:#faf9fc}.reporting-journey{width:100%;min-width:1100px;border-collapse:separate;border-spacing:8px;font-size:14px;line-height:1.55;table-layout:fixed}.reporting-journey th,.reporting-journey td{padding:16px;vertical-align:top;border-radius:6px;text-align:left}.reporting-journey th:first-child{width:120px;background:#f0eff4;color:#626a75;font-weight:500}.reporting-journey thead th:not(:first-child){background:#eee9f8;color:#373345;font-size:16px;font-weight:600}.reporting-journey thead small{display:block;font-size:11px;color:#81758e;margin-bottom:6px}.reporting-journey td{background:#fff;border:1px solid #e5e3ec;color:#626a75}.reporting-journey tbody tr:last-child td{background:#fff8f2;border-color:#f1e5da}.dusk-case .journey-takeaway{max-width:none;margin:18px 0 0;padding:18px 22px;background:#f7f4fb;border-radius:8px;font-size:15px}.journey-takeaway strong{display:block;color:#373345;margin-bottom:5px}

/* Before / Dusk workflow comparison. */
.workflow-comparison{margin-top:28px;padding:32px;background:#faf9fc;border:1px solid #ebe8f1;border-radius:16px}
.workflow-label{font-size:12px;font-weight:600;letter-spacing:.12em;margin-bottom:16px}.before-label{color:#ad6c42}.dusk-label{color:#7c69c4;margin-top:40px}
.before-flow{display:grid;grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;align-items:stretch;gap:8px}
.flow-step{padding:18px 14px;background:white;border:1px solid #e8e5ec;border-radius:10px}.manual-step{background:#fff7ef;border-color:#f0dccb}
.step-number{display:block;font-size:10px;font-weight:600;letter-spacing:.07em;color:#98929f;margin-bottom:10px}.manual-step .step-number{color:#b87348}
.dusk-case #journey .workflow-comparison h3{font-size:16px;line-height:1.35;margin:0 0 8px;color:#302e38}
.dusk-case #journey .workflow-comparison p{font-size:14px;line-height:1.55;margin:0;max-width:none;color:#777482}
.flow-arrow{align-self:center;text-align:center;color:#bbb2c9;font-size:20px}
.dusk-case #journey p.workflow-note{font-size:12px;margin-top:12px;color:#a17a60}
.dusk-flow{display:grid;grid-template-columns:1fr 28px 2.4fr 28px 1fr;gap:14px;align-items:center}
.flow-end{padding:18px 8px}.generation-block{padding:28px;background:#f0ebfa;border:1px solid #dcd1f2;border-radius:14px}.generation-tag{display:block;color:#806ac3;font-size:10px;letter-spacing:.1em;font-weight:600;margin-bottom:12px}
.dusk-case #journey .generation-block h3{font-size:22px;margin-bottom:10px}.generation-details{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.generation-details span{padding:5px 9px;border-radius:5px;background:#ffffff9e;font-size:11px;color:#837394}
@media(max-width:900px){.workflow-comparison{padding:20px;overflow-x:auto}.before-flow{min-width:850px}.dusk-flow{min-width:730px}.workflow-label{line-height:1.5}}

.user-workflow-figure{margin:24px 0 0}.user-workflow-figure img{display:block;width:100%;height:auto;max-width:100%}

/* Browsing keeps the existing orange label, with a white outline magnifier. */
.interaction-cursor.is-browsing .cursor-symbol {
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' fill='none' stroke='white' stroke-width='1.6'/%3E%3Cpath d='m12.5 12.5 4.5 4.5' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Research evidence and participant roles. */
.dusk-case #research .research-intro{max-width:none;margin:16px 0 0}
.participant-roles{display:flex;align-items:center;gap:24px;margin:28px 0 22px;flex-wrap:wrap}
.participant-label{font-size:13px;color:#60758c;white-space:nowrap}
.participant-pills{display:flex;gap:8px;flex-wrap:wrap}
.participant-pills span{padding:6px 13px;border-radius:100px;background:#f1f4f8;color:#626a75;font-size:13px;line-height:1.4}
.research-data{margin:0}.research-data img{display:block;width:100%;height:auto}
.research-observation{margin-top:28px;padding-left:20px;border-left:3px solid #ffd6b7}
.dusk-case #research .research-observation p{max-width:none;font-size:17px;line-height:1.65;margin:0 0 12px}
.dusk-case #research .research-method{max-width:none;font-size:13px;line-height:1.6;color:#8993a0;margin:24px 0 0}
@media(max-width:700px){.participant-roles{gap:12px}.research-observation{padding-left:14px}}

.dusk-case #research .research-observation{border:0;padding-left:0;margin-top:32px}
.participant-quote{position:relative;margin:22px 0 26px;padding:30px 32px 26px 76px;background:#faf9f7;border-radius:10px}
.participant-quote .quote-mark{position:absolute;left:25px;top:18px;font-family:Georgia,serif;font-size:76px;line-height:1;color:#ffd6b7}
.dusk-case #research .participant-quote p{color:#292d33;font-size:20px;line-height:1.6;margin:0 0 18px}
.participant-quote footer{border:0;padding:0;margin:0;font-size:13px;line-height:1.6;color:#8993a0}
.participant-quote footer strong{display:block;font-weight:600;color:#626a75}.participant-quote footer span{display:block}
@media(max-width:700px){.participant-quote{padding:24px 20px 24px 52px}.participant-quote .quote-mark{left:14px;font-size:58px}.dusk-case #research .participant-quote p{font-size:17px}}

/* Research: supplied card layout with the website's existing type hierarchy. */
.dusk-case #research{--research-body:16px;--research-caption:12px}
.dusk-case #research>h2{font-size:28px;line-height:1.3;letter-spacing:-.4px;font-weight:600;color:#292735;margin:16px 0 20px;max-width:none}
.dusk-case #research .research-intro{font-size:16px;line-height:1.65;color:#626a75;max-width:none;margin:0}
.dusk-case #research .participant-roles{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:32px 0 14px}
.dusk-case #research .participant-label{font-size:12px;line-height:1.5;font-weight:500;color:#79808c}
.dusk-case #research .participant-pills{display:flex;flex-wrap:wrap;gap:6px}
.dusk-case #research .participant-pills span{font-size:12px;line-height:1.5;color:#414952;background:#eee7f7;padding:4px 10px;border:0;border-radius:20px}
.dusk-case #research .research-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 12px;padding:0;border:0;background:none}
.dusk-case #research .research-stat{min-width:0;padding:18px 20px 22px;border:1px solid #e5e1d9;border-radius:10px;background:#fff;box-shadow:0 2px 3px rgba(39,37,32,.04),0 9px 22px -10px rgba(39,37,32,.16)}
.dusk-case #research .stat-count{display:flex;align-items:baseline;gap:7px;margin:0 0 8px;white-space:nowrap}
.dusk-case #research .stat-count strong{font-size:28px;line-height:1;font-weight:600;letter-spacing:-.6px;color:#292d33}
.dusk-case #research .stat-count strong::before{content:none}
.dusk-case #research .stat-count span{font-size:12px;line-height:1.5;color:#79808c}
.dusk-case #research .research-stat h3{font-size:15px;line-height:1.4;font-weight:600;color:#292d33;margin:0 0 6px}
.dusk-case #research .research-stat p{font-size:14px;line-height:1.6;font-weight:400;color:#626a75;margin:0;max-width:none}
.dusk-case #research .research-observation{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;margin:0;padding:0;border:0}
.dusk-case #research .research-interpretation{grid-column:1;grid-row:2;padding:0;border:0}
.dusk-case #research .research-interpretation h3{font-size:16px;line-height:1.4;font-weight:600;letter-spacing:0;text-transform:none;color:#292735;margin:0 0 10px}
.dusk-case #research .research-interpretation p{font-size:16px;line-height:1.7;color:#626a75;max-width:none;margin:0}
.dusk-case #research .participant-quote{position:relative;display:flex;flex-direction:column;gap:16px;grid-column:1;grid-row:1;width:auto;min-width:0;box-sizing:border-box;background:#eee7f7;border:0;border-radius:12px;padding:22px 24px;margin:0}

.dusk-case #research .participant-quote::after{content:none}
.dusk-case #research .participant-quote p{font-size:16px;line-height:1.65;font-weight:400;color:#292735;max-width:none;margin:0}
.dusk-case #research .participant-quote footer{display:flex;flex-direction:row;justify-content:flex-end;align-items:baseline;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0;font-size:12px;line-height:1.6;text-align:right;color:#79808c}
.dusk-case #research .participant-quote footer strong{font-weight:500;color:#626a75}
.dusk-case #research .research-context{display:block;margin-top:26px;padding:0;background:none;border:0}
.dusk-case #research .research-method{font-size:12px;line-height:1.6;color:#79808c;margin:0 0 44px;max-width:none}
.dusk-case #research .research-source-link{margin-left:10px;font:inherit;color:#60758c;text-decoration:underline;text-underline-offset:3px}
@media(max-width:850px){.dusk-case #research .research-stats{gap:14px}.dusk-case #research .research-stat{padding:20px 18px 24px}.dusk-case #research .research-observation{grid-template-columns:1fr;gap:20px}.dusk-case #research .research-interpretation{grid-column:1;grid-row:2;padding-top:0}.dusk-case #research .participant-quote{grid-column:1;grid-row:1}}
@media(max-width:600px){.dusk-case #research .research-stats{grid-template-columns:1fr}.dusk-case #research .participant-roles{gap:10px}.dusk-case #research .research-stat{padding:22px 22px 26px}.dusk-case #research .participant-quote{padding:20px}}

/* Text-only explanation of the work-log categories. */
.dusk-case #overview .log-structure-group{border:0;padding-left:0;margin-top:40px;max-width:none}
.dusk-case #overview .log-structure-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px;border:0;padding:0}
.dusk-case #overview .log-structure-notes h4{font-size:15px;line-height:1.4;font-weight:600;color:#292d33;margin:0 0 6px}
.dusk-case #overview .log-structure-notes p{font-size:14px;line-height:1.6;color:#626a75;margin:0;max-width:none}
@media(min-width:701px) and (max-width:1000px){.dusk-case #overview .log-structure-notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.dusk-case #overview .log-structure-notes{grid-template-columns:1fr;gap:22px}}

/* Labels and descriptions share a row, using the full content width. */
.dusk-case #overview .log-structure-notes>div{position:relative;display:flex;flex-direction:column;gap:10px;padding:42px 22px 24px;background:#fffefa;border:1px solid #e5e1d9;border-radius:10px;box-shadow:0 2px 3px rgba(39,37,32,.04),0 9px 22px -10px rgba(39,37,32,.20)}
/* Lucide paperclips: varied placement with subtle paper movement. */
.dusk-case #overview .log-paper-pin{position:absolute;top:9px;width:12px;height:12px;border-radius:50%;background:#edc3a2;border:1px solid #d2a280;box-shadow:1px 2px 2px rgba(78,53,34,.16);pointer-events:none}
.dusk-case #overview .log-structure-notes{padding-top:12px;gap:24px}
.dusk-case #overview .log-structure-notes>div:nth-child(1){transform:rotate(-.6deg)}
.dusk-case #overview .log-structure-notes>div:nth-child(2){transform:translateY(6px) rotate(.45deg)}
.dusk-case #overview .log-structure-notes>div:nth-child(3){transform:rotate(-.3deg)}
.dusk-case #overview .log-structure-notes>div:nth-child(1) .log-paper-pin{left:22px}
.dusk-case #overview .log-structure-notes>div:nth-child(2) .log-paper-pin{left:55%}
.dusk-case #overview .log-structure-notes>div:nth-child(3) .log-paper-pin{right:23px}
@media(max-width:1000px){.dusk-case #overview .log-structure-notes>div:nth-child(n){transform:none}}
.dusk-case #overview .notion-annotated-image{position:relative}
.dusk-case #overview .notion-image-canvas{position:relative;width:100%}
.dusk-case #overview .notion-week-cleanup{position:absolute;left:36.884%;top:30.498%;width:.731%;height:2.65%;background:#fff;pointer-events:none}
@media(max-width:700px){.dusk-case #overview .notion-image-canvas{width:1100px}}
@media(max-width:700px){.dusk-case #overview .log-structure-notes>div{padding:42px 22px 24px}}
.dusk-case #overview .log-structure-notes h4{display:flex;align-items:center;gap:10px;margin:0}
.dusk-case #overview .log-structure-group>p{max-width:none}


.dusk-case #overview .log-structure-group>.overview-subhead{margin-bottom:16px}
@media(max-width:700px){.dusk-case #overview .log-structure-group>.overview-subhead{font-size:21px}}

/* Design reasoning and a reserved illustration area for each decision. */
 .dusk-case .design-decisions{display:grid;gap:64px;margin-top:32px}
.dusk-case .design-decision{display:grid;grid-template-columns:minmax(0,28fr) minmax(0,72fr);gap:36px;align-items:start;border:0;padding:0;margin:0}
.dusk-case .design-decision>h3{display:block;font-size:20px;line-height:1.4;letter-spacing:-.25px;margin:0;font-weight:600;color:#292735}
.dusk-case .decision-number{display:block;font-size:14px;line-height:1.4;letter-spacing:0;font-weight:500;color:#8174da;margin:0 0 12px}
.dusk-case .decision-body{display:grid;grid-template-columns:1fr;gap:26px;min-width:0}
.dusk-case .decision-copy{display:grid;gap:24px}
.dusk-case .decision-copy h4{font-size:11px;line-height:1.5;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:#79808c;margin:0 0 8px}
.dusk-case .decision-copy p{font-size:16px;line-height:1.65;color:#626a75;max-width:none;margin:0}
.dusk-case .decision-outcome{border:0;padding:0}
.dusk-case .decision-outcome h4{color:#8174da}
.dusk-case .decision-outcome p{color:#292735}
.dusk-case .decision-figure{margin:0;min-width:0}
.dusk-case .decision-image-slot{width:100%;height:280px;box-sizing:border-box;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;border:1px solid #e3deed;border-radius:10px;background:#f6f3fb;color:#79808c}
.dusk-case .decision-image-slot>span{font-size:14px;line-height:1.5;font-weight:500;color:#626a75}
.dusk-case .decision-image-slot p{font-size:13px;line-height:1.6;max-width:none;margin:8px 0 0;color:#79808c}

@media(max-width:850px){.dusk-case .design-decision{grid-template-columns:1fr;gap:20px}.dusk-case .design-decisions{gap:48px}.dusk-case .decision-copy{gap:20px}}


/* Numbered Capture walkthrough, with a stable explanation column. */
.dusk-case #product .capture-instruction{font-size:13px;color:#8993a0;margin:0 0 18px}
.capture-walkthrough{display:grid;grid-template-columns:minmax(0,3.5fr) minmax(0,1fr);gap:24px;align-items:center}
.capture-screen{position:relative;min-width:0}
.capture-screen>img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 16px rgba(76,58,109,.10))}
.capture-hotspot{position:absolute;left:var(--spot-x);top:var(--spot-y);transform:translate(-50%,-50%);width:28px;height:28px;border:1.5px solid #8270dc;border-radius:50%;background:#fff;color:#8270dc;font:600 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s;z-index:2}
.capture-hotspot:hover,.capture-hotspot[aria-pressed="true"]{background:#8270dc;color:#fff}
.capture-hotspot:focus-visible{outline:3px solid #ffd6b7;outline-offset:4px}
.capture-explanation{min-width:0;min-height:180px}
.capture-step{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;animation:capture-reveal .2s ease-out}
.capture-step[hidden]{display:none}
.capture-step-number{width:24px;height:24px;display:grid;place-items:center;background:#8270dc;color:white;border-radius:7px;font-size:13px;font-weight:600}
.dusk-case #product .capture-step h3{font-size:18px;line-height:1.4;margin:0 0 8px;font-weight:600}
.dusk-case #product .capture-step p{font-size:14px;line-height:1.6;margin:0;color:#626a75;max-width:none}
@keyframes capture-reveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:850px){.capture-walkthrough{grid-template-columns:1fr;gap:8px}.capture-explanation{min-height:150px}.capture-hotspot{width:28px;height:28px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.capture-step{animation:none}.capture-hotspot{transition:none}}

.capture-hotspot::after{content:"";position:absolute;inset:-8px;border-radius:50%}

/* Current step and a fading glimpse of the next step. */
.capture-explanation{min-height:290px;display:flex;flex-direction:column;justify-content:center;gap:30px}
.capture-step{animation:none}
.capture-step.is-preview{opacity:.28;max-height:100px;overflow:hidden;pointer-events:none;mask-image:linear-gradient(to bottom,#000 0%,#000 15%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 15%,transparent 100%)}
.capture-hotspot[aria-pressed="true"]{box-shadow:none}
@media(max-width:850px){.capture-explanation{min-height:260px}}

.capture-explanation{display:grid;grid-template-rows:80px 180px 80px;gap:16px;align-content:center}
.capture-step.is-current{grid-row:2;align-self:center}
.capture-step.is-previous{grid-row:1;align-self:end;mask-image:linear-gradient(to bottom,transparent 0%,#000 85%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 85%,#000 100%)}
.capture-step.is-next{grid-row:3;align-self:start}
.capture-step.is-preview{max-height:80px}

.capture-screen{margin-bottom:32px}
.dusk-case #product .capture-screen .capture-instruction{position:absolute;top:100%;left:0;margin:12px 0 0;font-size:13px;line-height:1.5}

.interaction-cursor.is-step-click .cursor-symbol{background:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202v4m0%2012v4M2%2012h4m12%200h4M5%205l3%203m8%208l3%203M5%2019l3-3m8-8l3-3%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") ;}

.capture-hotspot,.capture-hotspot[aria-pressed="true"]{box-shadow:0 6px 18px rgba(111,82,182,.20)}

.review-detail-layout{display:grid;grid-template-columns:55fr 45fr;gap:24px;align-items:start;margin-top:64px}.review-detail-layout>img{display:block;width:100%;height:auto;box-sizing:border-box;border:2px solid #fff;border-radius:20px;background:#fff;filter:drop-shadow(0 12px 16px rgba(76,58,109,.10))}.review-detail-space{min-height:240px}@media(max-width:850px){.review-detail-layout{grid-template-columns:1fr}.review-detail-space{display:none}}

.review-flow{padding-top:8px}.review-flow-step{border-bottom:1px solid #ebe8f1;padding:15px 0}.review-flow-toggle{display:flex;align-items:center;gap:12px;width:100%;padding:0;border:0;background:none;color:#777384;text-align:left;font-family:inherit;font-size:19px;font-weight:600;line-height:1.35;cursor:pointer}.review-flow-toggle span{display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:7px;background:#eee9fa;color:#8069df;font-size:14px}.review-flow-toggle[aria-expanded="true"]{color:#292735}.review-flow-toggle[aria-expanded="true"] span{background:#8069df;color:white}.review-flow-panel p{font-size:15px;line-height:1.55;color:#757180;margin:13px 0 17px}.review-flow-panel img{display:block;width:100%;height:auto;margin:0 0 12px;filter:drop-shadow(0 5px 10px rgba(76,58,109,.06))}.review-flow-panel[hidden]{display:none}.review-flow-toggle:focus-visible{outline:2px solid #8069df;outline-offset:5px}

.review-flow{box-sizing:border-box;height:var(--review-height);overflow-y:auto;padding:0 14px 0 0;scrollbar-width:thin;scrollbar-color:#c9bee7 transparent}.review-flow-toggle{margin:0;color:#292735;cursor:default}.review-flow-toggle span{background:#8069df;color:white}.review-scroll-hint{font-size:13px;color:#8b8498;margin:0 0 9px}.review-flow-step:first-of-type{padding-top:8px}@media(max-width:850px){.review-flow{height:auto;overflow:visible;padding-right:0}.review-scroll-hint{display:none}}

.review-flow-shell{position:relative;min-width:0}.review-flow{scrollbar-color:#bdbdbd transparent;padding-right:12px}.review-flow::-webkit-scrollbar{width:5px}.review-flow::-webkit-scrollbar-thumb{background:#bdbdbd;border-radius:4px}.review-flow::-webkit-scrollbar-track{background:transparent}.review-example{padding:12px;background:#f5f5f7;border:1px solid #ececef;border-radius:10px;margin:0 0 14px}.review-example img{margin:0;filter:none}.review-example img+img{margin-top:9px}.review-flow-step{padding:22px 0}.review-flow-panel p{margin:12px 0 17px}.review-flow-shell::after{content:"";position:absolute;left:0;right:12px;bottom:0;height:120px;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.85) 85%,#fff);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);mask-image:linear-gradient(transparent,#000);opacity:0;transition:opacity .15s}.review-flow-shell.has-more::after{opacity:1}@media(max-width:850px){.review-flow-shell::after{display:none}}

.capture-step.is-preview{cursor:pointer;pointer-events:auto}.capture-step[role="button"]:focus-visible{outline:2px solid #8069df;outline-offset:4px}




/* Original vector paths, with CSS-controlled active state and no SVG blur filter. */
.capture-walkthrough .capture-hotspot{box-sizing:border-box;width:clamp(28px,3.486%,40px);height:auto;aspect-ratio:1;min-width:0;min-height:0;padding:0;margin:0;border:0;border-radius:50%;background:transparent;box-shadow:none;display:block;overflow:visible;line-height:1;appearance:none;-webkit-appearance:none}
.capture-walkthrough .capture-hotspot[data-step="3"],.capture-walkthrough .capture-hotspot[data-step="4"]{width:clamp(28px,3.486%,40px)}
.capture-walkthrough .capture-hotspot svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none;shape-rendering:auto}
.capture-walkthrough .capture-hotspot .step-disc{fill:#fff;stroke:#7c69d5}
.capture-walkthrough .capture-hotspot .step-digit{fill:#7c69d5}
.capture-walkthrough .capture-hotspot:hover,.capture-walkthrough .capture-hotspot[aria-pressed="true"]{border:0;background:transparent;box-shadow:none}
.capture-walkthrough .capture-hotspot:hover .step-disc{fill:#eee9fa}
.capture-walkthrough .capture-hotspot[aria-pressed="true"] .step-disc{fill:#7c69d5;stroke:#7c69d5}
.capture-walkthrough .capture-hotspot[aria-pressed="true"] .step-digit{fill:#fff}
.capture-walkthrough .capture-hotspot:focus-visible{outline:2px solid #7c69d5;outline-offset:4px}


/* Let walkthrough copy fit without overlapping the neighbouring previews. */
.capture-explanation{grid-template-rows:80px auto 80px}
.capture-step.is-current{min-height:180px}
.dusk-case #product .capture-intro{margin:0 0 28px;max-width:760px}

/* Give the explanation room; neighbouring steps act only as quiet navigation. */
.capture-walkthrough{grid-template-columns:minmax(0,3fr) minmax(280px,1fr);gap:32px}
.capture-explanation{grid-template-rows:64px auto 64px;gap:40px}
.capture-step.is-current{min-height:0}
.capture-step.is-preview{max-height:64px;opacity:.2}
.capture-step.is-preview p{display:none}
.capture-step.is-previous{mask-image:linear-gradient(to bottom,transparent,#000);-webkit-mask-image:linear-gradient(to bottom,transparent,#000)}
.capture-step.is-next{mask-image:linear-gradient(to bottom,#000,transparent);-webkit-mask-image:linear-gradient(to bottom,#000,transparent)}
.capture-walkthrough .capture-hotspot,
.capture-walkthrough .capture-hotspot[data-step="3"],
.capture-walkthrough .capture-hotspot[data-step="4"]{width:3.486%}
.capture-walkthrough .capture-hotspot svg{filter:drop-shadow(5px 5px 10px rgba(132,73,140,.23))}
@media(max-width:850px){.capture-walkthrough{grid-template-columns:1fr;gap:24px}.capture-explanation{gap:28px}}

/* Dusk editorial rhythm: related text stays together; evidence keeps its width. */
.dusk-case .case article>section{padding:32px 0 44px;border-bottom:0}
.dusk-case .case article>section>.eyebrow{font-size:11px;line-height:1.4;letter-spacing:1.5px;margin:0 0 12px}
.dusk-case .case article>section>h2,
.dusk-case #overview h2{font-size:28px;line-height:1.25;font-weight:600;letter-spacing:-.65px;margin:0 0 16px;max-width:none}
.dusk-case .case article>section>p,
.dusk-case #overview>p,
.dusk-case #overview .overview-group>p{font-size:16px;line-height:1.6;max-width:none;margin:0 0 16px}
.dusk-case #overview>.overview-subhead,
.dusk-case #overview .overview-group>.overview-subhead{font-size:20px;line-height:1.35;font-weight:600;letter-spacing:-.25px;margin:28px 0 10px;max-width:none}
.dusk-case #overview .overview-group,
.dusk-case #overview .log-structure-group,
.dusk-case #overview .dusk-transition-group{margin-top:28px}
.dusk-case #overview .overview-group>.overview-subhead{margin-top:0}
.dusk-case #overview .notion-evidence{margin:20px 0 28px}
.dusk-case #overview .log-structure-notes{margin-top:14px}
.dusk-case .case #research>.research-intro{margin:0 0 16px;max-width:none}
.dusk-case .case #journey>.journey-intro{max-width:none;margin:0 0 20px}
.dusk-case .case #product>.capture-intro{font-size:16px;line-height:1.6;max-width:none;margin:0 0 28px}
.dusk-case #product .capture-step h3{font-size:17px;line-height:1.35;margin:0 0 10px}
.dusk-case #product .capture-step p{font-size:14px;line-height:1.6}
.dusk-case #testing .decision-list{margin-top:24px}
.dusk-case #testing .decision-list h3{font-size:18px;line-height:1.4;margin:0 0 8px}
.dusk-case #testing .decision-list p{font-size:16px;line-height:1.6;margin:0;max-width:none}
@media(max-width:700px){
 .dusk-case .case article>section{padding:28px 0 36px}
 .dusk-case .case article>section>h2,.dusk-case #overview h2{font-size:25px;margin-bottom:14px}
 .dusk-case #overview>.overview-subhead,.dusk-case #overview .overview-group>.overview-subhead{font-size:19px}
}

/* Narrow white surround outside the supplied review-list artwork. */
.dusk-case .review-detail-layout>img{padding:6px;border:1px solid #eeeaf3;border-radius:14px;background:#fff;box-sizing:border-box}

/* One soft shadow on the white surround, without the earlier filter stacking. */
.dusk-case .review-detail-layout>img{filter:none;box-shadow:0 4px 10px rgba(48,37,68,.04),0 14px 32px rgba(48,37,68,.08)}

/* Artwork edge, a very narrow white surround, then a soft external shadow. */
.dusk-case .review-detail-layout>img{padding:0;border:1px solid #dcdde2;border-radius:10px;background:#fff;filter:none;box-shadow:0 0 0 2px #fff,0 5px 12px 2px rgba(38,35,48,.04),0 16px 32px 2px rgba(38,35,48,.07)}

/* Page-driven review story: no nested scrollbar, frames, or wheel interception. */
.dusk-case .review-detail-layout>img{padding:0;border:0;border-radius:0;background:transparent;box-shadow:0 10px 28px rgba(38,35,48,.10);filter:none}
.review-scroll-story{position:relative;margin-top:48px;height:calc((var(--review-count) * 70vh) + 100vh - 150px)}
.review-scroll-story .review-detail-layout{position:sticky;top:100px;height:calc(100vh - 150px);min-height:420px;margin-top:0;align-items:center;gap:36px}
.review-scroll-story .review-detail-layout>img{width:100%;max-height:100%;object-fit:contain}
.review-scroll-story .review-flow{position:relative;height:100%;overflow:visible;padding:0;scrollbar-width:none}
.review-scroll-story .review-scroll-hint{position:absolute;top:12px;left:0;margin:0;font-size:12px;color:#92909a}
.review-scroll-story .review-flow-step{position:absolute;left:0;right:0;top:50%;padding:0;border:0;margin:0;opacity:0;visibility:hidden;transform:translateY(20px) scale(.96);transition:opacity .28s ease,transform .35s ease,visibility .28s;pointer-events:none}
.review-scroll-story .review-flow-step.is-active{opacity:1;visibility:visible;transform:translateY(-50%) scale(1);pointer-events:auto}
.dusk-case .review-scroll-story .review-flow-toggle{font-size:17px;line-height:1.4;gap:10px;color:#292735;letter-spacing:-.1px}
.dusk-case .review-scroll-story .review-flow-toggle>span{flex:0 0 24px;height:24px;border-radius:6px;background:#8069df;color:#fff;font-size:12px;font-weight:600}
.review-scroll-story .review-flow-panel p{font-size:14px;line-height:1.6;margin:12px 0 18px}
.review-scroll-story .review-flow-panel img{display:block;width:100%;height:auto;max-height:25vh;object-fit:contain;margin:0 0 10px;filter:none}
.review-scroll-story .review-example{padding:0;border:0;background:transparent}
@media(max-width:850px){
 .review-scroll-story{height:auto;margin-top:32px}
 .review-scroll-story .review-detail-layout{position:static;height:auto;min-height:0;gap:28px}
 .review-scroll-story .review-flow{height:auto;overflow:visible}
 .review-scroll-story .review-scroll-hint{display:none}
 .review-scroll-story .review-flow-step{position:static;opacity:1;visibility:visible;transform:none;margin:0 0 28px;pointer-events:auto}
 .review-scroll-story .review-flow-step.is-active{transform:none}
 .review-scroll-story .review-flow-panel img{max-height:none}
}
@media(prefers-reduced-motion:reduce){.review-scroll-story .review-flow-step{transition:none}}

/* Shorter scroll intervals and explicit, revisitable step progress. */
.review-scroll-story{height:calc((var(--review-count) * max(180px,32vh)) + 100vh - 150px)}
.review-progress{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:8px}
.review-progress button{flex:1;border:0;border-top:3px solid #e9e4f3;border-radius:0;background:transparent;padding:9px 0 0;color:#aaa2b8;font:500 12px/1.2 inherit;cursor:pointer;transition:color .2s,border-color .2s}
.review-progress button.is-complete{border-color:#c6b9eb;color:#8974b8}
.review-progress button.is-current{border-color:#8069df;color:#674dc6}
.review-progress button:focus-visible{outline:2px solid #8069df;outline-offset:4px}
.review-scroll-story .review-flow-step{transition:opacity .2s ease,transform .25s ease,visibility .2s}
@media(max-width:850px){.review-scroll-story{height:auto}.review-progress{display:none}}
@media(prefers-reduced-motion:reduce){.review-scroll-story .review-flow-step{transition:none}}

/* Quiet progress close to the content, without a separate navigation strip. */
.review-progress{display:none}
.dusk-case .review-scroll-story .review-scroll-hint{top:0;bottom:auto;font-size:11px;letter-spacing:1px;color:#a29ba9}
.review-scroll-story .review-flow-step{transform:translateY(calc(-50% + 14px)) scale(.985);transition:opacity .22s ease,transform .3s ease,visibility .22s}
.review-scroll-story .review-flow-step.is-active{transform:translateY(-50%) scale(1)}
@media(max-width:850px){.review-scroll-story .review-flow-step,.review-scroll-story .review-flow-step.is-active{transform:none}}
@media(prefers-reduced-motion:reduce){.review-scroll-story .review-flow-step{transition:none}}

/* Restore the rounded silhouette without a frame or extra white padding. */
.dusk-case .review-detail-layout>img{border-radius:16px}

/* Walkthrough hierarchy: workflow demonstrations, then supporting feedback. */
.dusk-case #product>.walkthrough-subheading{font-size:20px;line-height:1.35;font-weight:600;margin:24px 0 12px}
.dusk-case #product>.review-subheading{margin-top:40px;margin-bottom:0}
.dusk-case #product .walkthrough-detail-label{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:#8b8298;margin:0 0 8px}
.dusk-case #product .mascot-motion-section>h3{font-size:20px;line-height:1.35;font-weight:600;margin:0 0 12px}
.dusk-case #product .mascot-motion-section>p{font-size:16px;line-height:1.6;max-width:none;margin:0 0 22px}

/* Three visible peer subsections under Product walkthrough, without duplicate headings. */
.dusk-case #product .walkthrough-part-title,
.dusk-case #product>.walkthrough-part-title{display:flex;gap:14px;align-items:baseline;font-size:24px;line-height:1.3;letter-spacing:-.4px;font-weight:600;margin:0 0 16px;max-width:none}
.dusk-case #product .walkthrough-part-title>span{font-size:12px;font-weight:500;letter-spacing:1px;color:#9b8db2;flex:none}
.dusk-case #product>.eyebrow{margin-bottom:20px}
.review-scroll-story .review-detail-layout{grid-template-rows:auto minmax(0,1fr);row-gap:20px;align-items:center}
.review-scroll-story .review-detail-layout>.review-subheading{grid-column:1/-1;grid-row:1;margin:0!important;align-self:start}
.review-scroll-story .review-detail-layout>img{grid-column:1;grid-row:2;max-height:100%;min-height:0;width:100%;height:100%;object-fit:contain}
.review-scroll-story .review-flow{grid-column:2;grid-row:2;min-height:0}
.dusk-case #product .mascot-motion-section{margin-top:48px!important;padding-top:28px;border-top:0}
@media(max-width:850px){
 .dusk-case #product .walkthrough-part-title,.dusk-case #product>.walkthrough-part-title{font-size:22px}
 .review-scroll-story .review-detail-layout{grid-template-rows:auto auto auto}
 .review-scroll-story .review-detail-layout>img{grid-column:1;grid-row:2;height:auto}
 .review-scroll-story .review-flow{grid-column:1;grid-row:3}
}

/* Clear chapter > subsection > interactive-step type hierarchy. */
.dusk-case .case #product>.walkthrough-main-title{display:flex;align-items:baseline;gap:14px;font-size:30px;line-height:1.25;font-weight:600;letter-spacing:-.6px;color:#292d33;margin:0 0 28px}
.dusk-case #product>.walkthrough-main-title>span{font-size:14px;font-weight:500;letter-spacing:0;color:inherit}
.dusk-case #product .walkthrough-part-title,.dusk-case #product>.walkthrough-part-title{font-size:20px;line-height:1.35;letter-spacing:-.25px;color:#292d33;margin:0 0 12px;gap:12px}
.dusk-case #product .walkthrough-part-title>span{font-size:14px;font-weight:500;letter-spacing:0;color:inherit}
.review-scroll-story .review-detail-layout>img{width:auto;height:auto;max-width:100%;max-height:calc(100vh - 230px);object-fit:contain;justify-self:center;align-self:center}
.dusk-case #product .mascot-motion-section>.walkthrough-part-title{margin-bottom:14px}
.dusk-case #product .mascot-motion-section>p{margin-bottom:24px}
@media(max-width:850px){.review-scroll-story .review-detail-layout>img{width:100%;height:auto;max-height:none}.dusk-case .case #product>.walkthrough-main-title{font-size:27px}}

/* Small chapter label and larger, consistently styled content headings. */
.dusk-case .case #product>.walkthrough-chapter{font-size:11px;line-height:1.4;letter-spacing:1.7px;color:#60758c;font-weight:400;margin:0 0 20px}
.dusk-case #product .walkthrough-part-title,.dusk-case #product>.walkthrough-part-title{font-size:20px;line-height:1.35;letter-spacing:-.3px;font-weight:600;color:#292735;gap:12px;margin:0 0 16px}
.dusk-case #product .walkthrough-part-title>span{font-size:13px;line-height:1.4;letter-spacing:0;font-weight:500;color:#60758c}
.capture-explanation{cursor:pointer}
.review-scroll-story .review-detail-layout{align-items:start;align-content:start;grid-template-rows:auto minmax(0,1fr);row-gap:20px}
.review-scroll-story .review-detail-layout>img{align-self:start;justify-self:start;width:100%;height:auto;max-width:100%;max-height:calc(100vh - 230px);object-fit:contain;object-position:top left}
.review-scroll-story .review-flow{align-self:stretch}
@media(max-width:850px){
 .dusk-case #product .walkthrough-part-title,.dusk-case #product>.walkthrough-part-title{font-size:20px}
 .review-scroll-story .review-detail-layout{grid-template-rows:auto auto auto}
 .review-scroll-story .review-detail-layout>img{max-height:none}
}

@media(min-width:851px){.review-scroll-story .review-detail-layout>img{width:auto;height:auto;max-width:100%;max-height:calc(100vh - 230px)}}

/* Centre the complete review composition, keeping its heading close to the artwork. */
.dusk-case #product .walkthrough-part-title{align-items:center}
.dusk-case #product .walkthrough-part-title>span{font-size:18px;line-height:1.25;color:#292735;font-weight:500;letter-spacing:0}
@media(min-width:851px){
 .review-scroll-story .review-detail-layout{grid-template-rows:auto auto;align-content:center;align-items:start;row-gap:20px}
 .review-scroll-story .review-detail-layout>img{max-height:calc(100vh - 300px);align-self:start}
 .review-scroll-story .review-flow{height:var(--review-art-height,480px);align-self:start}
}

/* Align the actual text baselines rather than centring unequal line boxes. */
.dusk-case #product .walkthrough-part-title,.dusk-case #product>.walkthrough-part-title{align-items:baseline}
.dusk-case #product .walkthrough-part-title>span{align-self:baseline;line-height:inherit}

/* Dusk project facts belong with the project introduction. */
.dusk-case .dusk-project-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 40px;margin:28px 0 0;padding:0}
.dusk-case .dusk-project-meta>div{min-width:0}
.dusk-case .dusk-project-meta dt{font-size:11px;line-height:1.4;letter-spacing:1.5px;text-transform:uppercase;color:#60758c;margin:0 0 8px}
.dusk-case .dusk-project-meta dd{font-size:14px;line-height:1.6;font-weight:500;color:#292735;margin:0}
.dusk-case .dusk-project-meta dd span{display:inline-block;margin-top:5px;font-size:13px;font-weight:400;color:#626a75}
@media(max-width:850px){.dusk-case .dusk-project-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.dusk-case .dusk-project-meta{grid-template-columns:1fr;gap:20px}}

/* Dusk cover: three lines of project identity beside the product. */
.dusk-case .dusk-cover{position:relative;display:grid;grid-template-columns:35% 65%;min-height:460px;aspect-ratio:2.15;margin-top:24px;overflow:hidden;border-radius:20px;background:linear-gradient(115deg,#eee8f8 0%,#f0e7f3 58%,#fbe9df 100%)}
.dusk-case .dusk-cover-copy{position:relative;z-index:1;align-self:end;padding:48px 20px 54px 44px;min-width:0}
.dusk-case .dusk-cover-copy .eyebrow{font-size:10px;line-height:1.65;letter-spacing:1.5px;color:#626277;margin:0 0 20px;max-width:260px}
.dusk-case .dusk-cover-copy h1{font-size:clamp(54px,6vw,88px);line-height:1;letter-spacing:-3px;font-weight:600;color:#292735;margin:0 0 20px}
.dusk-case .dusk-cover-copy .dusk-lead{font-size:19px;line-height:1.5;color:#535365;margin:0;max-width:290px}
.dusk-case .dusk-cover-art{position:relative;min-width:0;overflow:hidden;margin-top:44px}
.dusk-case .dusk-cover-art img{display:block;width:112%;max-width:none;height:auto;mix-blend-mode:normal;border-radius:16px 0 0 0}
.dusk-case .dusk-project-meta{margin:32px 0 0}
@media(max-width:850px){.dusk-case .dusk-cover{min-height:390px;aspect-ratio:1.8;grid-template-columns:38% 62%}.dusk-case .dusk-cover-copy{padding:32px 18px 36px 28px}.dusk-case .dusk-cover-copy .dusk-lead{font-size:17px}.dusk-case .dusk-cover-copy h1{font-size:58px}.dusk-case .dusk-cover-art{margin-top:36px}.dusk-case .dusk-cover-art img{width:135%}}
@media(max-width:600px){.dusk-case .dusk-cover{display:flex;flex-direction:column;aspect-ratio:auto;min-height:0;border-radius:16px}.dusk-case .dusk-cover-copy{align-self:stretch;padding:32px 26px 26px}.dusk-case .dusk-cover-copy .eyebrow{max-width:none;margin-bottom:16px}.dusk-case .dusk-cover-copy h1{font-size:60px;margin-bottom:14px}.dusk-case .dusk-cover-copy .dusk-lead{max-width:none;font-size:18px}.dusk-case .dusk-cover-art{margin:0 0 0 20px;height:280px}.dusk-case .dusk-cover-art img{width:100%}}

/* Design decisions: open layout with explanation beside the existing artwork. */
.dusk-case .design-decisions{width:100%;max-width:none;margin:36px 0 0;gap:64px}
.dusk-case .design-decision{display:block;box-sizing:border-box;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.dusk-case .design-decision>h3{display:block;font-size:22px;line-height:1.4;margin:0 0 26px;padding:0;border:0}
.dusk-case .design-decision .decision-number{display:block;font-size:14px;margin:0 0 8px}
.dusk-case .decision-body{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:32px;align-items:center}
.dusk-case .decision-copy{display:grid;grid-template-columns:1fr;gap:26px;min-width:0}
.dusk-case .decision-copy h4{font-size:16px;font-weight:600;line-height:1.5;letter-spacing:0;text-transform:none;color:#424752;margin:0 0 10px}
.dusk-case .decision-copy p{font-size:16px;line-height:1.65;margin:0}
.dusk-case .decision-outcome h4{color:#424752}
.dusk-case .decision-product-image img{display:block;width:100%;height:auto;max-width:100%;border-radius:12px;border:0}
@media(max-width:850px){.dusk-case .design-decision{padding:0}.dusk-case .decision-body{grid-template-columns:1fr;gap:26px}.dusk-case .decision-copy{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(max-width:600px){.dusk-case .design-decision{padding:0}.dusk-case .design-decision>h3{font-size:20px}.dusk-case .decision-copy{grid-template-columns:1fr;gap:22px}}

/* Give the recovered column width to the explanatory text. */
.dusk-case .decision-product-image{width:100%;justify-self:stretch}

/* A text-sized purple highlight marks the final decision. */
.dusk-case .decision-copy .decision-outcome h4{color:#424752;justify-self:start;background:#eee7f7;box-shadow:4px 0 #eee7f7,-4px 0 #eee7f7;border-radius:2px;width:fit-content}

/* Keep both explanations on the same body-text level. */
.dusk-case .decision-copy p,.dusk-case .decision-copy .decision-outcome p{color:#626a75}

/* A compact quotation, distinct from the research result cards. */
.dusk-case #research .participant-quote{padding:18px 22px;gap:10px;border-radius:8px;background:#eee7f7}
.dusk-case #research .participant-quote p{font-style:italic;line-height:1.6}
.dusk-case #research .participant-quote footer{font-style:normal;line-height:1.5}
@media(max-width:600px){.dusk-case #research .participant-quote{padding:18px;gap:12px}}

/* Give the survey roles, results and method note distinct breathing room. */
.dusk-case #research .participant-roles{margin-bottom:24px}
.dusk-case #research .research-stats{margin-bottom:12px}

.dusk-case #research .participant-pills span{font-size:13px;padding:5px 12px}

/* More separation between major chapters, without changing their internal spacing. */
.dusk-case .case article>section+section{margin-top:36px}
@media(max-width:700px){.dusk-case .case article>section+section{margin-top:24px}}

/* Group participant background with the introduction, apart from findings. */
.dusk-case #research .participant-roles{margin-top:16px;margin-bottom:36px}

/* Participant roles read as supporting detail directly beneath the study introduction. */
.dusk-case #research .participant-roles{margin-top:8px;column-gap:10px;row-gap:8px}
.dusk-case #research .participant-label{font-weight:400;color:#626a75}

/* Separate the product motivation from the work-log structure cards. */
.dusk-case #overview .dusk-transition-group{margin-top:40px}

/* A modest pause between project facts and the case-study body. */
.dusk-case .case{margin-top:48px}

/* Keep the explanation and its three examples together; do not affect other groups. */
.dusk-case #overview .log-structure-group>p{margin-bottom:0}
.dusk-case #overview .log-structure-group>.log-structure-notes{margin-top:16px;padding-top:0}

/* Report walkthrough: open layout, one full-size interface at a time. */
.dusk-case #product .report-walkthrough{margin-top:48px}
.dusk-case #product .report-walkthrough-intro{font-size:16px;line-height:1.65;color:#626a75;margin:0 0 22px;max-width:none}
.dusk-case .report-view-tabs{display:flex;gap:26px;border-bottom:1px solid #e6e1ed;margin:0 0 20px}
.dusk-case .report-view-tabs button{appearance:none;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;padding:0 0 11px;font:inherit;font-size:15px;font-weight:500;color:#626a75;cursor:pointer;margin-bottom:-1px}
.dusk-case .report-view-tabs button[aria-selected="true"]{color:#5e4fc7;border-bottom-color:#7a66d8}
.dusk-case .report-view-tabs button:focus-visible{outline:2px solid #7a66d8;outline-offset:4px}
.dusk-case .report-view-panel[hidden]{display:none}
.dusk-case #product .report-use-case h4{font-size:16px;line-height:1.5;font-weight:600;color:#292735;margin:0 0 6px}
.dusk-case #product .report-use-case p{font-size:16px;line-height:1.65;color:#626a75;margin:0 0 22px;max-width:none}
.dusk-case .report-view-panel>img{display:block;width:100%;height:auto;max-width:100%;border:0;border-radius:0;box-shadow:none}

/* Keep participant background with the findings; both report views remain visible. */
.dusk-case #research .participant-roles{margin-top:24px;margin-bottom:14px}
.dusk-case .report-view-panel+.report-view-panel{margin-top:36px}
.dusk-case #product .report-use-case p{margin-bottom:26px}

/* Pair report names with their use cases rather than stacking equal text rows. */
.dusk-case #product .report-use-case{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;align-items:baseline;margin:0 0 18px}
.dusk-case #product .report-use-case h4{font-size:18px;margin:0;line-height:1.5}
.dusk-case #product .report-use-case p{margin:0;font-size:15px;line-height:1.6}
.dusk-case .report-view-panel+.report-view-panel{margin-top:44px}
@media(max-width:600px){.dusk-case #product .report-use-case{grid-template-columns:1fr;gap:6px}.dusk-case .report-view-panel+.report-view-panel{margin-top:32px}}

/* Report previews: exposed rear sheet, direct switching, normal page scrolling. */
.dusk-case .report-stack-controls,.dusk-case .report-stack-next,.dusk-case .report-stack-rear-label{display:none}
.dusk-case .report-deck-enabled .report-scroll-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);isolation:isolate;padding:8px 0 48px; margin-top:8px}
.dusk-case .report-deck-enabled .report-view-panel{grid-area:1 / 1;width:82%;min-width:0;margin:0;transform-origin:50% 55%;transition:transform .45s cubic-bezier(.2,.75,.25,1)}
.dusk-case .report-deck-enabled .report-view-panel>img{border-radius:16px;transition:filter .4s ease,box-shadow .4s ease;box-shadow:0 10px 24px rgba(41,34,59,.12)}
.dusk-case .report-deck-enabled .report-is-front{z-index:2;transform:translate(0,0) rotate(0)}
.dusk-case .report-deck-enabled .report-is-back{z-index:1;transform:translate(6%,10px) rotate(1deg);cursor:pointer}
.dusk-case .report-deck-enabled .report-is-back>img{filter:brightness(.91);box-shadow:0 15px 28px rgba(41,34,59,.14)}
.dusk-case .report-deck-enabled .report-is-back .report-use-case{visibility:hidden}
.dusk-case .report-deck-enabled .report-scroll-stage:hover .report-is-back{transform:translate(6.5%,8px) rotate(1.3deg)}
.dusk-case .report-deck-enabled .report-stack-next{display:grid;place-items:center;position:absolute;z-index:4;right:0;top:53%;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:rgba(53,48,65,.48);color:white;cursor:pointer;box-shadow:0 3px 10px rgba(35,30,45,.1);transition:background .2s}
.dusk-case .report-stack-next:hover{background:rgba(53,48,65,.7)}
.dusk-case .report-deck-enabled .report-stack-controls{display:flex;position:absolute;left:0;bottom:0;z-index:4;gap:10px;padding:9px 12px;border-radius:24px;background:#eeecf1}
.dusk-case .report-stack-dot{display:block;width:12px;height:12px;padding:0;border:0;border-radius:50%;background:#cbc6d5;cursor:pointer}
.dusk-case .report-stack-dot[aria-pressed="true"]{background:#7662bc}
.dusk-case .report-deck-enabled .report-stack-rear-label{display:block;position:absolute;right:0;top:4px;z-index:4;background:transparent;border:0;padding:4px 0;font:inherit;font-size:12px;font-weight:500;color:#5e4fc7;cursor:pointer}
.dusk-case .report-stack-next:focus-visible,.dusk-case .report-stack-dot:focus-visible,.dusk-case .report-stack-rear-label:focus-visible{outline:2px solid #7662bc;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.dusk-case .report-deck-enabled .report-view-panel,.dusk-case .report-deck-enabled .report-view-panel>img{transition:none}.dusk-case .report-deck-enabled .report-scroll-stage:hover .report-is-back{transform:translate(6%,10px) rotate(1deg)}}

/* Keep the existing stack animation below the caption text. */
.dusk-case .report-deck-enabled .report-is-front .report-use-case{position:relative;z-index:3;background:#fff}


/* Dusk spacing rhythm. Interactive review sizing and report-deck geometry are excluded. */
.dusk-case{--dusk-chapter-pad:32px;--dusk-chapter-gap:48px;--dusk-block-gap:48px;--dusk-content-gap:24px;--dusk-text-gap:16px}
.dusk-case .case article>section{padding-top:var(--dusk-chapter-pad);padding-bottom:var(--dusk-chapter-pad)}
.dusk-case .case article>section:first-child{padding-top:0}
.dusk-case .case article>section+section{margin-top:var(--dusk-chapter-gap)}
.dusk-case .case article>section>.eyebrow{margin-bottom:12px}
.dusk-case .case article>section>h2{margin-bottom:var(--dusk-content-gap)}
.dusk-case #overview>.overview-subhead{margin-top:var(--dusk-block-gap);margin-bottom:var(--dusk-text-gap)}
.dusk-case #overview .overview-group,.dusk-case #overview .log-structure-group,.dusk-case #overview .dusk-transition-group{margin-top:var(--dusk-block-gap)}
.dusk-case #overview .overview-group>.overview-subhead{margin-top:0;margin-bottom:var(--dusk-text-gap)}
.dusk-case #overview .notion-evidence{margin-top:var(--dusk-text-gap);margin-bottom:0}
.dusk-case #overview .log-structure-group>p{margin-bottom:0}
.dusk-case #overview .log-structure-group>.log-structure-notes{margin-top:var(--dusk-text-gap);padding-top:0}
.dusk-case #research .participant-roles{margin-top:var(--dusk-content-gap);margin-bottom:14px}
.dusk-case #research .research-stats{margin-bottom:12px}
.dusk-case #research .research-method{margin-bottom:var(--dusk-block-gap)}
.dusk-case #research .research-observation{gap:var(--dusk-content-gap)}
.dusk-case #research .research-interpretation h3{margin-bottom:12px}
.dusk-case .design-decisions{margin-top:var(--dusk-content-gap);gap:var(--dusk-block-gap)}
.dusk-case .design-decision>h3{margin-bottom:var(--dusk-content-gap)}
.dusk-case .decision-copy{gap:var(--dusk-content-gap)}
.dusk-case .decision-copy h4{margin-bottom:8px}
.dusk-case #product .report-walkthrough{margin-top:var(--dusk-block-gap)}
.dusk-case #product .mascot-motion-section{margin-top:84px!important;padding-top:0}
.dusk-case #testing .decision-list{margin-top:var(--dusk-content-gap)}
@media(max-width:700px){.dusk-case{--dusk-chapter-pad:24px;--dusk-chapter-gap:24px;--dusk-block-gap:36px;--dusk-content-gap:20px}}

/* Homepage Dusk cover keeps the project's softer corners and lavender hover cue. */
#work .project[href="dusk.html"] .visual.dusk{border-radius:24px}
#work .project[href="dusk.html"]:hover .visual.dusk,
#work .project[href="dusk.html"]:focus-visible .visual.dusk{box-shadow:0 0 0 2px #d6c8eb}


/* Keep homepage Dusk text stable when its project link is hovered. */
#work .project[href="dusk.html"],
#work .project[href="dusk.html"]:hover,
#work .project[href="dusk.html"]:focus-visible{color:#292d33}
#work .project[href="dusk.html"] h3{color:#292d33}
#work .project[href="dusk.html"] .arrow,
#work .project[href="dusk.html"]:hover .arrow{color:#292d33}

/* A small directional cue on the Dusk link, without fading its title. */
#work .project:is([href="dusk.html"],[href="voice.html"]) .dusk-link-arrow{display:inline-block;transition:transform .2s ease}
#work .project:is([href="dusk.html"],[href="voice.html"]):hover .dusk-link-arrow,
#work .project:is([href="dusk.html"],[href="voice.html"]):focus-visible .dusk-link-arrow{transform:translate(3px,-2px)}
@media(prefers-reduced-motion:reduce){#work .project:is([href="dusk.html"],[href="voice.html"]) .dusk-link-arrow{transition:none;transform:none}}

/* Testing: one heading per finding, grouped evidence, vertically centred conclusions. */
.dusk-case #testing .testing-findings{display:grid;gap:0;margin-top:40px}
.dusk-case #testing .testing-finding+.testing-finding{border-top:1px solid #e6e3eb;margin-top:40px;padding-top:40px}
.dusk-case #testing .testing-finding-heading{display:flex;align-items:baseline;gap:14px;margin-bottom:28px}
.dusk-case #testing .testing-number{font-size:14px;line-height:1.4;font-weight:500;color:#626a75;flex-shrink:0}
.dusk-case #testing .testing-finding h3{font-size:22px;line-height:1.4;font-weight:600;margin:0;color:#292735}
.dusk-case #testing .testing-columns{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:center}
.dusk-case #testing .testing-columns h4{font-size:12px;line-height:1.5;letter-spacing:.045em;text-transform:uppercase;color:#626a75;margin:0 0 20px;font-weight:500}
.dusk-case #testing .testing-change{background:none;box-shadow:none}
.dusk-case #testing .testing-next p{font-size:16px;line-height:1.7;color:#626a75;margin:0;max-width:none}
.dusk-case #testing .testing-chart+.testing-chart{margin-top:28px}
.dusk-case #testing .testing-question{font-size:14px;line-height:1.5;font-weight:600;color:#424752;margin:0 0 12px}
.dusk-case #testing .testing-chart dl{margin:0;display:grid;gap:10px}
.dusk-case #testing .testing-chart-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:center}
.dusk-case #testing .testing-chart dt{font-size:14px;line-height:1.5;font-weight:400;color:#626a75}
.dusk-case #testing .testing-chart dd{margin:0;display:flex;align-items:center;gap:8px}
.dusk-case #testing .testing-bar-track{display:flex;align-items:center}
.dusk-case #testing .testing-bar{display:block;height:7px;border-radius:7px;width:100%;background:#d9d2e8;flex-shrink:0}
.dusk-case #testing .testing-bar.is-primary{background:#8174da}
.dusk-case #testing .testing-count{font-size:14px;line-height:1.5;color:#626a75;min-width:16px;font-variant-numeric:tabular-nums}
.dusk-case #testing .testing-method{font-size:12px;color:#79808c;margin:32px 0 24px}
@media(max-width:900px){.dusk-case #testing .testing-columns{gap:32px;grid-template-columns:1fr 1fr}}
@media(max-width:650px){.dusk-case #testing .testing-columns{grid-template-columns:1fr;gap:28px}.dusk-case #testing .testing-findings{margin-top:32px}.dusk-case #testing .testing-finding+.testing-finding{margin-top:32px;padding-top:32px}.dusk-case #testing .testing-finding-heading{gap:12px;margin-bottom:24px}.dusk-case #testing .testing-finding h3{font-size:21px}.dusk-case #testing .testing-chart-row{grid-template-columns:1fr 1fr}}

/* Keep the Testing heading and introduction together. */



/* Give first-time readers context before the evidence and response. */
.dusk-case #testing .testing-finding-heading{margin-bottom:12px}
.dusk-case #testing .testing-context{font-size:16px;line-height:1.6;color:#626a75;margin:0 0 28px;max-width:none}
.dusk-case .case article>section#testing>.testing-scope{font-size:14px;color:#626a75;margin:12px 0 0}
.dusk-case #testing .testing-method a{display:inline-block;margin-left:12px;color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(max-width:650px){.dusk-case #testing .testing-context{margin-bottom:24px}.dusk-case #testing .testing-method a{display:block;margin:8px 0 0}}

/* Group related Testing text tightly; reserve larger pauses for evidence and findings. */
.dusk-case #testing .testing-finding-heading{margin-bottom:8px}
.dusk-case #testing .testing-context{margin-bottom:32px}
.dusk-case #testing .testing-columns h4{margin-bottom:12px}
.dusk-case #testing .testing-chart dl{gap:8px}
.dusk-case #testing .testing-chart+.testing-chart{margin-top:28px}
.dusk-case #testing .testing-finding+.testing-finding{margin-top:40px;padding-top:40px}
@media(max-width:650px){.dusk-case #testing .testing-context{margin-bottom:32px}.dusk-case #testing .testing-finding+.testing-finding{margin-top:40px;padding-top:40px}}

/* Source links use the same short directional movement as the project link. */
.dusk-case #research .research-source-link,.dusk-case #testing .testing-method a{position:relative;text-decoration:none;padding-bottom:3px}
.dusk-case #research .research-source-link::after,.dusk-case #testing .testing-method a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.dusk-case #research .research-source-link:hover::after,.dusk-case #research .research-source-link:focus-visible::after,.dusk-case #testing .testing-method a:hover::after,.dusk-case #testing .testing-method a:focus-visible::after{transform:scaleX(1)}
.dusk-case .survey-link-arrow{display:inline-block;transition:transform .2s ease}
.dusk-case a:hover>.survey-link-arrow,.dusk-case a:focus-visible>.survey-link-arrow{transform:translate(3px,-2px)}
.dusk-case #testing .testing-next p+p{margin-top:16px}
@media(prefers-reduced-motion:reduce){.dusk-case .survey-link-arrow,.dusk-case #research .research-source-link::after,.dusk-case #testing .testing-method a::after{transition:none}.dusk-case a:hover>.survey-link-arrow,.dusk-case a:focus-visible>.survey-link-arrow{transform:none}}

/* Summarise the report-choice results without repeating every distribution. */
.dusk-case #testing .testing-choice-summary{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5;color:#626a75;text-align:left}
.dusk-case #testing .testing-choice-summary thead th{font-size:12px;font-weight:500;color:#626a75;padding:0 0 10px;border-bottom:1px solid #e6e3eb}
.dusk-case #testing .testing-choice-summary tbody th,.dusk-case #testing .testing-choice-summary tbody td{padding:16px 0;border-bottom:1px solid #eeeaf2;font-weight:400;vertical-align:middle}
.dusk-case #testing .testing-choice-summary th:first-child{width:60%;padding-right:16px}
.dusk-case #testing .testing-choice-summary tbody td{white-space:nowrap;color:#424752}
.dusk-case #testing .testing-choice-count{margin-left:12px;color:#7564c7;font-variant-numeric:tabular-nums}
@media(max-width:650px){.dusk-case #testing .testing-choice-summary th:first-child{width:58%;padding-right:12px}.dusk-case #testing .testing-choice-count{margin-left:8px}}

/* Keep source underlines visible; redraw them from the left on interaction. */
.dusk-case #research .research-source-link::after,.dusk-case #testing .testing-method a::after{transform:scaleX(1);transition:none}
.dusk-case #research .research-source-link:hover::after,.dusk-case #research .research-source-link:focus-visible::after,.dusk-case #testing .testing-method a:hover::after,.dusk-case #testing .testing-method a:focus-visible::after{animation:dusk-source-underline .35s ease both}
@keyframes dusk-source-underline{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.dusk-case #research .research-source-link:hover::after,.dusk-case #research .research-source-link:focus-visible::after,.dusk-case #testing .testing-method a:hover::after,.dusk-case #testing .testing-method a:focus-visible::after{animation:none}}

/* A larger opening pause, tighter findings, and a separate personal observation. */
.dusk-case #testing .testing-findings{margin-top:calc(var(--dusk-block-gap) + 16px)}
.dusk-case #testing .testing-finding+.testing-finding{margin-top:24px;padding-top:24px}
.dusk-case #testing .testing-personal-result{margin-top:32px;padding-top:24px;border-top:1px solid #e6e3eb;background:none}
.dusk-case #testing .testing-personal-result h3{font-size:15px;font-weight:600;line-height:1.5;color:#424752;margin:0 0 8px}
.dusk-case #testing .testing-personal-result p{font-size:15px;line-height:1.6;color:#626a75;margin:0;max-width:none}
@media(max-width:650px){.dusk-case #testing .testing-findings{margin-top:calc(var(--dusk-block-gap) + 12px)}.dusk-case #testing .testing-finding+.testing-finding{margin-top:24px;padding-top:24px}}

/* Highlight the personal result in the case study's existing lavender palette. */
.dusk-case #testing .testing-personal-result{margin-top:28px;padding:20px 24px;border:0;border-radius:8px;background:#f4f2f9}
@media(max-width:650px){.dusk-case #testing .testing-personal-result{padding:18px 20px}}

/* Let the full-width finding separator close the table visually. */
.dusk-case #testing .testing-choice-summary tbody tr:last-child th,.dusk-case #testing .testing-choice-summary tbody tr:last-child td{border-bottom:0}
.dusk-case #testing .testing-personal-result h3{font-size:20px;line-height:1.4}

/* Keep the result callout quieter than the numbered findings. */
.dusk-case #testing .testing-personal-result{padding:18px 24px}
.dusk-case #testing .testing-personal-result h3{font-size:16px;font-weight:500;line-height:1.5;margin:0 0 6px}
.dusk-case #testing .testing-personal-result p{font-size:15px;line-height:1.6}
@media(max-width:650px){.dusk-case #testing .testing-personal-result{padding:18px 20px}}

/* Build narrative: overview diagram followed by three implementation topics. */
.dusk-case #build .build-version-note{font-size:13px;line-height:1.6;color:#626a75;margin-top:12px}
.dusk-case #build .build-flow{margin:32px 0 48px}
.dusk-case #build .build-flow img{display:block;width:100%;height:auto}
.dusk-case #build .build-groups{display:grid;gap:36px}
.dusk-case #build .build-group+.build-group{padding-top:32px;border-top:1px solid #e6e3eb}
.dusk-case #build .build-group h3{font-size:22px;line-height:1.4;color:#292735;margin:0 0 12px}
.dusk-case #build .build-group h3>span{font-size:14px;font-weight:500;color:#626a75;margin-right:14px}
.dusk-case #build .build-group p{font-size:16px;line-height:1.65;color:#626a75;max-width:none;margin:0 0 16px}
.dusk-case #build .build-report-types{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:24px 0}
.dusk-case #build .build-report-types h4{font-size:16px;color:#424752;margin:0 0 6px}
.dusk-case #build .build-report-types p{margin:0}
.dusk-case #build details{margin-top:20px;border-top:1px solid #e6e3eb;padding-top:14px}
.dusk-case #build summary{font-size:14px;color:#60758c;cursor:pointer;margin-bottom:12px}
.dusk-case #build pre{background:#292735;color:#eeeaf7;border-radius:8px;padding:20px;font-size:13px;line-height:1.7;overflow:auto;white-space:pre}
.dusk-case #build .build-caption{font-size:13px}
@media(max-width:650px){.dusk-case #build .build-report-types{grid-template-columns:1fr;gap:20px}.dusk-case #build .build-group h3{font-size:21px}.dusk-case #build .build-flow{overflow-x:auto}.dusk-case #build .build-flow img{min-width:800px}}

/* Keep implementation evidence visible and colour its syntax. */
.dusk-case #build .build-code-example{margin-top:24px}
.dusk-case #build .build-example-title{font-size:14px;font-weight:500;line-height:1.5;color:#424752;margin:0 0 12px}
.dusk-case #build pre code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#e6e1f0;background:transparent;padding:0;font-size:inherit}
.dusk-case #build .code-key{color:#c4b5ef}
.dusk-case #build .code-string{color:#9cd9b5}
.dusk-case #build .code-keyword{color:#e9c684}

/* Technical topics pair a short explanation with visible evidence. */
.dusk-case #build>p{max-width:80ch}
.dusk-case #build .build-flow{margin:32px 0 48px}
.dusk-case #build .build-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}
.dusk-case #build .build-groups{gap:48px}
.dusk-case #build .build-group+.build-group{padding-top:0;border:0}
.dusk-case #build .build-group h3{font-size:20px;margin-bottom:16px}
.dusk-case #build .build-copy p,.dusk-case #build .build-context-list{font-size:15px;line-height:1.65}
.dusk-case #build .build-context-list{margin:16px 0 0;color:#626a75}
.dusk-case #build .build-context-list>div+div{margin-top:12px}
.dusk-case #build .build-context-list dt{font-weight:500;color:#424752;margin-bottom:2px}
.dusk-case #build .build-context-list dd{margin:0}
.dusk-case #build .build-evidence{min-width:0}
.dusk-case #build .build-evidence pre{margin:0;padding:22px;font-size:12px}
.dusk-case #build .code-comment{color:#a4a0b1}
.dusk-case #build .build-prompt-table>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;border-top:1px solid #e6e3eb;padding:16px 0}
.dusk-case #build .build-prompt-table h4{font-size:14px;font-weight:500;margin:0;color:#424752}
.dusk-case #build .build-prompt-table p{font-size:14px;line-height:1.65;margin:0}
.dusk-case #build .build-implementation-note{font-size:12px;line-height:1.6;color:#79808c;margin:32px 0 0;max-width:none}
@media(max-width:750px){.dusk-case #build .build-row{grid-template-columns:1fr;gap:20px}.dusk-case #build .build-groups{gap:36px}}

/* Shared row headings establish a clear grid for explanations and evidence. */
.dusk-case #build>p{max-width:none}
.dusk-case #build .build-flow{margin:48px 0 56px}
.dusk-case #build .build-row{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:48px;row-gap:20px;align-items:center}
.dusk-case #build .build-row>h3{grid-column:1 / -1;margin:0}
.dusk-case #build .build-copy>:last-child{margin-bottom:0}
.dusk-case #build .build-groups{gap:48px}
.dusk-case #build .build-prompt-table>div:first-child{border-top:0;padding-top:0}
@media(max-width:750px){.dusk-case #build .build-row{grid-template-columns:minmax(0,1fr);gap:20px}.dusk-case #build .build-flow{margin:36px 0 40px}.dusk-case #build .build-groups{gap:36px}}

/* Pair the Build introduction with its heading, as in Testing. */



/* Shared section-intro rhythm for Testing and Build. */
.dusk-case .case article>section:is(#overview,#research,#testing,#build,#design-system)>h2{margin:0;font-size:28px;line-height:1.25;font-weight:600;letter-spacing:-.65px}
.dusk-case .case article>section:is(#overview,#research,#testing,#build,#design-system)>h2+p{margin:0;font-size:16px;line-height:1.6;max-width:none}
.dusk-case #build .build-flow{margin:32px 0 48px}
@media(max-width:700px){.dusk-case .case article>section:is(#overview,#research,#testing,#build,#design-system)>h2{font-size:25px}.dusk-case #build .build-flow{margin:28px 0 40px}}

/* Reference layout: each title belongs to its explanation, paired with code. */
.dusk-case #build .build-row{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);column-gap:48px;align-items:center}
.dusk-case #build .build-copy h3{font-size:20px;line-height:1.4;margin:0 0 12px}
.dusk-case #build .build-copy p{font-size:15px;line-height:1.65;margin:0}
.dusk-case #build .build-groups{gap:48px}
@media(max-width:750px){.dusk-case #build .build-row{grid-template-columns:minmax(0,1fr);gap:20px}.dusk-case #build .build-groups{gap:36px}}

/* Put the design decisions ahead of the length of the code samples. */
.dusk-case .case article>section#build>.eyebrow{margin-bottom:8px}
.dusk-case #build .build-flow{margin:24px 0 40px}
.dusk-case #build .build-groups{gap:36px}
.dusk-case #build .build-evidence pre{padding:18px 20px;font-size:12px;line-height:1.55}
@media(max-width:750px){.dusk-case #build .build-flow{margin:24px 0 32px}.dusk-case #build .build-groups{gap:32px}}

/* Match the supplied build-section artwork while retaining responsive HTML. */
.dusk-case #build .build-row{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.dusk-case #build .build-copy h3{font-size:20px;line-height:1.4;margin:0 0 12px}
.dusk-case #build .build-copy p{font-size:15px;line-height:1.65;margin:0}
.dusk-case #build .build-flow{margin:32px 0 64px}
.dusk-case #build .build-groups{gap:48px}
.dusk-case #build .build-evidence pre{font-size:12px;line-height:1.65;padding:20px 22px}
@media(max-width:750px){.dusk-case #build .build-row{grid-template-columns:minmax(0,1fr);gap:20px}.dusk-case #build .build-flow{margin:24px 0 40px}.dusk-case #build .build-groups{gap:36px}}

.dusk-case #overview .log-structure-group>p.log-dataset-link{margin:16px 0 0;font-size:13px;font-weight:400;line-height:1.5;color:#858b96;max-width:none}



/* Design system: open specification rows using the same chapter rhythm. */
.dusk-case #design-system .ds-specification{margin-top:32px}
.dusk-case #design-system .ds-spec-row{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:32px;padding:16px 0;border-top:1px solid #e6e3eb;align-items:start}
.dusk-case #design-system .ds-row-intro h3{font-size:16px;font-weight:600;line-height:1.5;color:#292735;margin:0 0 8px}
.dusk-case #design-system .ds-row-intro p{font-size:13px;line-height:1.6;color:#626a75;margin:0;max-width:26ch}
.dusk-case #design-system .ds-swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.dusk-case #design-system .ds-swatch{min-width:0}
.dusk-case #design-system .ds-colour{display:block;height:64px;border-radius:8px;background:var(--swatch);border:1px solid rgba(36,35,52,.08);margin-bottom:10px}
.dusk-case #design-system .ds-colour-name{display:block;font-size:12px;line-height:1.5;color:#424752;margin-bottom:3px}
.dusk-case #design-system .ds-swatch code{display:block;padding:0;background:none;font-size:10px;line-height:1.5;color:#79808c;white-space:normal;overflow-wrap:anywhere}
.dusk-case #design-system .ds-type-row{display:grid;grid-template-columns:minmax(0,1fr) 76px 106px;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid #f0edf4}
.dusk-case #design-system .ds-type-row:first-child{padding-top:0}
.dusk-case #design-system .ds-type-row:last-child{border-bottom:0}
.dusk-case #design-system .ds-type-sample{font-size:var(--type-size);font-weight:var(--type-weight);line-height:1.4;color:#242334;overflow-wrap:anywhere}
.dusk-case #design-system .ds-mono,.dusk-case #design-system .ds-type-meta{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.dusk-case #design-system .ds-type-meta{font-size:10px;color:#79808c}
.dusk-case #design-system .ds-type-role{font-size:11px;line-height:1.5;color:#626a75}
@media(max-width:900px){.dusk-case #design-system .ds-spec-row{grid-template-columns:1fr;gap:20px}.dusk-case #design-system .ds-row-intro p{max-width:none}}
@media(max-width:550px){.dusk-case #design-system .ds-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.dusk-case #design-system .ds-type-row{grid-template-columns:minmax(0,1fr) 60px}.dusk-case #design-system .ds-type-role{grid-column:1/-1}.dusk-case #design-system .ds-type-sample{font-size:min(var(--type-size),26px)}}

/* Give the final major chapter a larger pause than groups within Build. */
.dusk-case{--dusk-final-chapter-gap:80px}
.dusk-case .case article>section#build+section#design-system{margin-top:var(--dusk-final-chapter-gap)}
@media(max-width:700px){.dusk-case{--dusk-final-chapter-gap:48px}}

/* One shared scroll cue below the next-step preview, absent on the final step. */
.dusk-case .capture-explanation{position:relative}
.dusk-case .capture-explanation>.capture-scroll-hint{display:none;position:absolute;top:calc(100% + 12px);left:34px;align-items:center;gap:8px;font-size:12px;line-height:1.5;color:#8174da;font-weight:400;pointer-events:none}
.dusk-case .capture-explanation:has(.capture-step.is-next:not([hidden]))>.capture-scroll-hint{display:inline-flex}
.dusk-case .capture-scroll-hint>span{font-size:19px;line-height:1}
@media(max-width:850px){.dusk-case .capture-explanation>.capture-scroll-hint{display:none!important}}

/* Compact palette tiles: labels sit inside a translucent footer. */
.dusk-case #design-system .ds-swatches{gap:12px}
.dusk-case #design-system .ds-swatch{position:relative;min-height:88px;border-radius:9px;overflow:hidden;border:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0}
.dusk-case #design-system .ds-colour{position:absolute;inset:0;height:auto;margin:0;border:0;border-radius:0;z-index:0}
.dusk-case #design-system .ds-colour-name,.dusk-case #design-system .ds-swatch code{position:relative;z-index:1;background:rgba(255,255,255,.88);color:#424752;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);margin:0;padding-left:10px;padding-right:10px}
.dusk-case #design-system .ds-colour-name{font-size:12px;line-height:1.4;padding-top:7px;padding-bottom:2px}
.dusk-case #design-system .ds-swatch code{font-size:10px;line-height:1.4;padding-bottom:7px;color:#626a75}
@media(max-width:550px){.dusk-case #design-system .ds-swatch{min-height:84px}}

/* A single overlay prevents blurred colour fringes at the tile corners. */
.dusk-case #design-system .ds-swatch{isolation:isolate}
.dusk-case #design-system .ds-swatch-label{position:relative;z-index:1;background:rgba(255,255,255,.9);border-radius:0 0 8px 8px;overflow:hidden}
.dusk-case #design-system .ds-colour-name,.dusk-case #design-system .ds-swatch code{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}

/* Colour belongs only to the upper strip; the footer has an opaque tint. */
.dusk-case #design-system .ds-swatch{background:var(--swatch-tint);box-shadow:none}
.dusk-case #design-system .ds-colour{inset:0 0 auto;height:44px}
.dusk-case #design-system .ds-swatch-label{background:var(--swatch-tint);border-radius:0;overflow:visible}

.dusk-case #design-system .ds-colour-white{box-shadow:none}
.dusk-case #design-system .ds-swatch:has(.ds-colour-white)::after{content:"";position:absolute;inset:0;border:1px solid #e6e3eb;border-radius:inherit;pointer-events:none;z-index:2}

/* Delineate the white sample from its label without changing the other tiles. */
.dusk-case #design-system .ds-swatch:has(.ds-colour-white) .ds-swatch-label{border-top:1px solid #e6e3eb}

/* Keep report previews readable on narrow screens. */
@media(max-width:600px){.dusk-case .report-deck-enabled .report-view-panel{width:88%}}

/* Keep report copy and controls grouped with the preview. */
.dusk-case #product .report-deck-enabled .report-use-case{grid-template-columns:1fr;gap:4px;margin-bottom:18px}
.dusk-case .report-deck-enabled .report-stack-rear-label{right:18%;top:4px}
.dusk-case .report-deck-enabled .report-stack-next{right:4%}
@media(max-width:600px){.dusk-case .report-deck-enabled .report-stack-next{right:0}.dusk-case .report-deck-enabled .report-stack-rear-label{right:0}}

/* Group the alternate report label with its navigation arrow. */
.dusk-case .report-deck-enabled .report-stack-rear-label{right:4%;top:53%;transform:translateY(calc(-100% - 12px));white-space:nowrap}
@media(max-width:600px){.dusk-case .report-deck-enabled .report-stack-rear-label{right:0}}

.dusk-case .report-deck-enabled .report-stack-rear-label{display:none}

.case .toc a.case-home-link{display:block;margin:0 0 22px -10px;padding:7px 10px;color:#536477;font-size:13px;font-weight:500;border-bottom:1px solid #e1e5e8;border-radius:0;background:transparent;white-space:nowrap}
@media(max-width:900px){.case .toc a.case-home-link{margin:0;padding:7px 10px;border:0}}

.nav .brand.case-header-back{font-family:inherit;font-size:15px;font-weight:500;letter-spacing:0;color:#536477;white-space:nowrap}
.nav .brand.case-header-back:hover{color:#2d4643}

.nav .brand{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:600;font-size:29px;letter-spacing:-1px;color:#626a75;line-height:1.2}.nav .brand:hover{color:#3f4855}

/* Selected name treatment: Times italic, matching introductory copy. */
.nav .brand{font-family:"Times New Roman",Times,serif;font-style:italic;font-weight:400;font-size:29px;letter-spacing:-1px;color:#626a75}.nav .brand:hover{color:#626a75}

.dusk-case .case #product>.capture-explore-hint{font-size:12px;line-height:1.5;color:#858b94;font-weight:400;margin:0 0 12px;text-align:right;max-width:none}.dusk-case .capture-scroll-hint{display:none!important}
@media(max-width:850px){.dusk-case .case #product>.capture-explore-hint{text-align:left}}

.dusk-case .capture-screen{position:relative}
.dusk-case .capture-screen .capture-image-hint{position:absolute;left:0;top:100%;margin:10px 0 0;font-size:12px;line-height:1.5;color:#858b94;max-width:none}
.dusk-case .capture-next-cue{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);color:#8174da;pointer-events:none;display:none;animation:capture-cue-pulse 1.8s ease-in-out infinite}
.dusk-case .capture-explanation:has(.capture-step.is-next:not([hidden])) .capture-next-cue{display:block}
.capture-next-cue svg{display:block;width:24px;height:32px}
@keyframes capture-cue-pulse{0%,100%{opacity:.3}50%{opacity:1}}
@media(max-width:850px){.dusk-case .capture-screen .capture-image-hint{position:static;margin-top:10px}.dusk-case .capture-next-cue{display:none!important}}
@media(prefers-reduced-motion:reduce){.dusk-case .capture-next-cue{animation:none;opacity:.8}}

/* Shared directional cue for text links across the portfolio. */
a .inline-link-arrow{display:inline-block;transition:transform .2s ease!important;transform:translate(0,0)!important}
a:hover .inline-link-arrow[data-direction=diagonal],a:focus-visible .inline-link-arrow[data-direction=diagonal]{transform:translate(3px,-2px)!important}
a:hover .inline-link-arrow[data-direction=left],a:focus-visible .inline-link-arrow[data-direction=left]{transform:translate(-3px,0)!important}
a:hover .inline-link-arrow[data-direction=right],a:focus-visible .inline-link-arrow[data-direction=right]{transform:translate(3px,0)!important}
.dusk-case .capture-click-cue{color:#8174da;animation:capture-click-pulse 1.8s ease-in-out infinite}.capture-click-cue svg{width:34px;height:34px}
@keyframes capture-click-pulse{0%,100%{opacity:.25}50%{opacity:.65}}
@media(prefers-reduced-motion:reduce){a .inline-link-arrow{transition:none!important;transform:none!important}.dusk-case .capture-click-cue{animation:none;opacity:.5}}

.dusk-case .capture-step-controls{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px}
.capture-step-dots{display:flex;gap:8px;background:#eeebf3;padding:9px 12px;border-radius:24px}.capture-step-dots button{width:8px;height:8px;border:0;padding:0;border-radius:50%;background:#cdc7db;cursor:pointer}.capture-step-dots button[aria-pressed=true]{background:#8270c2}
.capture-step-next{width:38px;height:38px;border:0;border-radius:50%;padding:8px;background:#a9a6ae;color:white;display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 10px #302c391a}.capture-step-next svg{width:22px;height:22px}.capture-step-next:hover{background:#8174b7}.capture-step-next:disabled{opacity:.3;cursor:default}
@media(max-width:850px){.dusk-case .capture-step-controls{position:static;transform:none;justify-content:center;margin-top:18px}}


/* Testing: evidence followed by a short decision or next test. */
.dusk-case #testing>.testing-method{margin:12px 0 32px;font-size:12px;line-height:1.7}
.dusk-case #testing .testing-evidence-note{font-size:12px;line-height:1.6;color:#79808c;margin:14px 0 0}
.dusk-case #testing .testing-personal-result{margin-top:40px}
.dusk-case #testing .testing-personal-label{font-size:12px;line-height:1.5;color:#626a75;margin-bottom:8px}

/* Keep the Step 2 cue outside the faded preview layer. */
.dusk-case .capture-explanation{position:relative}
.capture-step2-pulse{position:absolute;width:42px;height:42px;border:2px solid #927be2;border-radius:50%;background:transparent;box-shadow:0 0 10px 3px #a993ea55,inset 0 0 7px #a993ea33;pointer-events:none;z-index:5;transform:translate(-50%,-50%);animation:capture-hollow-pulse 1.8s ease-in-out infinite}
.capture-step2-pulse[hidden]{display:none}
@keyframes capture-hollow-pulse{0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(.9)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.capture-step2-pulse{animation:none;opacity:.7}}

/* Tap-like contraction followed by a soft outward ripple, then a quiet pause. */
.capture-step2-pulse{width:34px;height:34px;border:0;box-shadow:none;animation:none}
.capture-step2-pulse::before,.capture-step2-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:transparent;pointer-events:none}
.capture-step2-pulse::before{border:2px solid #927be2;box-shadow:0 0 7px 2px #a993ea66,inset 0 0 6px #a993ea33;animation:capture-tap-ring 2.1s ease-in-out infinite}
.capture-step2-pulse::after{border:2px solid #a38be2;box-shadow:0 0 9px 3px #ae97e955;animation:capture-tap-wave 2.1s ease-out infinite}
@keyframes capture-tap-ring{0%,82.667%,100%{opacity:.18;transform:scale(1)}16%{opacity:.85;transform:scale(.82)}32%{opacity:.7;transform:scale(1)}56%{opacity:.3;transform:scale(1)}}
@keyframes capture-tap-wave{0%,16%{opacity:0;transform:scale(.82)}24%{opacity:.6;transform:scale(.9)}64%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.9)}}
@media(prefers-reduced-motion:reduce){.capture-step2-pulse::before{animation:none;opacity:.6}.capture-step2-pulse::after{display:none}}

/* Calendar and Dashboard sit together before the mascot states. */
.dusk-case #product .work-history-walkthrough{margin-top:64px}
.dusk-case #product .work-history-walkthrough>.walkthrough-part-title{margin-bottom:24px}
.dusk-case #product .work-history-view{margin:0;width:82%;min-width:0}
.dusk-case #product .work-history-view+.work-history-view{margin-top:48px}
.dusk-case #product .work-history-view figcaption{margin:0 0 18px;padding:0;background:none}
.dusk-case #product .work-history-view h4{font-size:18px;line-height:1.5;font-weight:600;color:#292735;margin:0 0 4px}
.dusk-case #product .work-history-view p{font-size:15px;line-height:1.6;color:#626a75;max-width:none;margin:0}
.dusk-case #product .work-history-view>img{display:block;width:100%;height:auto;margin:0;border:0;border-radius:16px;box-shadow:none}
@media(max-width:850px){.dusk-case #product .work-history-view{width:100%}}
@media(max-width:600px){.dusk-case #product .work-history-walkthrough{margin-top:48px}.dusk-case #product .work-history-view+.work-history-view{margin-top:32px}.dusk-case #product .work-history-view>img{border-radius:12px}}

/* Pair each history view with a compact caption at its side. */
.dusk-case #product .work-history-walkthrough>.walkthrough-part-title{margin-bottom:28px}
.dusk-case #product .work-history-view{display:grid;grid-template-columns:minmax(0,20fr) minmax(0,80fr);align-items:center;gap:28px;width:100%;margin:0}
.dusk-case #product .work-history-view+.work-history-view{margin-top:48px}
.dusk-case #product .work-history-view figcaption{margin:0;padding:0;min-width:0}
.dusk-case #product .work-history-view h4{margin:0 0 10px;font-size:18px;line-height:1.4;color:#292735}
.dusk-case #product .work-history-view p{font-size:15px;line-height:1.65;color:#626a75;margin:0}
.dusk-case #product .work-history-view>img{width:100%;min-width:0;height:auto;border:0;box-shadow:none;transform:none}
@media(max-width:850px){.dusk-case #product .work-history-view{grid-template-columns:minmax(0,1fr);gap:16px}.dusk-case #product .work-history-view h4{margin-bottom:4px}.dusk-case #product .work-history-view+.work-history-view{margin-top:36px}}

/* Show the test task before its evidence, with all report-choice votes visible. */
.dusk-case #testing .testing-task{font-size:14px;line-height:1.65;color:#626a75;margin:0 0 20px;max-width:none}
.dusk-case #testing .testing-finding>.testing-task{max-width:760px;margin-bottom:24px}
.dusk-case #testing .testing-full-results{table-layout:fixed}
.dusk-case #testing .testing-full-results th:first-child{width:46%;padding-right:12px}
.dusk-case #testing .testing-full-results thead th:not(:first-child),.dusk-case #testing .testing-full-results tbody td{text-align:center;width:18%;padding-left:4px;padding-right:4px;font-variant-numeric:tabular-nums}
.dusk-case #testing .testing-full-results tbody td.is-top-choice{color:#7564c7;font-weight:600}
.dusk-case #testing .testing-intended{font-size:12px;font-weight:400;color:#79808c}
@media(max-width:600px){.dusk-case #testing .testing-full-results{font-size:13px}.dusk-case #testing .testing-full-results thead th{font-size:11px}.dusk-case #testing .testing-full-results th:first-child{width:43%;padding-right:8px}}

.dusk-case #testing .testing-full-results>caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Test backgrounds use the full finding width, before the evidence/action columns. */
.dusk-case #testing .testing-finding>.testing-task{max-width:none;width:auto}

/* Slightly separate work history from the report cards. */
.dusk-case #product #work-history-walkthrough{margin-top:calc(var(--dusk-block-gap) + 20px)}

/* Keep long implementation examples readable within their code panels. */
.dusk-case #build .build-evidence pre{white-space:pre-wrap;overflow-wrap:anywhere}
.dusk-case #build .build-evidence pre code{white-space:inherit}

/* Match the earlier introduction-to-image spacing. */
.dusk-case #build .build-flow{margin-top:var(--dusk-text-gap)}

/* Testing: one evidence heading per chart, one chart colour, shared text levels. */
.dusk-case #testing .testing-columns h4,
.dusk-case #testing .testing-question{font-size:14px;line-height:1.5;font-weight:600;color:#424752;letter-spacing:0;text-transform:none;margin:0 0 14px}
.dusk-case #testing .testing-chart dt,
.dusk-case #testing .testing-count,
.dusk-case #testing .testing-choice-summary thead th{font-size:14px;line-height:1.5;color:#626a75}
.dusk-case #testing .testing-bar,
.dusk-case #testing .testing-bar.is-primary{background:#8174da}
.dusk-case #testing .testing-chart-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}
.dusk-case #testing .testing-chart dl{gap:12px}
.dusk-case #testing .testing-chart+.testing-chart{margin-top:28px}

/* Keep answers together and separate the two setup questions. */
.dusk-case #testing .testing-chart dl{gap:6px}
.dusk-case #testing .testing-chart+.testing-chart{margin-top:36px}

/* Shared count column for setup and confirmation charts, including zero values. */
.dusk-case #testing .testing-chart dd{display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:10px;align-items:center}
.dusk-case #testing .testing-count{min-width:0;text-align:right}

/* Personal result with a restrained half-height highlight. */
.dusk-case #testing .testing-personal-result{margin-top:48px;padding:32px 0 16px;border-top:1px solid #e6e3eb;border-radius:0;background:none}
.dusk-case #testing .testing-personal-label{font-size:14px;line-height:1.5;font-weight:500;color:#626a75;margin:0 0 12px}
.dusk-case #testing .testing-personal-result h3{font-size:22px;line-height:1.4;font-weight:600;color:#292735;margin:0 0 12px}
.dusk-case #testing .testing-personal-result p{font-size:14px;line-height:1.6;font-weight:400;color:#626a75;margin:0}
@media(max-width:650px){.dusk-case #testing .testing-personal-result{margin-top:40px;padding:28px 0 12px}.dusk-case #testing .testing-personal-result h3{font-size:21px}}
.dusk-case #testing .testing-result-highlight{color:inherit;background:linear-gradient(transparent 55%,#e8e0f6 55%,#e8e0f6 94%,transparent 94%);padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

.dusk-case #build .build-repository-link{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin:16px 0 24px;font-size:14px;line-height:1.6;color:#79808c}
.dusk-case #build .build-repository-link a{color:#626a75;text-decoration:underline;text-underline-offset:4px}


.dusk-case #overview .dusk-transition-group>.overview-repository-link{margin:20px 0 0;font-size:14px;line-height:1.6}
.dusk-case #overview .overview-repository-link a{display:inline-block;color:#626a75;text-decoration:underline;text-underline-offset:5px;padding-bottom:3px}

.dusk-case .platform-project-link{color:inherit;white-space:nowrap;text-decoration:underline;text-underline-offset:4px}

.dusk-case .platform-link-separator{display:inline-block;margin-inline:.25em}

/* Preserve the original personal-result presentation when moved above Overview. */
.dusk-case .testing-personal-result{margin-top:48px;padding:32px 0 16px;border-top:1px solid #e6e3eb;border-radius:0;background:none}
.dusk-case .testing-personal-label{font-size:14px;line-height:1.5;font-weight:500;color:#626a75;margin:0 0 12px}
.dusk-case .testing-personal-result h3{font-size:22px;line-height:1.4;font-weight:600;color:#292735;margin:0 0 12px}
.dusk-case .testing-personal-result p{font-size:14px;line-height:1.6;font-weight:400;color:#626a75;margin:0}
.dusk-case .testing-result-highlight{color:inherit;background:linear-gradient(transparent 55%,#e8e0f6 55%,#e8e0f6 94%,transparent 94%);padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media(max-width:650px){.dusk-case .testing-personal-result{margin-top:40px;padding:28px 0 12px}.dusk-case .testing-personal-result h3{font-size:21px}}

/* More breathing room between testing and implementation. */
.dusk-case .case article>section#testing+section#build{margin-top:72px}

/* November 2: one four-screen gallery; category tabs and sequential navigation. */
.dusk-case .worklog-tabs{display:flex;border-bottom:1px solid #e5e0ee;margin:24px 0 28px}
.dusk-case .worklog-tabs button{position:relative;flex:1;border:0;background:transparent;padding:16px 12px;font:inherit;font-size:16px;font-weight:500;color:#666071;cursor:pointer}
.dusk-case .worklog-tabs button[aria-selected="true"]{color:#7b60e3;font-weight:600}
.dusk-case .worklog-tabs button[aria-selected="true"]:after{content:"";position:absolute;bottom:-1px;left:28%;right:28%;height:3px;background:#7b60e3;border-radius:2px}
.dusk-case .worklog-stage{position:relative;padding-right:72px}
.dusk-case .worklog-slide[hidden]{display:none!important}
.dusk-case .worklog-slide{animation:worklog-arrive .24s ease-out}
.dusk-case #product .worklog-slide .report-use-case{display:block;margin:0 0 18px}
.dusk-case #product .worklog-slide .report-use-case h4{margin:0 0 5px;font-size:18px}
.dusk-case #product .worklog-slide .report-use-case p{margin:0;max-width:none;font-size:15px}
.dusk-case .worklog-slide>img{display:block;width:100%;height:auto;border-radius:16px}
.dusk-case .worklog-next{position:absolute;right:0;top:54%;width:48px;height:48px;display:grid;place-items:center;border:1px solid #ffffffcc;border-radius:50%;background:#a6a4aa;color:white;box-shadow:0 3px 10px #231e451a;cursor:pointer}
.dusk-case .worklog-next:hover{background:#89858f}
.dusk-case .worklog-bottom{display:flex;align-items:center;gap:16px;margin-top:20px}
.dusk-case .worklog-dots{display:flex;gap:10px;padding:10px 13px;background:#eeecf1;border-radius:24px}
.dusk-case .worklog-dot{width:12px;height:12px;padding:0;border:0;border-radius:50%;background:#cbc6d5;cursor:pointer}
.dusk-case .worklog-dot[aria-pressed="true"]{background:#7662bc}
.dusk-case .worklog-status{font-size:13px;color:#777180}
.dusk-case .worklog-gallery button:focus-visible{outline:2px solid #7b60e3;outline-offset:4px}
@keyframes worklog-arrive{from{opacity:.5;transform:translateX(8px)}to{opacity:1;transform:none}}
@media(max-width:600px){.dusk-case .worklog-stage{padding-right:0;padding-bottom:62px}.dusk-case .worklog-next{top:auto;bottom:0;right:0;width:44px;height:44px}.dusk-case .worklog-tabs button{font-size:14px;padding:14px 6px}.dusk-case .worklog-bottom{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.dusk-case .worklog-slide{animation:none}}

/* Fit complete previews at 100% zoom; keep the section heading compact. */
.dusk-case #product .worklog-gallery>.walkthrough-part-title{margin-bottom:10px}
.dusk-case #product .worklog-gallery>.report-walkthrough-intro{margin:0 0 18px}
.dusk-case .worklog-tabs{justify-content:flex-start;gap:32px;margin:0 0 18px}
.dusk-case .worklog-tabs button{flex:0 0 auto;padding:11px 4px;font-size:15px}
.dusk-case .worklog-tabs button[aria-selected="true"]:after{left:0;right:0;height:2px}
.dusk-case .worklog-stage{width:fit-content;max-width:100%;padding-right:64px;box-sizing:border-box}
.dusk-case #product .worklog-slide .report-use-case{margin-bottom:12px}
.dusk-case #product .worklog-slide .report-use-case h4{font-size:17px;margin-bottom:3px}
.dusk-case #product .worklog-slide .report-use-case p{font-size:14px;line-height:1.5}
.dusk-case .worklog-slide>img{width:auto;max-width:100%;height:auto;max-height:calc(100svh - 380px);object-fit:contain;object-position:left top}
.dusk-case .worklog-bottom{margin-top:14px;gap:12px}
.dusk-case .worklog-dots{padding:8px 11px;gap:9px}
.dusk-case .worklog-dot{width:10px;height:10px}
@media(max-width:600px){.dusk-case .worklog-stage{width:100%;padding-right:0;padding-bottom:54px}.dusk-case .worklog-slide>img{width:100%;max-height:none}.dusk-case .worklog-tabs{gap:24px}.dusk-case .worklog-tabs button{font-size:14px}.dusk-case .worklog-bottom{margin-top:8px}}

/* Preview: four interface cards in a single stack. */
.dusk-case .worklog-stage{display:grid;grid-template-columns:minmax(0,1fr);padding-right:150px;isolation:isolate}
.dusk-case .worklog-slide{grid-area:1 / 1;position:relative;min-width:0;animation:none;transform:translate(calc(var(--depth)*24px),calc(var(--depth)*7px));transition:transform .35s ease;pointer-events:none}
.dusk-case .worklog-slide[data-depth="0"]{pointer-events:auto}
.dusk-case .worklog-slide:not([data-depth="0"]) .report-use-case{visibility:hidden}
.dusk-case .worklog-slide>img{box-shadow:0 5px 14px #29223b14;background:#eee8f5}
.dusk-case .worklog-slide:not([data-depth="0"])>img{filter:brightness(.95)}
.dusk-case .worklog-next{z-index:8;right:0}
.dusk-case .worklog-bottom{margin-top:34px}
@media(max-width:600px){.dusk-case .worklog-stage{padding-right:36px;padding-bottom:62px}.dusk-case .worklog-slide{transform:translate(calc(var(--depth)*9px),calc(var(--depth)*4px))}.dusk-case .worklog-bottom{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.dusk-case .worklog-slide{transition:none}}

/* Refined stack: quiet card edges, not repeated application windows. */
.dusk-case .worklog-slide{transform:none;transition:none}
.dusk-case .worklog-slide>img{box-shadow:0 5px 14px #29223b12}
.dusk-case .worklog-slide:not([data-depth="0"]){transform:translateX(calc(var(--depth)*15px));}
.dusk-case .worklog-slide:not([data-depth="0"])>img{visibility:hidden;filter:none;box-shadow:none}
.dusk-case .worklog-slide:not([data-depth="0"]):after{content:"";position:absolute;left:0;right:0;top:calc(60px + var(--depth)*10px);bottom:calc(var(--depth)*10px);border-radius:16px;background:linear-gradient(125deg,#eae4f6,#f2e4e1);border:1px solid #e6deeb;z-index:-1}
.dusk-case .worklog-bottom{margin-top:16px}
@media(max-width:600px){.dusk-case .worklog-slide:not([data-depth="0"]){transform:translateX(calc(var(--depth)*8px))}.dusk-case .worklog-slide:not([data-depth="0"]):after{top:calc(76px + var(--depth)*6px);bottom:calc(var(--depth)*6px);border-radius:12px}}

/* Current screen plus a faded quarter-width preview of the next screen. */
.dusk-case .worklog-stage{padding-right:clamp(140px,18vw,235px);overflow:hidden}
.dusk-case .worklog-slide:after{display:none!important}
.dusk-case .worklog-slide{transform:none!important}
.dusk-case .worklog-slide:not([data-depth="0"]){visibility:hidden}
.dusk-case .worklog-slide[data-depth="1"]{visibility:visible;transform:translateX(calc(100% + 18px))!important}
.dusk-case .worklog-slide[data-depth="1"]>img{visibility:visible;filter:none;box-shadow:none;opacity:.8;mask-image:linear-gradient(to right,#000 0%,transparent 28%);-webkit-mask-image:linear-gradient(to right,#000 0%,transparent 28%)}
.dusk-case .worklog-slide[data-depth="0"]>img{box-shadow:none}
.dusk-case .worklog-next{right:12px;top:54%;background:#a6a4aa}
@media(max-width:600px){.dusk-case .worklog-stage{padding-right:64px;padding-bottom:54px}.dusk-case .worklog-slide[data-depth="1"]{transform:translateX(calc(100% + 10px))!important}.dusk-case .worklog-next{right:0;top:auto;bottom:0}}

/* Continuous image movement through a fixed white edge fade. */
.dusk-case .worklog-slide[data-depth="1"]>img{mask-image:none;-webkit-mask-image:none;opacity:1}
.dusk-case .worklog-stage:before{content:"";position:absolute;right:0;top:60px;bottom:0;width:clamp(140px,18vw,235px);background:linear-gradient(90deg,transparent 0%,#fff 92%);z-index:6;pointer-events:none}
.dusk-case .worklog-motion-rail{position:absolute;display:flex;z-index:5;pointer-events:none;will-change:transform}
.dusk-case .worklog-motion-rail>img{display:block;max-width:none;object-fit:contain;border-radius:16px}
.dusk-case .worklog-is-moving .worklog-slide>img{visibility:hidden!important}
.dusk-case .worklog-next{z-index:8}
@media(max-width:600px){.dusk-case .worklog-stage:before{width:64px;top:76px;bottom:54px}}

/* Keep the work-log introduction from ending in a short orphan line. */
.dusk-case #product .worklog-gallery>.report-walkthrough-intro{text-wrap:pretty}