/* Fuglen page ("Experiences beyond the cup"), preview copy styled like the Moodly page.
   Moodly's layout and patterns come from the shared .redesign-v2 styles; this file only
   swaps Moodly's blue for Fuglen's lime and adds the few patterns Moodly doesn't have.
   Lime (#c3d743) is too light for small text on the cream page, so text labels use a darker olive
   from the same hue and the lime itself is used for lines, bullets and tints. */

.fuglen-v2 {
  --fuglen-lime: #c3d743;
  --fuglen-lime-text: #5f6c0f;
  --fuglen-lime-line: #dfe8a0;
  --fuglen-lime-tint: #f0f4cf;
}

/* ---- Section numbers, divider labels and list numbers: blue becomes olive ---- */
.fuglen-v2 .project-summary1 .h2::before,
.fuglen-v2 .edit-list__num,
.fuglen-v2 .test-steps__num,
.fuglen-v2 .info-card__head {
  color: var(--fuglen-lime-text);
}

/* ---- Overview: the "at a glance" visual on the left (like the Moodly video), text and facts table on the right ---- */
/* stacked layouts: heading, facts table, then the visual below the text */
@media screen and (max-width: 61.9375em) {
  .fuglen-v2 .project--overview .project-summary1 {
    order: 5;
  }
}

/* ---- Heading with a chip next to it (Priority 1 / Priority 2) ---- */
.fuglen-v2 .heading-with-chip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 3.5rem;
}

.fuglen-v2 .heading-with-chip .h4.bold.section-heading.section-start.block-start {
  margin: 0;
}

.fuglen-v2 .heading-with-chip .hashtag {
  min-height: 0;
  margin: 0;
  padding: 0.125rem 0.625rem;
}

/* ---- Numbered lists with long text (findings): number stays at the top ---- */
.fuglen-v2 .edit-list__item {
  align-items: start;
}

.fuglen-v2 .edit-list__num {
  padding-top: 0.125rem;
}

.fuglen-v2 .edit-list__title {
  margin-top: 0;
  line-height: 150%;
}

.fuglen-v2 .edit-list__text {
  margin-top: 0;
  margin-bottom: 0;
}

.fuglen-v2 .edit-list__text + .edit-list__text {
  margin-top: 0.75rem;
}

.fuglen-v2 .edit-list--red .edit-list__num {
  color: var(--urgent-red-heading-color);
}

.fuglen-v2 .edit-list--brown .edit-list__num {
  color: #4a3d36;
}

/* photos inside a finding */
.fuglen-v2 .edit-list__body .photo-with-caption {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.fuglen-v2 .edit-list__body .photo-with-caption + .photo-with-caption {
  margin-top: 1.5rem;
}

/* ---- Pattern: info cards (participants, tools, recommendations): the beige card of Moodly's reaction cards ---- */
.info-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0.5rem 0 1rem;
}

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

.info-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: 1rem;
  background-color: #f1eee8;
}

.info-card__head {
  font-family: 'DM Mono', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: .04em;
}

.info-card__title {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 130%;
  color: var(--black);
}

.info-card__text {
  font-family: Poppins, sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 150%;
  color: #3d3d3d;
}

@media screen and (max-width: 47.9375em) {
  .info-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Bullet lists with a lime dot ---- */
.bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: Poppins, sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 150%;
  color: #3d3d3d;
}

.bullet-list li {
  position: relative;
  margin: 0;
  padding-left: 1.25rem;
}

.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.75em - 0.25rem);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--fuglen-lime);
}

/* lists in running text: same size and color as body text */
.bullet-list--body {
  font-size: 1rem;
  line-height: 160%;
  color: var(--black);
  max-width: 80ch;
}

.bullet-list--body li::before {
  top: calc(0.8em - 0.25rem);
}

/* ---- Results: 4 soft gradient number cards (Overview, next to the details table) ---- */
.glance {
  margin: 0;
}

/* the block starts at the left margin, in line with the hero photo, and is a bit wider than Moodly's video;
   the gap is smaller so the text column still starts where the text of the sections below starts */
@media screen and (min-width: 62em) {
  .fuglen-v2 .project--overview {
    column-gap: 3.25rem;
  }

  .fuglen-v2 .project--overview .project-summary1 {
    width: 23rem;
    flex: 0 0 23rem;
  }

  .fuglen-v2 .project--overview .glance {
    margin-left: 0;
  }
}

.results-head {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.results-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #3d3834;
}

.results-line {
  flex: 1;
  height: 1px;
  background: rgba(90, 82, 76, .25);
}

.results-grid {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

.rcard {
  box-sizing: border-box;
  min-width: 0;
  min-height: 9.5rem;
  padding: 1.5rem 1.125rem 1.625rem;
  border-radius: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.5rem;
  overflow-wrap: break-word;
}

.rnum {
  font-family: 'DM Mono', monospace;
  font-size: 3.25rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--dark-grey);
}

.rlabel {
  margin: 0;
  min-height: 2.6em;
  font-family: Poppins, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--dark-grey);
}

.rsub {
  margin: 0.75rem 0 0;
  font-family: Poppins, sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.45;
}

.rcard--lime { background: linear-gradient(160deg, #d3e17c 0%, #e9f0bd 100%); }
.rcard--lime .rnum, .rcard--lime .rlabel { color: #2a2f10; }
.rcard--lime .rsub { color: #3d4710; }

.rcard--beige { background: linear-gradient(160deg, #e3dcd8 0%, #f2eeeb 100%); }
.rcard--beige .rsub { color: #3d3834; }

.rcard--brown { background: linear-gradient(160deg, #c9a48f 0%, #e0cbbd 100%); }
.rcard--brown .rnum, .rcard--brown .rlabel { color: #2f2824; }
.rcard--brown .rsub { color: #3a2f29; }

.rcard--red { background: linear-gradient(160deg, #e8908a 0%, #f5c4c0 100%); }
.rcard--red .rnum, .rcard--red .rlabel { color: #3a1b19; }
.rcard--red .rsub { color: #4a2523; }

@media screen and (max-width: 37.5em) {
  .results-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Text sizes: the same as on the Moodly page (running text 17px and the 88ch line length come from polish.css) */
.fuglen-v2 .project-page .paragraph > .h2,
.fuglen-v2 .project-page .project-summary1 .h2 { font-size: 1.6875rem; }
.fuglen-v2 .project-page .h4.bold.section-heading { font-size: 1.4375rem; }
.fuglen-v2 .project-page .summary-row__label { font-size: 0.875rem; }
.fuglen-v2 .project-page .summary-row__value,
.fuglen-v2 .project-page .edit-list__text,
.fuglen-v2 .project-page .flow-carousel__caption { font-size: 1rem; }
.fuglen-v2 .project-page .edit-list__title { font-size: 1.125rem; }
.fuglen-v2 .project-page .info-card__title { font-size: 1.1875rem; }
/* neutral (beige) cards hold regular text: same as Moodly's reaction cards, 16px light, label 14px.
   Only the colored cards (Why it matters) go down to 14px. */
.fuglen-v2 .project-page .info-card__text,
.fuglen-v2 .project-page .info-card .bullet-list {
  font-size: 1rem;
  font-weight: 300;
  line-height: 150%;
  color: #3d3d3d;
}
.fuglen-v2 .project-page .info-card__head { font-size: 0.875rem; }
.fuglen-v2 .project-page .caption-small { font-size: 0.9375rem; }
.fuglen-v2 .project-page .summary-row__pills .hashtag { font-size: 0.875rem; }
.fuglen-v2 .project-page .bullet-list { font-size: 1rem; }
.fuglen-v2 .project-page .bullet-list--body { font-size: 1.0625rem; max-width: 88ch; }

/* "Why it matters": a small lime card, like the "Hidden goal" card on the Moodly page */
.fuglen-v2 .edit-list__why {
  margin-top: 1.5rem;
  box-sizing: border-box;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  background-color: var(--fuglen-lime-tint);
}

.fuglen-v2 .edit-list__why-label {
  display: block;
  margin-bottom: 0.25rem;
  font-family: 'DM Mono', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fuglen-lime-text);
}

.fuglen-v2 .edit-list__why-text {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 150%;
  color: #505050;
}

/* ---- Spacing: more room between paragraphs, lists, cards and photos than the default 10px,
   and more room around the dividers between the numbered findings ---- */
.fuglen-v2 .project-page .paragraph-block {
  row-gap: 1.25rem;
}

.fuglen-v2 .project-page .paragraph-block > .section-start {
  margin-top: 3.5rem;
}

.fuglen-v2 .edit-list__item {
  padding: 2.5rem 0;
}

.fuglen-v2 .edit-list__text + .edit-list__text {
  margin-top: 1rem;
}

.fuglen-v2 .edit-list__title {
  margin-bottom: 0.75rem;
}

/* ---- "The approach": the Moodly step cards as a list. All 5 sit in one line when the column is wide enough
   (about 50rem), and wrap to 3, 2 and finally 1 across as the screen gets smaller. ---- */
.fuglen-v2 .step-cards--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.75rem;
  width: 100%;
  margin: 0.9375rem 0 0;
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 47.9375em) {
  .fuglen-v2 .step-cards--grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Hypotheses: .test-steps--claims, a number, a short claim with one supporting line, and a tag.
   Other .test-steps lists (here and on Moodly) keep the base style. ---- */
.fuglen-v2 .project-page .test-steps--claims .test-steps__item {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  max-width: none;
  padding: 1.25rem 0;
  border-top: 1px solid #d9d6cf;
}

.fuglen-v2 .project-page .test-steps--claims .test-steps__item:last-child {
  border-bottom: 1px solid #d9d6cf;
}

.fuglen-v2 .project-page .test-steps--claims .test-steps__num {
  font-family: 'DM Mono', sans-serif;
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1;
  color: var(--fuglen-lime-text);
}

.fuglen-v2 .project-page .test-steps--claims .test-steps__claim {
  display: block;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--black);
}

.fuglen-v2 .project-page .test-steps--claims .test-steps__support {
  display: block;
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: #3d3d3d;
}

.fuglen-v2 .project-page .test-steps--claims .test-steps__tag {
  padding: 0.375rem 1rem;
  border-radius: 62.4375rem;
  background-color: #f1f4d3;
  font-family: Poppins, sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  color: #4a5a20;
  white-space: nowrap;
}

@media screen and (max-width: 47.9375em) {
  .fuglen-v2 .project-page .test-steps--claims .test-steps__item {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "num text" "num tag";
    gap: 0.75rem 1rem;
    align-items: start;
  }

  .fuglen-v2 .project-page .test-steps--claims .test-steps__num {
    grid-area: num;
    font-size: 1.75rem;
  }

  .fuglen-v2 .project-page .test-steps--claims .test-steps__text {
    grid-area: text;
  }

  .fuglen-v2 .project-page .test-steps--claims .test-steps__tag {
    grid-area: tag;
    justify-self: start;
  }
}

/* ---- Key findings (global website): Moodly's text-plus-visual rows (.feel-row), 2 equal columns, the visual
   alternating sides. The rows stack when the text column is narrow, not just when the window is. ---- */
.fuglen-v2 .feel-rows--findings {
  container-type: inline-size;
  width: 100%;
  margin-top: 0.5rem;
}

.fuglen-v2 .feel-row--finding {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  padding: 2.5rem 0;
}

.fuglen-v2 .feel-row--reverse .finding-figure {
  order: -1;
}

.fuglen-v2 .finding-label {
  font-family: 'DM Mono', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fuglen-lime-text);
}

.fuglen-v2 .project-page .feel-row--finding .feel-row__title {
  display: block;
  margin: 0.625rem 0 1rem;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--black);
}

.fuglen-v2 .finding-summary {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: #3d3d3d;
}

.fuglen-v2 .finding-bullets {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: #3d3d3d;
}

.fuglen-v2 .finding-bullets li {
  position: relative;
  margin: 0;
  padding-left: 1.25rem;
}

.fuglen-v2 .finding-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.75em - 0.25rem);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #aabc32;
}

.fuglen-v2 .feel-row--finding .edit-list__why {
  margin-top: 0;
}

.fuglen-v2 .finding-figure {
  margin: 0;
  min-width: 0;
}

.fuglen-v2 .finding-visual {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid #d9d6cf;
  border-radius: 0.75rem;
  box-sizing: border-box;
  overflow: hidden;
}

.fuglen-v2 .finding-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.fuglen-v2 .finding-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fuglen-v2 .finding-box {
  position: absolute;
  box-sizing: border-box;
  border: 3px solid #d30004;
  border-radius: 0.375rem;
}

.fuglen-v2 .finding-tag {
  position: absolute;
  padding: 0.25rem 0.75rem;
  border-radius: 62.4375rem;
  background-color: #d6e18d;
  font-family: Poppins, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: #2b3410;
  white-space: nowrap;
}

.fuglen-v2 .finding-figure .caption-small {
  margin-top: 0.75rem;
}

@container (max-width: 40rem) {
  .fuglen-v2 .feel-row--finding {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding: 2rem 0;
  }

  .fuglen-v2 .feel-row--reverse .finding-figure {
    order: 0;
  }
}

/* ---- Fonts: everything new uses the page fonts (Poppins for text, DM Mono for labels and numbers) with no extra
   letter-spacing, and the step cards get the same sizes as on the Moodly page ---- */
.fuglen-v2 .finding-summary,
.fuglen-v2 .finding-bullets,
.fuglen-v2 .edit-list__why-text,
.fuglen-v2 .rlabel,
.fuglen-v2 .rsub {
  font-family: Poppins, sans-serif;
  letter-spacing: 0;
}

.fuglen-v2 .project-page .step-card__num { font-size: 0.875rem; }
.fuglen-v2 .project-page .step-card__title { font-size: 1.1875rem; }
.fuglen-v2 .project-page .step-card__text { font-size: 1rem; letter-spacing: 0; }

/* ---- Lime step card (The process): the Moodly step-card with a lime gradient ---- */
.step-card--lime { background: linear-gradient(160deg, #d6e18d 0%, #e8edbc 100%); }
.step-card--lime .step-card__num { color: #4a5a20; }
.step-card--lime .step-card__title { color: #2b3410; }
.step-card--lime .step-card__text { color: #39461a; font-weight: 300; }

/* ---- Group labels (the DM Mono divider from Moodly) in Fuglen's olive and lime ---- */
.fuglen-v2 .feel-divider { border-bottom-color: #d6e18d; }
.fuglen-v2 .feel-divider__label { font-size: 0.9375rem; color: var(--fuglen-lime-text); }

/* ---- Participant cards: 4 across when there is room, 2 on a tablet, 1 on a phone ---- */
.fuglen-v2 .info-cards--participants {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  width: 100%;
  margin-bottom: 0;
}

.fuglen-v2 .project-page .info-card__value {
  font-family: Poppins, sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 150%;
  color: #3d3d3d;
}

.fuglen-v2 .project-page .info-card__value--large {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--black);
}

/* the Note callout directly under the participant cards */
.fuglen-v2 .paragraph-block > .edit-list__why { margin-top: 0; }

/* ---- Placeholder for screenshots that are not ready (webshop findings) ---- */
.fuglen-v2 .finding-visual--placeholder {
  border: 1px dashed #aabc32;
  background: none;
}

/* ---- What worked well: a lime-tint card with a check in front of each point ---- */
.fuglen-v2 .worked-card {
  padding: 1.5rem;
  border-radius: 1rem;
  background-color: #f1eee8;
}

.fuglen-v2 .worked-card__title {
  margin: 0 0 1rem;
  font-family: Poppins, sans-serif;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--black);
}

.fuglen-v2 .worked-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fuglen-v2 .worked-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
}

.fuglen-v2 .worked-card__list p {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0;
  color: #3d3d3d;
}

.fuglen-v2 .worked-card__list strong { font-weight: 500; }

.fuglen-v2 .worked-card__check {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: #d6e18d;
  color: #2b3410;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Accessibility, Priority 1 item 01: the 3 examples as rows like Moodly's "Nudging": the image(s) large on the
   left, the caption as text on the right. The rows stack when the text column is narrow. ---- */
.fuglen-v2 .a11y-gallery {
  container-type: inline-size;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 1.25rem;
}

.fuglen-v2 .a11y-gallery .photo-with-caption {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  margin: 0;
  min-width: 0;
}

.fuglen-v2 .a11y-gallery .div-block-45 {
  display: flex;
  gap: 1rem;
}

.fuglen-v2 .a11y-gallery .div-block-45 > img {
  flex: 1 1 0;
  min-width: 0;
}

.fuglen-v2 .a11y-gallery img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.fuglen-v2 .a11y-gallery .caption-small {
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: #3d3d3d;
}

@container (max-width: 34rem) {
  .fuglen-v2 .a11y-gallery .photo-with-caption {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}

.fuglen-v2 .step-cards--grid .step-card {
  padding: 1.5rem 0.875rem 1.75rem;
}

/* ---- Recommendations: the cards of a group side by side, equal height. On a narrower text column
   (below about 75em of window) they fit as many 15rem columns as there is room for, down to 1. ---- */
.fuglen-v2 .info-cards--row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  width: 100%;
}

@media screen and (max-width: 74.9375em) {
  .fuglen-v2 .info-cards--row {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

.fuglen-v2 .info-cards--row .info-card__title {
  overflow-wrap: break-word;
}

/* ---- Accessibility gallery: the thin look of the Key findings images, no box behind them ---- */
.fuglen-v2 .a11y-gallery .image-10 {
  box-sizing: border-box;
  border: 1px solid #cfcbc2;
  border-radius: 1.25rem;
  background: none;
  padding: 0;
}

/* ---- Click to enlarge (Key findings images) ---- */
.fuglen-v2 .img-zoom {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.fuglen-v2 .img-zoom--wrap {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
}

.fuglen-v2 .img-zoom:focus-visible {
  outline: 3px solid #5f6c0f;
  outline-offset: 3px;
}

.lightbox {
  box-sizing: border-box;
  max-width: 96vw;
  max-height: 94vh;
  padding: 1rem;
  border: 0;
  border-radius: 0.75rem;
  background-color: #faf8f4;
  overflow: auto;
}

.lightbox::backdrop {
  background: rgba(20, 18, 14, .72);
}

.lightbox__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid #cfcbc2;
  border-radius: 50%;
  background-color: #faf8f4;
  font-family: Poppins, sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  color: #111;
  cursor: pointer;
}

.lightbox__close:focus-visible {
  outline: 3px solid #5f6c0f;
  outline-offset: 2px;
}

.lightbox__body .finding-visual {
  width: min(86vw, calc(70vh * 4 / 3), 1200px);
}

.lightbox__body > img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  margin: 0 auto;
}

.lightbox__caption {
  margin: 0.75rem 0 0;
  font-family: Poppins, sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.5;
  color: #3d3d3d;
}

.lightbox__caption:empty { display: none; }

/* ---- More room between elements (Moodly's rhythm: about 50px between sections, 26px and more around blocks) ---- */
.fuglen-v2 .project-page .paragraph-block {
  row-gap: 1.5rem;
}

/* cards, callouts and rows get extra space on top of the paragraph gap */
.fuglen-v2 .info-cards { gap: 1.25rem; margin: 0.5rem 0 0; }
.fuglen-v2 .info-cards--participants { margin-bottom: 0; }
.fuglen-v2 .paragraph-block > .edit-list__why { margin-top: 0.25rem; }
.fuglen-v2 .paragraph-block > .feel-rows--findings { margin-top: 1rem; }
.fuglen-v2 .paragraph-block > .worked-card { margin-top: 1.5rem; }
.fuglen-v2 .paragraph-block > .step-cards--grid { margin-top: 1rem; }
.fuglen-v2 .paragraph-block > .test-steps--claims { margin-top: 1rem; }
.fuglen-v2 .paragraph-block > .bullet-list--body { margin-top: 0.25rem; }
.fuglen-v2 .paragraph-block > .project-details { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.fuglen-v2 .paragraph-block > .feel-divider { margin-top: 3.5rem; margin-bottom: 0.75rem; }

/* Key findings rows: more space inside and between the rows */
.fuglen-v2 .feel-row--finding { padding: 3rem 0; }
.fuglen-v2 .finding-label { margin-bottom: 0.25rem; }
.fuglen-v2 .project-page .feel-row--finding .feel-row__title { margin: 0.75rem 0 1rem; }
.fuglen-v2 .finding-summary { margin-bottom: 1.25rem; }
.fuglen-v2 .finding-bullets { gap: 0.75rem; margin-bottom: 1.75rem; }
.fuglen-v2 .finding-figure .caption-small { margin-top: 1rem; }

/* numbered finding lists (accessibility, process) */
.fuglen-v2 .edit-list__item { padding: 3rem 0; }
.fuglen-v2 .edit-list__title { margin-bottom: 1rem; }
.fuglen-v2 .edit-list__body .edit-list__why { margin-top: 1.5rem; }
.fuglen-v2 .a11y-gallery { gap: 3rem; margin-top: 2rem; }
.fuglen-v2 .a11y-gallery .photo-with-caption { gap: 2.5rem; }

/* card insides */
.fuglen-v2 .info-card { gap: 1rem; padding: 1.5rem 1.5rem 1.75rem; }
.fuglen-v2 .info-card .bullet-list { gap: 0.75rem; }
.fuglen-v2 .worked-card { padding: 1.75rem; }
.fuglen-v2 .worked-card__title { margin-bottom: 1.25rem; }
.fuglen-v2 .worked-card__list { gap: 1.25rem; }
.fuglen-v2 .project-page .test-steps--claims .test-steps__item { padding: 1.75rem 0; }

/* ---- Screenshots that come with their own grey frame (item 02 and 03 of the accessibility list):
   the button gets the page's thin border and rounded corners, and the image is nudged out by 2px so its own
   square frame is clipped away instead of showing as a second edge ---- */
.fuglen-v2 .img-zoom--wrap {
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #cfcbc2;
  border-radius: 0.75rem;
}

.fuglen-v2 .img-zoom--wrap > img.image-10 {
  display: block;
  width: calc(100% + 4px);
  max-width: none;
  margin: -2px;
  border: 0;
  border-radius: 0;
}

.lightbox__body > img { border-radius: 0.75rem; }

/* ---- One right edge for everything in the text column: the 88ch measure of the running text
   (88 characters of the 17px text). The numbered findings used to stop earlier at their own
   70ch cap, so their text ended short of the paragraphs above and below. ---- */
.fuglen-v2 .project-page .paragraph-block {
  /* same font settings as the paragraphs, so 88ch is the same width here as in the paragraphs */
  max-width: 88ch;
  font-family: Poppins, sans-serif;
  font-size: 1.0625rem;
  font-weight: 300;
}

/* Every block of reading text stops at 88 characters of its OWN font, whatever the size (16px or 17px).
   ch follows the element's font size, so smaller text gets a proportionally narrower line. */
.fuglen-v2 .project-page .paragraph-text,
.fuglen-v2 .project-page .edit-list__text,
.fuglen-v2 .project-page .edit-list__why-text,
.fuglen-v2 .project-page .finding-summary,
.fuglen-v2 .project-page .finding-bullets,
.fuglen-v2 .project-page .info-card__text,
.fuglen-v2 .project-page .info-card__value,
.fuglen-v2 .project-page .bullet-list,
.fuglen-v2 .project-page .test-steps__support,
.fuglen-v2 .project-page .worked-card__list p,
.fuglen-v2 .project-page .caption-small {
  max-width: 88ch;
}

/* The three screenshots (the two contrast checkers) already have their own rounded frame and soft edge
   baked into the image, with transparent corners, so they get no second border or corner from the page.
   Only the two photos, which are plain rectangles, get the thin border and rounded corners. */
.fuglen-v2 .a11y-gallery img[src*="contrast.webp"] {
  border: 0;
  border-radius: 0;
  background: none;
}

/* ---- Item 01 examples: a very subtle line between the three examples (same line as between the numbered items) ---- */
.fuglen-v2 .a11y-gallery { gap: 0; }

.fuglen-v2 .a11y-gallery .photo-with-caption {
  padding: 2rem 0;
}

.fuglen-v2 .a11y-gallery .photo-with-caption:first-child { padding-top: 0; }

.fuglen-v2 .a11y-gallery .photo-with-caption + .photo-with-caption {
  border-top: 1px solid var(--menu-background);
}