/* ============================================
   PROJECT PAGES POLISH (loads after case-study.css; the six project-*.html pages)
   - sections alternate boxed (pale panel) and open (white page, no box); never two boxes in a row
   - the shared 3D card layer on every card, the shared container and wide-screen steps (css/layout-tokens.css)
   - one switcher component (css/ + js/cs-switcher.js), side-by-side tab pictures, full-width comparison,
     balanced products, centred wins, strips that fade at their edges, no orphan step cards
============================================ */

/* ---------- the shared card layer (3px, even on all four sides) ---------- */
.cs-page {
  --card-ring:
    inset 0 0 0 2px rgba(255, 255, 255, 0.92),
    0 0 0 1px var(--edge), 0 0 0 2px var(--edge), 0 0 0 3px var(--edge-deep),
    0 16px 26px -8px rgba(12, 0, 84, 0.3);
}

/* ---------- boxed and open sections ---------- */
.cs-page .cs-panel--open {
  background: none;
  border-radius: 0;
  padding: 0;
}
/* a soft brand tint, so a boxed Results band is clearly not the gallery panel */
.cs-page .cs-panel--tint { background: color-mix(in srgb, var(--periwinkle) 38%, #fff); }
/* an open Results section keeps its content in one white card with a light outline */
.cs-page .cs-panel--card > .section-inner {
  padding: clamp(24px, 3.5vw, 52px);
  border-radius: 32px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--periwinkle);
}
/* cards on the white page get the shared 3D layer */
.cs-page .cs-panel--open .cs-stat,
.cs-page .cs-panel--open .cs-more-grid .work-card,
.cs-page .cs-panel--open .cs-deck img { box-shadow: var(--card-ring); }
.cs-page .cs-more-grid .work-card { background: #fff; border-radius: var(--card-radius, 20px); box-shadow: var(--card-ring); }
.cs-page .cs-more-grid .work-card:hover { background: var(--periwinkle); }
.cs-page .cs-panel--tint .cs-stat { background: #fff; }
.cs-page .cs-approach-list li { box-shadow: var(--card-ring); border-color: transparent; }

/* ---------- "What I did": no orphan step card (an odd last card spans the whole row) ---------- */
.cs-page .cs-approach-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- wide screens: the hero centres its content, and everything scales with the container ---------- */
@media (min-width: 900px) {
  .cs-page .cs-hero { align-items: center; }
  .cs-page .cs-hero > .section-inner { align-self: center; }
}
@media (min-width: 1920px) {
  .cs-page { --cs-nav-h: 96px; --cs-fit: clamp(260px, calc(100svh - 22rem), 40rem); }   /* grows with the screen's type (rem) and is held back by its height */
}
@media (min-width: 2400px) {
  .cs-page { --cs-nav-h: 104px; }
}

/* ---------- the switcher ---------- */
.cs-page .cs-tabs-list { position: relative; }
.cs-page .cs-sw-pill {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: var(--pw, 0px); height: var(--ph, 0px);
  transform: translate(var(--px, 0px), var(--py, 0px));
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--card-ring);
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.3, 0.8, 0.2, 1), width 0.45s cubic-bezier(0.3, 0.8, 0.2, 1), height 0.45s cubic-bezier(0.3, 0.8, 0.2, 1);   /* the same time and curve as the description opening */
}
.cs-page .cs-measuring, .cs-page .cs-measuring * { transition: none !important; animation: none !important; }   /* the hidden copy the switcher measures */
.cs-page .cs-sw-pill::before {                    /* the brand-blue accent bar */
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--blue);
}
.cs-page .cs-sw .cs-tab-item {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: start; column-gap: 14px;
  padding: 16px 18px 20px 18px;
  background: transparent !important; box-shadow: none !important;
  border-radius: 16px;
}
.cs-page .cs-sw .cs-tab-item:not(.has-desc) { grid-template-columns: 34px minmax(0, 1fr); }
.cs-page .cs-sw .cs-tab-item:hover { background: transparent; }
.cs-page .cs-sw .cs-tab-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--periwinkle) 55%, #fff); color: var(--navy);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.cs-page .cs-sw .cs-tab-item.is-active .cs-tab-num { background: var(--blue); color: #fff; transform: scale(1.06); }
.cs-page .cs-sw .cs-tab-main { display: flex; flex-direction: column; min-width: 0; }
.cs-page .cs-sw .cs-tab-title { line-height: 34px; transition: color 0.3s ease; }
.cs-page .cs-sw .cs-tab-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.45s cubic-bezier(0.3, 0.8, 0.2, 1), opacity 0.3s ease; }
.cs-page .cs-sw .cs-tab-item.is-active .cs-tab-body { grid-template-rows: 1fr; opacity: 1; transition-delay: 0s, 0.1s; }
.cs-page .cs-sw .cs-tab-body-in { overflow: hidden; min-height: 0; }
.cs-page .cs-sw .cs-tab-desc { display: block !important; margin: 2px 0 0; }
.cs-page .cs-sw .cs-tab-chev {                     /* a chevron that turns when the item opens */
  width: 20px; height: 34px; position: relative; opacity: 0.55; transition: transform 0.4s ease, opacity 0.3s ease;
}
.cs-page .cs-sw .cs-tab-chev::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: translate(-50%, -70%) rotate(45deg);
}
.cs-page .cs-sw .cs-tab-item.is-active .cs-tab-chev { transform: rotate(180deg); opacity: 1; }
.cs-page .cs-sw .cs-tab-bar {                      /* the time left before it moves on */
  position: absolute; left: 18px; right: 18px; bottom: 8px; height: 3px; border-radius: 3px;
  background: rgba(12, 0, 84, 0.1); opacity: 0; transition: opacity 0.3s ease;
}
.cs-page .cs-sw .cs-tab-item.is-active .cs-tab-bar { opacity: 1; }
.cs-page .cs-sw .cs-tab-bar i { display: block; height: 100%; border-radius: inherit; background: var(--blue); transform-origin: left; transform: scaleX(0); }
@keyframes cs-sw-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cs-page .cs-sw .cs-tab-item:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* row layouts (the wide card and the sprint tabs): the pill slides sideways */
.cs-page .cs-tabs-card--wide .cs-tabs-list,
.cs-page .cs-tabs-card--duo .cs-tabs-list { align-items: flex-start; }
.cs-page .cs-tabs-card--duo .cs-sw .cs-tab-item,
.cs-page .cs-tabs-card--duo.cs-sw .cs-tab-item { padding: 8px 20px 12px 10px; border-radius: 999px; grid-template-columns: 34px auto; }
.cs-page .cs-tabs-card--duo .cs-sw-pill { border-radius: 999px; }
.cs-page .cs-tabs-card--duo .cs-sw-pill::before { display: none; }
.cs-page .cs-tabs-card--duo .cs-tab-bar { left: 22px; right: 22px; bottom: 5px; }
.cs-page .cs-tabs-card--duo .cs-tabs-list { gap: 6px; }

/* the paired picture: the old one is gone the instant the new one starts, and the new one fades in quickly (no overlap, no ghost) */
.cs-page .cs-sw .cs-tabs-image {
  opacity: 0; visibility: hidden;
  transform: none;
  transition: none;
}
/* the new picture is in place at full strength straight away, and the old one fades away on top of it: the card never shows a blank or half-faded frame between the two */
.cs-page .cs-sw .cs-tabs-image.is-active { opacity: 1; visibility: visible; z-index: 1; }
.cs-page .cs-sw .cs-tabs-image.is-leaving { visibility: visible; z-index: 2; animation: cs-sw-out 0.28s ease-out both; pointer-events: none; }
@keyframes cs-sw-out { from { opacity: 1; } to { opacity: 0; } }

/* the before / after control */
.cs-page .cs-seg { position: relative; display: inline-flex; gap: 4px; margin: 0 0 8px; padding: 5px; border-radius: 999px; background: color-mix(in srgb, var(--periwinkle) 45%, #fff); }
.cs-page .cs-seg .cs-tab-item {
  position: relative; z-index: 1; display: inline-grid; grid-template-columns: 30px auto; align-items: center; column-gap: 10px;
  width: auto; padding: 6px 20px 10px 6px; border-radius: 999px;
}
.cs-page .cs-seg .cs-tab-num { width: 30px; height: 30px; }
.cs-page .cs-seg .cs-tab-title { margin: 0; font-size: 0.95rem; line-height: 30px; }
.cs-page .cs-seg .cs-sw-pill { border-radius: 999px; }
.cs-page .cs-seg .cs-sw-pill::before { display: none; }
.cs-page .cs-seg .cs-tab-bar { left: 46px; right: 20px; bottom: 5px; }

/* ---------- Design Sprint: each tab's pictures side by side, filling the width, uncropped ---------- */
.cs-page .cs-tabs-card--duo .cs-tabs-visual.cs-tabs-visual--duo { width: 100%; max-width: none; justify-self: stretch; aspect-ratio: auto; height: auto; background: none; box-shadow: none; overflow: visible; }
.cs-page .cs-tabs-visual--duo .cs-tabs-visual-inner { display: grid; }
.cs-page .cs-tabs-visual--duo .cs-tabs-image.cs-duo {
  grid-area: 1 / 1; position: relative; inset: auto;
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start;
  gap: clamp(14px, 2vw, 28px);
}
.cs-page .cs-tabs-visual--duo .cs-duo.is-active { display: flex; flex-direction: row; }
.cs-page .cs-tabs-visual--duo .cs-duo-img {
  flex: 0 1 calc(var(--cs-fit) * 1.25); min-width: 0; width: auto; max-width: calc(var(--cs-fit) * 1.25);
  height: auto; aspect-ratio: auto; object-fit: contain;
}
@media (max-width: 760px) {
  .cs-page .cs-tabs-visual--duo .cs-duo.is-active { flex-direction: column; }
  .cs-page .cs-tabs-visual--duo .cs-duo-img { width: 100%; max-width: 420px; flex: none; }
  /* a tab with two pictures shows one at a time (cs-switcher.js flips data-step halfway through the tab's time) */
  .cs-page .cs-tabs-visual--duo .cs-duo[data-step] .cs-duo-img { display: none; }
  .cs-page .cs-tabs-visual--duo .cs-duo[data-step="0"] .cs-duo-img:nth-child(1),
  .cs-page .cs-tabs-visual--duo .cs-duo[data-step="1"] .cs-duo-img:nth-child(2) { display: block; animation: cs-duo-in 0.35s ease; }
}

/* ---------- Products (list beside a picture): both columns fill the width evenly ---------- */
@media (min-width: 900px) {
  .cs-page .cs-tabs-card:not(.cs-tabs-card--wide):not(.cs-tabs-card--duo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .cs-page .cs-tabs-card:not(.cs-tabs-card--wide):not(.cs-tabs-card--duo) .cs-tabs-visual { justify-self: center; max-width: 100%; }
}

/* ---------- Consumer: the website comparison fills the section width, centred ---------- */
.cs-page .cs-flip { display: flex; justify-content: center; }
.cs-page .cs-flip-media {
  width: min(100%, calc((100svh - 190px) * 1.847));
  margin-left: auto; margin-right: auto;
}

/* ---------- strips: the moving pictures run to the edges of their box, no faded edges ---------- */
.cs-page .cs-screens-viewport,
.cs-page .cs-articles-viewport,
.cs-page .cs-sessions-viewport,
.cs-page .cs-posters-viewport {
  padding-left: 56px; padding-right: 56px;
}

/* ---------- Test Pilots: the two chat screenshots, a larger centred pair with an even gap ---------- */
.cs-page .cs-wins {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: clamp(20px, 4vw, 56px);
  grid-template-columns: none;
}
.cs-page .cs-win { flex: 0 1 auto; width: auto; }
.cs-page .cs-win img { width: calc((var(--cs-fit) + 90px) * var(--r)); max-width: 100%; height: auto; aspect-ratio: var(--r); }
@media (max-width: 899px) {
  .cs-page .cs-wins { display: flex; flex-wrap: nowrap; justify-content: flex-start; }
  .cs-page .cs-win { flex: 0 0 min(78%, 420px); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-page .cs-sw .cs-tabs-image.is-leaving { display: none; }
  .cs-page .cs-sw-pill, .cs-page .cs-sw .cs-tab-body, .cs-page .cs-sw .cs-tab-chev,
  .cs-page .cs-sw .cs-tab-num, .cs-page .cs-sw .cs-tabs-image { transition: none; }
}


/* ---------- edges: the logo, the hero copy and every panel share the container's left and right edges ---------- */
body.cs-page { --cs-max: var(--container, 1180px); --cs-gutter: 24px; }
.cs-page .cs-hero > .section-inner { max-width: calc(var(--cs-max) + 2 * var(--cs-gutter)); }

/* the wide card's picture sits in the middle of the section */
.cs-page .cs-tabs-card--wide .cs-tabs-visual { justify-self: center; }

/* Wins: the heading sits inside the same panel as the two screenshots */
.cs-page .cs-wins-head { margin-bottom: clamp(24px, 3vw, 40px); }

/* ============================================
   TRAYS: filled (pale blue), outlined (thin soft-blue line) and open (no tray at all)
============================================ */
.cs-page .cs-panel--outline {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--periwinkle);
}
.cs-page .cs-panel--outline .cs-stat { box-shadow: var(--card-ring); }

/* ============================================
   CAPTIONS: one muted line under a picture or gallery
============================================ */
.cs-page .cs-caption {
  margin: 14px 0 0;
  font-size: var(--cs-micro);
  line-height: 1.4;
  color: rgba(12, 0, 84, 0.62);
}
.cs-page .cs-caption--under { position: absolute; left: 0; right: 0; top: 100%; margin-top: 12px; }
.cs-page .cs-pullquote-picture, .cs-page .cs-pullquote-slides { margin-bottom: 36px; }

/* ============================================
   CREDITS
============================================ */
.cs-page .cs-credits-section { padding: 0; }
.cs-page .cs-credits { list-style: none; margin: clamp(20px, 3vh, 30px) 0 0; padding: 0; max-width: 760px; border-top: 1px solid var(--cs-line); }
.cs-page .cs-credits li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--cs-line);
}
.cs-page .cs-credit-role,
.cs-page .cs-credit-name { font-size: 1.05rem; font-weight: 500; line-height: 1.4; color: var(--navy); }
.cs-page .cs-credit-name { text-align: right; }

/* ============================================
   ONE NEXT PROJECT
============================================ */
.cs-page .cs-next { margin-top: 4px; }
.cs-page .cs-next .work-card { width: 100%; max-width: none; justify-self: stretch; }
.cs-page .cs-next .work-card--landscape {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(16px, 2vw, 24px);
  background: #fff;
  border-radius: var(--card-radius, 20px);
  box-shadow: var(--card-ring);
}
.cs-page .cs-next .work-card--landscape:hover { background: var(--periwinkle); }
.cs-page .cs-next .work-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.cs-page .cs-next-all { margin: 22px 0 0; font-weight: 600; }
.cs-page .cs-next-all a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.cs-page .cs-next-all a:hover { color: var(--navy); }
@media (max-width: 760px) { .cs-page .cs-next .work-card--landscape { grid-template-columns: minmax(0, 1fr); } }

/* ============================================
   MATCHING COVERS: one frame for every project's key visual (hero, Work page, next project)
============================================ */
/* ============================================
   CHAPTER RAIL (1280px and up) and the restyled "In this file" pill below it
============================================ */
.cs-rail { display: none; }
@media (min-width: 1280px) {
  .cs-toc, .cs-toc-toggle { display: none !important; }
  .cs-rail {
    display: block;
    position: fixed; left: 10px; top: 50%; z-index: 90;
    transform: translateY(-50%);
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s;
  }
  .cs-toc-on .cs-rail { opacity: 1; visibility: visible; transition-delay: 0s; }
  .cs-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; position: relative; }
  .cs-rail ol::before { content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px; width: 1.5px; margin-left: -0.75px; background: rgba(12, 0, 84, 0.18); }
  .cs-rail li { position: relative; }
  .cs-rail-link {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: #fff; color: var(--navy);
    box-shadow: inset 0 0 0 1.5px rgba(12, 0, 84, 0.25);
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  }
  .cs-rail-link:hover, .cs-rail-link:focus-visible { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); }
  .cs-rail-link.is-active { background: var(--blue); color: #fff; box-shadow: none; }
  .cs-rail-link::after {                      /* the chapter's name, beside its number */
    content: attr(data-label);
    position: absolute; left: 38px; top: 50%;
    transform: translate(-6px, -50%);
    padding: 6px 12px; border-radius: 999px;
    background: #fff; color: var(--navy);
    box-shadow: 0 0 0 1.5px var(--navy), 0 8px 18px -8px rgba(12, 0, 84, 0.4);
    font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .cs-rail-link:hover::after, .cs-rail-link:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
}
/* the active chapter's name always shows once the screen is wide enough to leave it clear of the content */
@media (min-width: 1760px) {
  .cs-rail-link.is-active::after { opacity: 1; transform: translate(0, -50%); }
}
@media (prefers-reduced-motion: reduce) { .cs-rail, .cs-rail-link, .cs-rail-link::after { transition: none; } }
.cs-page .cs-next.work { padding: 0; margin: 0; background: none; border-radius: 0; }
.cs-page .cs-next.work::before { content: none; }

/* the next-project card shows its whole outline and layer (nothing clips it) */
.cs-page .cs-next.work { overflow: visible; padding: 6px 0 8px; }
.cs-page .cs-next-all { margin: 28px 0 0; }
.cs-page .cs-next-all a {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 22px;
  border-radius: 999px;
  background: var(--blue); color: #fff;
  font-size: 0.9375rem; font-weight: 600; text-decoration: none;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.cs-page .cs-next-all a:hover, .cs-page .cs-next-all a:focus-visible { background: var(--navy); color: #fff; transform: translateY(-2px); }
.cs-page .cs-next-all a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* the next-project picture keeps its own shape: smaller, never cropped */
.cs-page .cs-next-card > img.img-placeholder {
  width: auto !important; max-width: 100%;
  height: auto !important; max-height: clamp(240px, 38svh, 400px);
  aspect-ratio: auto !important;
  object-fit: contain !important;
  justify-self: center;
  border-radius: 14px;
}

/* where the Challenge stacks (text on top, picture below), the picture, its pill and its caption sit on the left */
@media (max-width: 899px) {
  .cs-page .cs-pullquote-picture,
  .cs-page .cs-pullquote-slides { justify-self: start; margin-left: 0; margin-right: auto; }
}

/* ---------- Results link pills: multicoloured again, with room between the rows ---------- */
.cs-page .cs-results-links { display: flex; flex-wrap: wrap; gap: 14px 12px; }
.cs-page .cs-results-pill { margin: 0; border: 0; }
/* phones: a little less side padding and gap, so neighbouring pills can share a row */
@media (max-width: 560px) {
  .cs-page .cs-results-links { gap: 12px 8px; }
  .cs-page .cs-results-pill { padding: 0 12px; font-size: 0.875rem; }
}
.cs-page .cs-results-pill--navy { background: var(--navy); color: #fff; }
.cs-page .cs-results-pill--indigo { background: var(--indigo); color: #fff; }
.cs-page .cs-results-pill--blue,
.cs-page .cs-results-pill:first-child.cs-results-pill--blue { background: var(--blue); color: #fff; }
.cs-page .cs-results-pill--purple { background: #5b3dff; color: #fff; }
.cs-page .cs-results-pill--periwinkle { background: var(--periwinkle); color: var(--navy); }
.cs-page .cs-results-pill--pale { background: var(--pale); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--periwinkle); }
.cs-page .cs-results-pill:hover,
.cs-page .cs-results-pill:focus-visible { transform: translateY(-2px); }
.cs-page .cs-results-pill--navy:hover, .cs-page .cs-results-pill--navy:focus-visible { background: var(--navy); color: #fff; }
.cs-page .cs-results-pill--indigo:hover, .cs-page .cs-results-pill--indigo:focus-visible { background: var(--indigo); color: #fff; }
.cs-page .cs-results-pill--blue:hover, .cs-page .cs-results-pill--blue:focus-visible { background: var(--blue); color: #fff; }
.cs-page .cs-results-pill--purple:hover, .cs-page .cs-results-pill--purple:focus-visible { background: #5b3dff; color: #fff; }
.cs-page .cs-results-pill--periwinkle:hover, .cs-page .cs-results-pill--periwinkle:focus-visible { background: var(--periwinkle); color: var(--navy); }
.cs-page .cs-results-pill--pale:hover, .cs-page .cs-results-pill--pale:focus-visible { background: var(--pale); color: var(--navy); }
.cs-page .cs-results-pill:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cs-page .cs-results-pill:hover, .cs-page .cs-results-pill:focus-visible { transform: none; } }

/* long lists of names wrap into even lines on every screen (the first line never runs long) */
.cs-page .cs-credit-name { max-width: min(60%, 36ch); text-wrap: balance; }
.cs-page .cs-credits li { align-items: flex-start; }
.cs-page .cs-credit-role { padding-right: 16px; }
.cs-page .cs-n { white-space: nowrap; }          /* a name never breaks in the middle; lines break between names */
/* a slideshow inside the Challenge picture box takes no extra space of its own (the pill sits right above the picture, the caption right below) */
.cs-page .cs-pullquote-picture > .cs-pullquote-slides { margin: 0; }

/* the slideshow inside the Challenge picture box starts at the box's left edge, in line with the pill above and the caption below */
.cs-page .cs-pullquote-picture > .cs-pullquote-slides { justify-self: start; margin: 0; }
/* ...and the box is exactly as wide as the picture, so the picture, pill and caption share both edges */
.cs-page .cs-pullquote-picture:has(> .cs-pullquote-slides--portrait) { width: min(100%, calc(var(--cs-fit) * 0.8)); }

/* ---------- credits: two equal columns on wide screens, a short list is one centred block ---------- */
@media (min-width: 1024px) {
  .cs-page .cs-credits:not(.cs-credits--few) {
    max-width: none; width: 100%;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column; grid-template-rows: repeat(var(--cs-rows, 4), auto);
    column-gap: clamp(40px, 5vw, 72px);
    border-top: 0;
  }
  .cs-page .cs-credits:not(.cs-credits--few) li { border-top: 1px solid var(--cs-line); margin-bottom: -1px; }
  .cs-page .cs-credits:not(.cs-credits--few) li:nth-child(1),
  .cs-page .cs-credits:not(.cs-credits--few) li:nth-child(n) { border-bottom: 1px solid var(--cs-line); }
}
.cs-page .cs-credits.cs-credits--few { max-width: 720px; margin-left: 0; margin-right: auto; }

/* ---------- phones: the floating "In this file" pill steps up when the music bar is open ---------- */
@media (max-width: 560px) {
  html:has(.mk:not(.is-mini)) .cs-toc-toggle { bottom: 66px; }
  html:has(.mk:not(.is-mini)) .cs-toc { bottom: 116px; }
}

/* "Another Project I Worked On" starts on the container's left edge like every other heading */
.cs-page .cs-more-projects .section-heading { text-align: left !important; margin-left: 0; margin-right: 0; }   /* beats the small-screen "centre every topic" rule */

/* the deck covers open their decks in a new tab: the picture lifts a little and the name turns blue on hover */
.cs-page .cs-deck-link { display: flex; flex-direction: column; align-items: stretch; gap: 0; color: inherit; text-decoration: none; border-radius: 22px; }
.cs-page .cs-deck-link::after { content: none; }   /* no automatic new-tab arrow: the whole cover is the link */
.cs-page .cs-deck-link img { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.cs-page .cs-deck-link .cs-deck-name { transition: color 0.25s ease; }
.cs-page .cs-deck-link:hover img, .cs-page .cs-deck-link:focus-visible img { transform: translateY(-4px); }
.cs-page .cs-deck-link:hover .cs-deck-name, .cs-page .cs-deck-link:focus-visible .cs-deck-name { color: var(--blue); }
.cs-page .cs-deck-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .cs-page .cs-deck-link img, .cs-page .cs-deck-link .cs-deck-name { transition: none; } .cs-page .cs-deck-link:hover img { transform: none; } }