/* Case study pages. Uses tokens.css and styles.css (paper texture, labels, links).
   Layout from the Figma "case study" frame, as a normal column of sections
   (not Figma x / y), so the text can grow and reflow. */

.study {
  width: calc(var(--page-width) * var(--u));
  margin: 0 auto;
  padding: calc(var(--space-6) * var(--u)) calc(var(--page-margin) * var(--u)) calc(var(--space-8) * var(--u));
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
}

/* Shared text styles */
.study-kicker {
  font-family: var(--font-hand);
  font-weight: normal;
  font-size: calc(var(--text-body) * var(--u));
}

.study-heading {
  margin-top: calc(var(--space-1) * var(--u));
  font-weight: var(--weight-bold);
  font-size: calc(var(--text-study-heading) * var(--u));
  line-height: 1.2;
  text-wrap: balance;
}

.study-subheading {
  font-weight: var(--weight-bold);
  font-size: calc(var(--text-study-sub) * var(--u));
  line-height: 1.3;
}

.study-body,
.study-list {
  max-width: calc(var(--study-text) * var(--u));
  font-size: max(var(--text-small-min), calc(var(--text-study-body) * var(--u)));
  line-height: var(--leading-study-body);
}

.study-subheading + .study-body,
.study-subheading + .study-list {
  margin-top: calc(var(--space-2) * var(--u));
}

.study-body + .study-subheading {
  margin-top: calc(var(--space-6) * var(--u));
}

.study-list {
  padding-left: 1.2em;
}

.study-list li + li {
  margin-top: calc(var(--space-2) * var(--u));
}

/* Placeholder still to fill: red, so it can never be mistaken for finished copy */
.study-todo {
  color: var(--color-study-todo);
}

/* Sections: one heading group, then the content.
   scroll-margin-top: where page snapping lands, a little above the kicker (js/page-snap.js) */
.study-section {
  margin-top: calc(var(--space-8) * var(--u));
  scroll-margin-top: calc(var(--space-7) * var(--u));
}

/* ---------- Scroll reveal (js/study-scroll.js), as on the home page ----------
   Each part fades and rises in, one after another; it resets once the section has left */
.will-reveal .reveal-item {
  opacity: 0;
  translate: 0 calc(var(--step-rise) * var(--u));
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    translate var(--duration-reveal) var(--ease-out);
}

.will-reveal .is-revealed .reveal-item {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
}

/* The journey line draws down through the steps as they appear */
.will-reveal .study-journey__line {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--duration-reveal) var(--ease-in-out);
}

.will-reveal .is-revealed .study-journey__line {
  clip-path: inset(0 0 0 0);
  transition-duration: calc(var(--duration-reveal) + var(--reveal-stagger) * 5);
  transition-delay: calc(var(--reveal-stagger) * 2);
}

.study-heading + * {
  margin-top: calc(var(--space-6) * var(--u));
}

/* "← back to the mess" (underline and writing effect: .link-draw in styles.css) */
.study-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: inherit;
  font-size: calc(var(--text-body) * var(--u));
  outline: var(--focus-ring-width) solid transparent;
  outline-offset: var(--focus-ring-offset);
}

/* A link inside running text (e.g. the live product link under a case study's results):
   the ink colour, with the drawn underline and writing effect of the other text links */
/* Inside a sentence the underline is always drawn, or the link would look like plain text */
.study-live {
  color: inherit;
  background-size: 100% var(--link-underline-width);
  outline: var(--focus-ring-width) solid transparent;
  outline-offset: var(--focus-ring-offset);
}

.study-live:focus-visible,
.study-back:focus-visible,
.study-next:focus-visible {
  outline-color: var(--color-focus);
}

/* ---------- Hero ---------- */
.study-hero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space-4) * var(--u));
  margin-bottom: calc(var(--space-7) * var(--u));
}

.study-hero__title {
  margin-top: calc(var(--space-3) * var(--u));
  font-weight: var(--weight-bold);
  font-size: calc(var(--text-section) * var(--u));
  line-height: 1.15;
}

.study-hero__line {
  display: block;
}

/* The highlighted phrase: a red block, like the home page's role label */
.study-hero__mark {
  display: inline-block;
  margin-top: calc(var(--space-2) * var(--u));
  padding: 0.04em 0.3em 0.1em;
  background: var(--color-label-red);
  color: var(--color-paper);
}

.study-hero__sub {
  max-width: calc(var(--study-text) * var(--u));
  margin-top: calc(var(--space-5) * var(--u));
  font-family: var(--font-hand);
  font-weight: normal;
  font-size: calc(var(--text-intro) * var(--u));
  line-height: 1.3;
}

/* ROLE / DURATION / PLATFORM / REACH, under a hand-drawn rule */
/* Each item as wide as its text, spread across the row, so none wraps */
.study-meta {
  display: grid;
  grid-template-columns: repeat(5, max-content);
  justify-content: space-between;
  gap: calc(var(--space-5) * var(--u));
  margin: calc(var(--space-6) * var(--u)) 0 0;
  padding-top: calc(var(--space-5) * var(--u));
  border-top: 1.5px dashed currentColor;
}

.study-meta dt {
  font-size: max(12px, calc(var(--text-study-meta) * var(--u)));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.study-meta dd {
  margin: calc(var(--space-1) * var(--u)) 0 0;
  font-family: var(--font-hand);
  font-weight: normal;
  font-size: calc(var(--text-body) * var(--u));
}

/* Hero image, under the role row: a photo pinned to the page (white mat, the cards'
   soft shadow, a slight tilt and the reflection note's red pin). The hand-drawn card
   outline is not used here: stretched this wide, its slanted edges cut across the image. */
.study-hero__shot {
  rotate: var(--study-hero-tilt);
  margin: calc(var(--space-7) * var(--u)) 0 0;
  padding: calc(var(--space-4) * var(--u));
  background: var(--color-card-highlight);
  box-shadow: 0 calc(var(--card-shadow-y) * var(--u)) calc(var(--card-shadow-blur) * var(--u)) var(--color-card-shadow);
}

.study-hero__shot .study-pinned__pin {
  top: calc(var(--space-2) * -1 * var(--u));
  left: 50%;
  translate: -50% 0;
  z-index: 1;
}

.study-hero__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- The brief ---------- */
.study-brief {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--space-7) * var(--u));
}

/* The brief reads like the journey notes: handwritten, at the same size */
.study-brief .study-body,
.study-brief .study-list {
  font-family: var(--font-hand);
  font-weight: normal;
  font-size: max(var(--text-small-min), calc(var(--text-body) * var(--u)));
  line-height: 1.35;
}

/* ---------- The journey ---------- */
.study-journey {
  position: relative;
}

/* The home page timeline line, stretched to the steps */
.study-journey__line {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(63 * var(--u));
  height: 100%;
  translate: -50% 0;
  pointer-events: none;
}

.study-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--study-step-gap) * 2 * var(--u));
  row-gap: calc(var(--space-5) * var(--u));
  padding-block: calc(var(--space-5) * var(--u));
  list-style: none;
}

.study-step {
  position: relative;
  max-width: calc(var(--study-step-w) * var(--u));
}

/* Steps alternate: odd ones end at the line, even ones start from it */
/* Left steps sit a little closer to the line: their wrapped lines end ragged,
   which reads as a wider gap than the right steps' straight left edge */
.study-step:nth-child(odd) {
  grid-column: 1;
  justify-self: end;
  margin-right: calc(var(--study-step-pull) * -1 * var(--u));
}

.study-step:nth-child(even) {
  grid-column: 2;
}

.study-step:nth-child(1) { grid-row: 1; }
.study-step:nth-child(2) { grid-row: 2; }
.study-step:nth-child(3) { grid-row: 3; }
.study-step:nth-child(4) { grid-row: 4; }
.study-step:nth-child(5) { grid-row: 5; }

/* Each marker sits on the line, level with its pill */
.study-step__marker {
  position: absolute;
  top: 0;
  width: calc(var(--study-marker) * var(--u));
  height: calc(var(--study-marker) * var(--u));
}

.study-step:nth-child(odd) .study-step__marker {
  right: calc((var(--study-step-gap) + var(--study-marker) / 2) * -1 * var(--u));
}

.study-step:nth-child(even) .study-step__marker {
  left: calc((var(--study-step-gap) + var(--study-marker) / 2) * -1 * var(--u));
}

/* Dark pill: "STEP 1 · AUDIT" */
.study-pill {
  display: inline-block;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: max(12px, calc(var(--text-study-meta) * var(--u)));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Each step a colour from the home page labels, in order, starting again after four.
   Dark ink on yellow (light text there is too faint to read), light on the rest.
   Dark text on a light colour looks heavier than light on dark, so the yellow pill is
   set a little lighter (Quicksand is variable) to look the same as the others. */
.study-step:nth-child(4n + 1) .study-pill { background: var(--color-label-black); }
.study-step:nth-child(4n + 2) .study-pill { background: var(--color-label-blue); }
.study-step:nth-child(4n + 3) .study-pill { background: var(--color-label-red); }

.study-step:nth-child(4n + 4) .study-pill {
  background: var(--color-label-yellow);
  color: var(--color-ink);
  font-weight: var(--weight-on-light);
}

/* An intro line straight under a section heading (the AI workflow overview): handwritten,
   like the brief, with a clear gap before the cards below it */
.study-section > .study-body {
  font-family: var(--font-hand);
  font-weight: normal;
  font-size: max(var(--text-small-min), calc(var(--text-body) * var(--u)));
  line-height: 1.35;
}

.study-section > .study-body + .study-notes {
  margin-top: calc(var(--space-7) * var(--u));
}

/* ---------- Chapters: one case study made of several projects (projects/ai-workflows.html) ----------
   Each project opens with a coloured pill in place of the handwritten kicker,
   in the journey steps' colour order: black, blue, red. */
.study-pill--black { background: var(--color-label-black); }
.study-pill--blue { background: var(--color-label-blue); }
.study-pill--red { background: var(--color-label-red); }

/* The chapter's own pill: sized to its text (desktop slides stretch their children),
   and a step larger than the journey pills, so a new chapter is easy to spot */
.study-chapter > .study-pill {
  align-self: flex-start;
  width: fit-content;
  font-size: max(var(--text-small-min), calc(var(--text-small) * var(--u)));
}

.study-chapter > .study-pill + .study-heading {
  margin-top: calc(var(--space-3) * var(--u));
}

/* Phones: a long chapter name wraps, so the pill becomes a rounded tag */
@media (max-width: 1023.98px) {
  .study-chapter > .study-pill {
    border-radius: 0.8em;
    line-height: 1.35;
  }
}

/* Jump cards: a note that links to its chapter. The whole card is the target (the link's
   ::after covers it). Hover lifts it like the work frames, and "jump to it" writes itself
   and draws its underline, like the other text links (js/link-write.js, styles.css .link-draw). */
.study-note--jump {
  transition: transform var(--duration-hover) var(--ease-out);
}

.study-note .study-pill {
  margin-bottom: calc(var(--space-3) * var(--u));
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: normal;
}

.study-jump {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  margin-top: calc(var(--space-2) * var(--u));
  color: inherit;
  text-decoration: none;
  outline: var(--focus-ring-width) solid transparent;
  outline-offset: var(--focus-ring-offset);
}

.study-jump::after {
  content: "";
  position: absolute;
  inset: 0;
}

.study-jump:focus-visible {
  outline-color: var(--color-focus);
}

.study-note--jump:has(.study-jump:focus-visible) {
  transform: translateY(calc(var(--card-raise) * -1 * var(--u)));
}

.study-jump:focus-visible .link-draw {
  background-size: 100% var(--link-underline-width);
  transition-delay: 0ms;
}

@media (hover: hover) {
  .study-note--jump:hover {
    transform: translateY(calc(var(--card-raise) * -1 * var(--u)));
  }

  .study-note--jump:hover .link-draw {
    background-size: 100% var(--link-underline-width);
    transition-delay: var(--write-total, 0ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .study-note--jump,
  .study-note--jump:hover,
  .study-note--jump:has(.study-jump:focus-visible) {
    transform: none;
  }
}

/* ---------- Flow diagram: inputs → hub → result (AI workflow, HubSpot talent automation) ----------
   Drawn from the site's own pieces: paper outlines (no white fill, so the diagram stays light),
   the homepage oval for the hub, and hand-drawn arrows that keep one line weight. */
.study-flow {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) calc(var(--study-flow-arrow-in) * var(--u))
    minmax(0, 1.15fr) calc(var(--study-flow-arrow-out) * var(--u))
    minmax(0, 1fr);
  align-items: center;
}

.study-flow .study-note::before {
  content: none;
}

.study-flow .study-note .study-pill {
  margin-bottom: calc(var(--space-2) * var(--u));
}

.study-flow__inputs {
  display: grid;
  gap: calc(var(--space-6) * var(--u));
  list-style: none;
}

.study-flow__hub {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 733 / 420;
  padding: 0 12%;
  text-align: center;
}

.study-flow__oval {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.study-flow__hub-title {
  font-weight: var(--weight-bold);
  font-size: calc(var(--text-study-sub) * var(--u));
  line-height: 1.2;
}

.study-flow__hub-text {
  margin-top: calc(var(--space-2) * var(--u));
  font-family: var(--font-hand);
  font-size: calc(var(--text-body) * var(--u));
  line-height: 1.3;
}

.study-flow__arrows {
  position: relative;
  align-self: stretch;
}

.study-flow__arrows svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.study-flow__arrows path {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.study-flow__label {
  position: absolute;
  font-family: var(--font-hand);
  font-size: calc(var(--text-small) * var(--u));
  line-height: 1.2;
  white-space: nowrap;
}

/* The closing line under the diagram */
.study-flow + .study-flow__boundary {
  margin-top: calc(var(--space-4) * var(--u));
  font-family: var(--font-hand);
  font-size: calc(var(--text-small) * var(--u));
  text-align: center;
}

/* Phones and tablets: one column, an arrow pointing down between the steps */
@media (max-width: 1023.98px) {
  .study-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-card-y);
    max-width: var(--study-note-max-compact);
  }

  .study-flow__arrows {
    display: none;
  }

  .study-flow__hub {
    aspect-ratio: auto;
    padding: var(--space-section) var(--space-card-x);
  }

  .study-flow__result {
    position: relative;
  }

  .study-flow__hub::before,
  .study-flow__result::before {
    content: "↓";
    position: absolute;
    left: 50%;
    top: calc(var(--space-card-y) * -1);
    translate: -50% -15%;
    font-family: var(--font-hand);
    font-size: 28px;
    line-height: 1;
  }

  .study-flow__hub-title {
    font-size: 19px;
  }

  .study-flow__hub-text,
  .study-flow + .study-flow__boundary {
    font-size: 18px;
  }

  .study-flow + .study-flow__boundary {
    max-width: var(--study-note-max-compact);
  }
}

.study-step__title {
  margin-top: calc(var(--space-3) * var(--u));
  font-weight: var(--weight-bold);
  font-size: calc(var(--text-study-sub) * var(--u));
  line-height: 1.3;
}

.study-step__note {
  margin-top: calc(var(--space-2) * var(--u));
  font-family: var(--font-hand);
  font-weight: normal;
  font-size: calc(var(--text-body) * var(--u));
  line-height: 1.35;
}

/* ---------- Paper: the home page card outline and white fill, stretched to fit ---------- */
.study-paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Outline B is drawn mirrored (as on the home page cards); its fill is mirrored with it */
.study-flip > .study-paper,
.study-flip::before {
  transform: scaleX(-1);
}

.study-note,
.study-frame,
.study-pinned,
.study-lightbox__paper,
.study-hero__shot {
  position: relative;
  isolation: isolate;
}

/* White fill in the outline's shape, behind the outline */
.study-note::before,
.study-frame::before,
.study-pinned::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-card-highlight);
  mask: url("../assets/card-fill.svg?v=2") center / 100% 100% no-repeat;
}

/* ---------- The mess in between ---------- */
.study-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--space-7) * var(--u));
  list-style: none;
}

/* Padding inside the hand-drawn paper. The outline's sides lean in by up to about 10%
   of its width, and its top and bottom edges sit about 12% of its height in, so the
   side padding is a share of the width (wide cards on tablets lean further) */
.study-note {
  rotate: var(--tilt, 0deg);
  padding: calc(var(--space-7) * var(--u)) max(calc(var(--space-6) * var(--u)), var(--paper-inset-x)) calc(var(--space-6) * var(--u));
  font-family: var(--font-hand);
  font-weight: normal;
  font-size: calc(var(--text-body) * var(--u));
  line-height: 1.35;
}

/* Notes with a title ("the decisions behind it"): a Quicksand heading over the handwriting.
   They are taller, so the outline's bottom edge rises further and needs more room */
.study-notes--titled .study-note {
  padding-bottom: calc(var(--space-7) * var(--u));
}

.study-note__title {
  margin-bottom: calc(var(--space-2) * var(--u));
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: calc(var(--text-study-sub) * var(--u));
  line-height: 1.25;
}

/* ---------- The work ---------- */
.study-work {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--space-6) * var(--u));
  list-style: none;
}

/* Frames are taller, so their top and bottom padding grows with them too
   (a share of the frame's width, which tracks their height closely; a grid item's
   percentages resolve against its own column) */
.study-frame {
  padding:
    max(calc(var(--space-7) * var(--u)), var(--frame-inset-top))
    max(calc(var(--space-7) * var(--u)), var(--paper-inset-x))
    max(calc(var(--space-6) * var(--u)), var(--frame-inset-bottom));
}

/* The shot, at its own proportions (never cropped) */
img.study-frame__shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  padding: 0;
  background: none;
}

/* Empty image slot: 16:10, filled with a darker paper until the image is added */
.study-frame__shot {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: calc(var(--space-3) * var(--u));
  background: var(--color-study-shot);
  font-family: var(--font-hand);
  font-weight: normal;
  font-size: calc(var(--text-body) * var(--u));
  text-align: center;
}

/* Enlargeable shot (js/study-lightbox.js wraps each image in this button).
   Hover and focus: the frame lifts like the home page cards, and a note appears. */
.study-frame {
  transition: transform var(--duration-hover) var(--ease-out);
}

.study-zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  outline: var(--focus-ring-width) solid transparent;
  outline-offset: var(--focus-ring-offset);
}

/* .is-quiet: focus came back after the large view was used with the mouse (js/study-lightbox.js) */
.study-zoom:focus-visible:not(.is-quiet) {
  outline-color: var(--color-focus);
}

.study-frame:has(.study-zoom:focus-visible:not(.is-quiet)) {
  transform: translateY(calc(var(--card-raise) * -1 * var(--u)));
}

/* "see it bigger": a small paper tag on the image's corner */
.study-zoom__hint {
  position: absolute;
  right: calc(var(--space-2) * var(--u));
  bottom: calc(var(--space-2) * var(--u));
  padding: 0.1em 0.5em;
  background: var(--color-card-highlight);
  border: 1.5px solid var(--color-ink);
  border-radius: 999px;
  font-family: var(--font-hand);
  font-size: max(var(--text-small-min), calc(var(--text-small) * var(--u)));
  color: var(--color-ink);
  opacity: 0;
  transition: opacity var(--duration-hover) var(--ease-out);
}

.study-zoom:focus-visible:not(.is-quiet) .study-zoom__hint {
  opacity: 1;
}

/* Pointer: the whole card is the target (js/study-lightbox.js), so hovering anywhere on it
   lifts it and shows the note */
.study-frame:has(.study-zoom) {
  cursor: zoom-in;
}

@media (hover: hover) {
  .study-frame:has(.study-zoom):hover {
    transform: translateY(calc(var(--card-raise) * -1 * var(--u)));
  }

  .study-frame:hover .study-zoom__hint {
    opacity: 1;
  }
}

/* Touch screens cannot hover, so the note is always there. Phones and tablets get it too,
   even when the browser reports a hover-capable pointer (some Android browsers do). */
@media (hover: none), (pointer: coarse), (max-width: 1023.98px) {
  .study-zoom__hint {
    opacity: 1;
  }
}

.study-frame__caption {
  margin-top: calc(var(--space-3) * var(--u));
  font-family: var(--font-hand);
  font-weight: normal;
  font-size: calc(var(--text-body) * var(--u));
  line-height: 1.35;
}

/* ---------- Enlarged image (js/study-lightbox.js) ---------- */
/* The page stays still behind the open dialog */
html:has(.study-lightbox[open]) {
  overflow: hidden;
}

.study-lightbox {
  width: min(92vw, calc(var(--study-lightbox-max) * var(--u)));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  /* The dialog sits outside main, so it sets the page font itself */
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  overflow: visible;
}

.study-lightbox::backdrop {
  background: var(--color-lightbox-backdrop);
}

/* A plain sheet, like the pinned hero photo: the hand-drawn card outline is not used,
   because stretched this large its slanted edges cut across the image */
.study-lightbox__paper {
  rotate: var(--study-hero-tilt);
  margin: 0;
  /* Top: room for "close" (its offset and height) plus a gap, so it never sits on the image */
  padding:
    max(calc(var(--space-8) * var(--u)), calc(var(--space-5) * var(--u) + var(--touch-target-lightbox) + var(--space-4) * var(--u)))
    calc(var(--space-6) * var(--u))
    calc(var(--space-5) * var(--u));
  background: var(--color-card-highlight);
  box-shadow: 0 calc(var(--card-shadow-y) * var(--u)) calc(var(--card-shadow-blur) * var(--u)) var(--color-card-shadow);
}

.study-lightbox[open] .study-lightbox__paper {
  animation: lightbox-in var(--duration-card-in) var(--ease-out);
}

@keyframes lightbox-in {
  from { opacity: 0; scale: 0.96; }
}

.study-lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
}

.study-lightbox__caption {
  margin-top: calc(var(--space-3) * var(--u));
  font-family: var(--font-hand);
  font-size: calc(var(--text-body) * var(--u));
  line-height: 1.35;
}

/* With notes: the image on the left, what to look at on the right */
.study-lightbox__paper.has-notes .study-lightbox__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--study-lightbox-notes) * var(--u));
  gap: calc(var(--space-7) * var(--u));
  align-items: center;
}

.study-lightbox__notes:empty {
  display: none;
}

.study-lightbox__title {
  font-weight: var(--weight-bold);
  font-size: max(var(--text-small-min), calc(var(--text-study-sub) * var(--u)));
  line-height: 1.2;
}

.study-lightbox__points {
  margin-top: calc(var(--space-4) * var(--u));
  padding-left: 1.1em;
  font-family: var(--font-hand);
  font-size: max(var(--text-small-min), calc(var(--text-body) * var(--u)));
  line-height: 1.35;
}

.study-lightbox__points li + li {
  margin-top: calc(var(--space-3) * var(--u));
}

/* "close": a handwritten word in the hand-drawn oval, like the footer pills */
.study-lightbox__close {
  position: absolute;
  top: calc(var(--space-5) * var(--u));
  right: calc(var(--space-6) * var(--u));
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-lightbox);
  padding: 0 calc(var(--space-5) * var(--u));
  border: 0;
  background: none;
  font-family: var(--font-hand);
  font-size: calc(var(--text-body) * var(--u));
  color: var(--color-ink);
  cursor: pointer;
  outline: var(--focus-ring-width) solid transparent;
  outline-offset: var(--focus-ring-offset);
  transition: transform var(--duration-hover) var(--ease-out);
}

/* The word sits above the white fill */
.study-lightbox__close > [data-write] {
  position: relative;
}

.study-lightbox__close-highlight,
.study-lightbox__close-outline {
  position: absolute;
  left: calc(var(--footer-pill-outline-out) * -1 * var(--u));
  top: calc(var(--footer-pill-outline-out) * -1 * var(--u));
  width: calc(100% + var(--footer-pill-outline-out) * 2 * var(--u));
  height: calc(100% + var(--footer-pill-outline-out) * 2 * var(--u));
  pointer-events: none;
}

/* White fill in the oval's shape, with a soft shadow (the same as the footer pills, styles.css) */
.study-lightbox__close-highlight {
  opacity: 0;
  filter: drop-shadow(0 calc(var(--card-shadow-y) * var(--u)) calc(var(--card-shadow-blur) * var(--u)) var(--color-card-shadow));
  transition: opacity var(--duration-hover) var(--ease-out);
}

.study-lightbox__close-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-card-highlight);
  mask: url("../assets/oval-fill.svg") center / 100% 100% no-repeat;
}

/* The inlined outline (js/study-lightbox.js) keeps its line weight when stretched */
.study-lightbox__close-outline path {
  vector-effect: non-scaling-stroke;
}

.study-lightbox__close-outline .map-line {
  stroke-dasharray: 1;
}

/* Hover and keyboard focus, as on the footer pills: it lifts and fills white, the outline
   redraws and the word is written again (js/link-write.js). Pressed = drops part way back.
   .is-quiet: the large view was opened with the mouse or a tap (js/study-lightbox.js) */
.study-lightbox__close:focus-visible:not(.is-quiet) {
  outline-color: var(--color-focus);
  transform: translateY(calc(var(--card-raise) * -1 * var(--u)));
}

.study-lightbox__close:focus-visible:not(.is-quiet) .study-lightbox__close-highlight {
  opacity: 1;
}

.study-lightbox__close:focus-visible:not(.is-quiet) .map-line {
  animation: map-redraw var(--duration-redraw) var(--ease-out);
}

@media (hover: hover) {
  .study-lightbox__close:hover {
    transform: translateY(calc(var(--card-raise) * -1 * var(--u)));
  }

  .study-lightbox__close:hover .study-lightbox__close-highlight {
    opacity: 1;
  }

  .study-lightbox__close:hover .map-line {
    animation: map-redraw var(--duration-redraw) var(--ease-out);
  }
}

.study-lightbox__close:active {
  transform: translateY(calc(var(--card-raise-pressed) * -1 * var(--u)));
  transition-duration: var(--duration-press);
}

@media (prefers-reduced-motion: reduce) {
  .study-lightbox[open] .study-lightbox__paper {
    animation: none;
  }

  .study-frame,
  .study-frame:has(.study-zoom):hover,
  .study-frame:has(.study-zoom:focus-visible),
  .study-lightbox__close,
  .study-lightbox__close:hover,
  .study-lightbox__close:focus-visible,
  .study-lightbox__close:active {
    transform: none;
  }

  .study-lightbox__close .map-line {
    animation: none !important;
  }
}

/* ---------- The outcome ---------- */
.study-results {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-7) * var(--u)) calc(var(--space-8) * var(--u));
  list-style: none;
}

.study-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--space-3) * var(--u));
  max-width: calc(var(--study-result-w) * 1.2 * var(--u));
  text-align: center;
}

/* The number inside the hand-drawn oval, drawn in red (the oval shape as a mask) */
.study-result__num {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--study-result-w) * var(--u));
  height: calc(var(--study-result-h) * var(--u));
  font-weight: var(--weight-bold);
  font-size: calc(var(--text-section) * var(--u));
}

.study-result__num::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-label-red);
  mask: url("../assets/oval-bold.svg") center / 100% 100% no-repeat;
}

/* Who did what behind the numbers, and the softer evidence */
.study-result-note {
  max-width: calc(var(--study-text) * 1.4 * var(--u));
  margin-top: calc(var(--space-6) * var(--u));
  font-family: var(--font-hand);
  font-weight: normal;
  font-size: calc(var(--text-body) * var(--u));
  line-height: 1.4;
}

.study-result__label {
  font-family: var(--font-hand);
  font-weight: normal;
  font-size: calc(var(--text-body) * var(--u));
  line-height: 1.35;
}

/* ---------- Reflection ---------- */
.study-pinned {
  rotate: var(--tilt, 0deg);
  max-width: calc(var(--study-pinned-w) * var(--u));
  margin: 0;
  /* Percentage padding is a share of the section's width, not the note's, so it is capped
     at the same share of the note's own widest size */
  --pinned-max: calc(var(--study-pinned-w) * var(--u));
  padding:
    max(calc(var(--space-6) * var(--u)), min(var(--paper-inset-y), calc(var(--pinned-max) * 0.08)))
    max(calc(var(--space-6) * var(--u)), min(var(--paper-inset-x), calc(var(--pinned-max) * 0.11)))
    max(calc(var(--space-5) * var(--u)), min(var(--paper-inset-y), calc(var(--pinned-max) * 0.08)));
}

.study-pinned blockquote {
  margin: 0;
  font-family: var(--font-hand);
  font-size: calc(var(--text-intro) * var(--u));
  line-height: 1.3;
}

/* Why the lesson: smaller, under the quote */
.study-pinned__why {
  margin-top: calc(var(--space-3) * var(--u));
  font-family: var(--font-hand);
  font-size: calc(var(--text-body) * var(--u));
  line-height: 1.4;
}

/* A red pin at the top of the note */
.study-pinned__pin {
  position: absolute;
  top: calc(var(--space-3) * var(--u));
  left: 45%;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-label-red);
}

/* ---------- Bottom navigation ---------- */
.study-nav {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--space-4) * var(--u));
  margin-top: calc(var(--space-8) * var(--u));
  padding-top: calc(var(--space-5) * var(--u));
  border-top: 1.5px dashed currentColor;
}

.study-next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: inherit;
  text-decoration: none;
  outline: var(--focus-ring-width) solid transparent;
  outline-offset: var(--focus-ring-offset);
}

.study-next__label {
  font-size: max(12px, calc(var(--text-study-meta) * var(--u)));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.study-next__title {
  font-size: calc(var(--text-intro) * var(--u));
}

/* The title writes itself again and its underline draws in, like the other text links
   (styles.css, .link-draw; js/link-write.js). The whole link is the hover target. */
.study-next:focus-visible .study-next__title {
  background-size: 100% var(--link-underline-width);
  transition-delay: 0ms;
}

@media (hover: hover) {
  .study-next:hover .study-next__title {
    background-size: 100% var(--link-underline-width);
    transition-delay: var(--write-total, 0ms);
  }
}

/* ---------------------------------------------------------------
   Phones and tablets (under 1024px): one column, journey line on the left
   --------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .study {
    width: auto;
    padding: var(--space-section) var(--space-page);
  }

  .study-hero__bar {
    flex-wrap: wrap;
  }

  .study-heading {
    font-size: 28px;
  }

  .study-hero__title {
    font-size: var(--text-hero-compact);
    line-height: 1.1;
  }

  .study-hero__sub {
    font-size: var(--text-tagline-compact);
  }

  .study-meta,
  .study-brief,
  .study-notes,
  .study-work {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .study-notes {
    gap: var(--space-stack);
  }

  /* Notes stop growing, so on tablets they stay paper-shaped instead of long thin strips.
     Their side padding is a share of the column's width, so it is capped at the same
     share of the note's own widest size */
  /* Reflection note on phones: the same top and bottom room as the project cards
     (outline A dips lowest at its top-left corner) */
  /* A pinned note is tall on phones, so the outline's top-left corner dips further: more room on top */
  .study-pinned {
    padding-top: calc(var(--space-card-top-a-compact) + var(--space-card-y) / 2);
    padding-bottom: calc(var(--space-card-y) * 1.5);
  }

  .study-note {
    max-width: var(--study-note-max-compact);
    padding-inline: max(calc(var(--space-6) * var(--u)), min(var(--paper-inset-x), calc(var(--study-note-max-compact) * 0.11)));
  }

  /* Journey: line on the left, every step to its right */
  .study-journey__line {
    left: calc(var(--timeline-indent) / 4);
    width: calc(var(--timeline-indent) / 2);
  }

  .study-steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-stack);
    padding-left: var(--timeline-indent);
  }

  .study-step:nth-child(n) {
    grid-column: 1;
    justify-self: start;
    margin-right: 0;
    max-width: var(--measure-compact);
  }

  .study-step:nth-child(n) .study-step__marker {
    left: calc(var(--timeline-indent) * -0.75 - var(--marker-size-compact) / 4);
    right: auto;
    width: var(--marker-size-compact);
    height: var(--marker-size-compact);
  }

  .study-results {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Enlarged image on a phone: wider than the screen and scrolls sideways,
     so the screens inside are big enough to read */
  /* Image and notes are taller than a phone screen, so the dialog scrolls (the page behind is locked) */
  .study-lightbox {
    width: calc(100vw - var(--space-page) * 2);
    max-height: calc(100dvh - var(--space-page) * 2);
    padding: var(--gap-s);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Top: "close" sits at --space-card-y, so its height and half that again go above the image */
  .study-lightbox__paper {
    padding: calc(var(--space-card-y) * 1.5 + var(--touch-target-lightbox)) var(--space-card-x) var(--space-card-y);
  }

  .study-hero__shot {
    padding: var(--gap-s);
  }

  .study-lightbox__scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .study-lightbox__img {
    width: var(--study-lightbox-img-compact);
    max-width: none;
    max-height: none;
  }

  .study-lightbox__close {
    top: var(--space-card-y);
    right: var(--space-card-x);
  }

  /* Notes go under the image */
  .study-lightbox__paper.has-notes .study-lightbox__body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-stack);
  }

  .study-result {
    align-items: flex-start;
    text-align: left;
  }

  .study-step__note,
  .study-brief .study-body,
  .study-section > .study-body,
  .study-brief .study-list,
  .study-note,
  .study-frame__caption,
  .study-result__label,
  .study-kicker,
  .study-back {
    line-height: var(--leading-hand-compact);
  }
}

/* ---------------------------------------------------------------
   Desktop (1024px and up): each section is one screen, like the home page.
   Its content is centred in the screen, and page snapping (js/page-snap.js)
   glides from one screen to the next. A section that still runs taller than
   the screen grows instead of clipping, and page-snap adds stops through it.
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .study {
    padding-block: 0;
  }

  .study-hero,
  .study-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    margin-top: 0;
    padding-block: var(--slide-pad);
    scroll-margin-top: 0;
  }

  /* Hero: one screen. The photo takes the space left under the text; on a very
     short screen the hero grows to its content (photo at its minimum) instead */
  .study-hero {
    height: 100vh;
    min-height: min-content;
  }

  .study-hero__bar {
    margin-bottom: calc(var(--space-5) * var(--u));
  }

  .study-meta {
    margin-top: calc(var(--space-5) * var(--u));
  }

  /* The figure fills the leftover height; the photo sits inside it at its own
     proportions, with the white mat, shadow and tilt on the photo itself */
  .study-hero__shot {
    flex: 1 1 0;
    min-height: calc(var(--study-hero-shot-min) * var(--u));
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: calc(var(--space-6) * var(--u));
    padding: 0;
    background: none;
    box-shadow: none;
    rotate: none;
  }

  .study-hero__img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    padding: calc(var(--space-3) * var(--u));
    background: var(--color-card-highlight);
    box-shadow: 0 calc(var(--card-shadow-y) * var(--u)) calc(var(--card-shadow-blur) * var(--u)) var(--color-card-shadow);
    rotate: var(--study-hero-tilt);
  }

  /* Journey: steps overlap by half a step, alternating sides (as in the Figma frame),
     so all five fit on one screen */
  .study-steps {
    row-gap: calc(var(--study-step-row-gap) * var(--u));
    padding-block: 0;
  }

  /* A little less room under the heading, so the wider-spaced steps still fit a 720px screen */
  .study-heading + .study-journey {
    margin-top: calc(var(--space-4) * var(--u));
  }

  .study-step:nth-child(1) { grid-row: 1 / span 2; }
  .study-step:nth-child(2) { grid-row: 2 / span 2; }
  .study-step:nth-child(3) { grid-row: 3 / span 2; }
  .study-step:nth-child(4) { grid-row: 4 / span 2; }
  .study-step:nth-child(5) { grid-row: 5 / span 2; }

  /* Last screen: the reflection, with the bottom navigation under it */
  .study-nav {
    margin-top: calc(var(--space-8) * var(--u));
  }
}

/* The narrowest phones (under 360px): more room above the quote, as on the home page A cards,
   and below it, where a long reason runs into the outline's bottom corner */
@media (max-width: 359.98px) {
  /* The note is tall here, so the outline's top-left corner dips further: a little more room */
  .study-pinned {
    padding-top: calc(var(--space-card-top-a-narrow) + var(--space-card-y) / 2);
    padding-bottom: calc(var(--space-card-y) * 2);
  }
}