/* ============================================================
   DreamCatcher — case study
   Loaded after styles.css. The page uses the same paper components as Relif;
   only the palette changes, to DreamCatcher's own (from its UI kit), plus a
   few pieces Relif has no need for: phone screens, interview cards, the
   wireframe strip and the design-concept row.
   ============================================================ */

.theme-dc {
  /* DreamCatcher UI kit: night #2a3045, lavender #9fa8d0, teal #93bdc1,
     mint #e0fff7, pink #e3a9cc */
  --hero-bg:     #2a3045;   /* the app's own night-blue ground */
  --card-blue:   #e4e8f7;   /* lavender paper for the folder cards */
  --tab-blue:    #6f7bb8;   /* deeper lavender: tape, tag eyelet and rule */
  --mock-blue:   #9fa8d0;   /* UI kit button lavender: mockup + active tab */
  --mock-blue-2: #d3d8ee;   /* inactive tab */
  --tab-hover:   #bcc3e2;
  --flow-bg:     #f8e6f0;   /* pale pink paper: the hero slip, the wireframe strip */
  --sticky-paper:#f8e6f1;   /* the competitor notes keep the pale paper */
  --tag-pink:    #f1c9e0;   /* UI kit pink, lightened for the luggage tags */
  --highlight:   #c5f2e6;   /* mint marker, from the UI kit's mint */
  --index-pink:  #f1c9e0;   /* section index bars and the back tab: the
                              UI kit pink, so the page is not all lavender */
}

/* ---- hero: light type and a mint slip on the night ground ------------- */
/* the title is set like every other case study's — Urbanist at the sheet's
   own 44 — and in the palette's light lavender, so the mint is left to be an
   accent rather than the loudest thing on the page */
.theme-dc .hero__title { color: #eceaf8; }
.theme-dc .hero__tagline { color: #fff; }
.theme-dc .hero__card    { background: var(--flow-bg); }
.theme-dc .hero::before,
.theme-dc .hero::after   { box-shadow: inset 2px 0 3px rgba(0, 0, 0, .5); }

/* the two tilted phones sit where Relif's laptop does */
.hero__phones {
  position: absolute;
  left: 19.5%;
  top: 24%;
  width: 35%;
  aspect-ratio: 802 / 880;
}
.hero__phone {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

@media (max-width: 1199px) {
  .hero__phones {
    position: relative;
    left: auto; top: auto;
    width: min(100%, 380px);
    margin-inline: auto;
  }
}

/* ---- competitor sticky notes: four, as a 2 x 2 --------------------------- */
.fields--four > .field { flex-basis: calc((100% - var(--gap)) / 2); }
@media (max-width: 599px) {
  .fields--four > .field { flex-basis: 100%; }
}
.field dd + dd { margin-top: 12px; }
.field dd b {
  display: block;
  font-family: Overpass, sans-serif;
  font-weight: 600;
  font-size: var(--small);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- interview cards: the Relif info card, with the memoji on top ------- */
.interviews .note {
  position: relative;
  min-height: 0;
  transform: none !important;           /* no staggered pile for a pair */
  padding-top: 18px;
}
.interview__avatar {
  position: absolute;
  right: 6%;
  top: -64px;
  width: 112px;
  height: auto;
}
.interview .note__title { margin-right: 120px; }
.interview__who { color: var(--ink-soft); }
.findings .note .interview__q {
  padding-top: 24px;                    /* one blank rule before each question */
  font-style: italic;
  color: var(--ink-soft);
}
.interviews { row-gap: 88px; }          /* room for the next card's memoji */
@media (min-width: 900px) {
  .interviews { margin-top: 48px; }
}

/* ---- wireframes: a strip of screens on lavender paper -------------------- */
.wires {
  display: flex;
  align-items: flex-start;
  justify-content: safe center;   /* 'safe': when it overflows, start from the left edge */
  gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(24px, 4vw, 48px);
  background: var(--flow-bg);
  box-shadow: var(--paper-shadow);
  overflow-x: auto;
}
.wires img {
  flex: 1 1 0;                   /* share the row; scroll only below 110 each */
  min-width: 110px;
  max-width: 160px;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

/* ---- design concept: icon beside the text -------------------------------- */
.concept {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.concept__icon { width: 136px; height: auto; border-radius: 30px; }
@media (max-width: 599px) {
  .concept { grid-template-columns: minmax(0, 1fr); }
  .concept__icon { width: 96px; border-radius: 22px; }
}

/* ---- phones in the tabbed mockups ---------------------------------------- */
.phones {
  --pgap: clamp(16px, 2.5vw, 32px);
  --pgap-wide: clamp(44px, 7vw, 96px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--pgap);
}

/* where the last screen is a step away from the two before it — back home,
   rather than the next moment in the same conversation — the row opens up.
   Not a whole screen's worth, just enough to read as a break. */
.phones--split > .phone:nth-child(2) {
  margin-right: calc(var(--pgap-wide) - var(--pgap));
}
.phone {
  counter-increment: step;
  flex: 0 1 220px;
  min-width: 0;
}
/* The bezel belongs to the frame, not to the picture. An absolutely positioned
   mark resolves its percentages against its container's PADDING box — so with
   the bezel here, that box is exactly the screen, and every --x/--y lands where
   it does in the screenshot itself. With the bezel on the <img> the marks were
   measured against a box 10px wider and taller than the screen, which threw
   each one out by (10 x its percentage) - 5 px: nothing at the centre, up to
   5px at the edges. */
.phone__shot {
  --bezel: 5px;
  border: var(--bezel) solid #16181f;
  border-radius: 30px;
  background: #16181f;
  box-shadow: 0 6px 16px rgba(20, 24, 40, .3);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 25px;                  /* 30 less the bezel */
  background: #16181f;
}
/* The note under a screen is Relif's caption: a bar of the page's own paper,
   square where it meets the left margin with a deeper rule down that edge,
   rounded on the right. It takes the screen's width, so the two line up.
   No number — the ring on the screen says which element is meant. */
.phone p {
  margin: 12px 0 0;
  padding: 12px 16px;
  /* the caption takes the back tab's pink, so the two always match */
  background: var(--index-pink);
  border-left: 3px solid var(--tab-blue);
  border-radius: 0 6px 6px 0;
  font-size: var(--small);
  line-height: 1.55;
  color: var(--ink);
}

/* the phones sit at different heights, the way they do on the slide */
.phones { --stagger: clamp(20px, 3.5cqw, 48px); }
.phones > .phone:nth-child(even) { margin-top: var(--stagger); }

/* ---- the dashed annotations ---------------------------------------------- */
/* --x/--y/--w/--h place the ring over the element being pointed at, in % of
   the screenshot; --drop is how far the leader falls before the note. The
   ring may hang off the handset, as it does in the source. */
.phone__shot { position: relative; }
.hot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 1.5px dashed rgba(255, 255, 255, .7);
  border-radius: var(--r, 999px);
  pointer-events: none;
}
/* on a block of text the slide marks the spot with a small filled dot rather
   than a ring around the whole paragraph */
.hot--dot {
  width: 7px;
  height: 7px;
  border: 0;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 2px rgba(42, 48, 69, .5);
}

/* The line from one screen to the next. Only drawn where a screen genuinely
   leads to the one beside it. Same white as the rings, so the two read as one
   set of marks, and it stops at the edge of the next screen — never over its
   picture.

   Two pieces, so the turn happens out in the gap rather than across the screen
   it is leaving: --turn runs out of the mark and drops, --tail finishes the run
   and carries the head. Every percentage is a share of the screen, the bezel
   and half the gap are added in px. */
.link {
  --gap: var(--pgap);
  --ink: rgba(255, 255, 255, .7);
  /* the neighbouring screen sits higher or lower by the row's own stagger, so
     a drop measured on this screen has to be corrected by it to arrive where
     it is aimed: --lift is + when the next screen is lower, - when higher */
  --lift: 0px;
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.link--turn {
  left: var(--x);
  top: var(--y);
  width: calc(100% - var(--x) + var(--bezel) + var(--gap) / 2);
  height: calc(var(--drop) + var(--lift));
  border-top: 1.5px dashed var(--ink);
  border-right: 1.5px dashed var(--ink);
  border-top-right-radius: 14px;
}

.link--tail {
  left: calc(100% + var(--bezel) + var(--gap) / 2);
  top: calc(var(--y) + var(--drop) + var(--lift));
  width: calc(var(--gap) / 2);
  border-top: 1.5px dashed var(--ink);
}

/* the open chevron where it arrives */
.link--tail::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -5px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid rgba(255, 255, 255, .8);
  border-right: 1.5px solid rgba(255, 255, 255, .8);
  transform: rotate(45deg);
}

/* a panel must not grow to fit its phone row — the row scrolls instead */
.theme-dc .panel { min-width: 0; }

/* the mockup body holds a row of phones rather than one wide screenshot */
.theme-dc .mockup__body { padding: clamp(24px, 4cqw, 48px) clamp(16px, 3cqw, 40px); }

@media (max-width: 767px) {
  .phones {
    overflow-x: auto;
    max-width: 100%;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .phone { flex: 0 0 72%; scroll-snap-align: center; }
}

/* ---- why three kinds of tags --------------------------------------------- */

.footer a { color: inherit; }

/* ---- the two board exports, filed like the Relif site map --------------- */
/* Every number here is measured off the site map sheet itself
   (assets/sitemap.png, 2240 x 1160), as a share of that sheet's WIDTH, so
   these two sheets carry the same punch and the same gutters at any size:

     hole      1.61% across, its centre 3.19% in from the left edge
     punch     first and last hole 4.46% in from the top and foot — the
               column does not run to the edges — one every 3.26% between
     gutters   9.82% left (3.2 to the punch, then 5.9 clear of it),
               7.41% top, 8.93% right, 4.29% foot

   The two exports already carry a little of that gutter themselves — the
   flow almost none, the UI kit a few per cent — so each one's padding is the
   remainder, and both end up showing the site map's gutter. --pitch is the
   spacing that lands nearest the site map's 3.26% once the column is inset
   at both ends, for that sheet's proportions. */
.theme-dc .figure--punched {
  position: relative;
  container-type: inline-size;
  --pitch: 3.293cqw;             /* the site map's own, if a sheet sets none */
  --hole: 1.875cqw;
}

.theme-dc .figure--punched img {
  display: block;                 /* no line-box descender under the sheet */
  box-sizing: border-box;
  /* the export's own ground, so the gutter reads as more sheet */
  background-color: #2b3143;
  padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
}

/* the punched column, held clear of the top and foot the way the site map's
   is. The strip reaches half a pitch past the first and last hole, so their
   centres sit exactly on the 4.46 inset. */
.theme-dc .figure--punched::before {
  content: "";
  position: absolute;
  left: 2.143cqw;
  top: calc(4.49cqw - var(--pitch) / 2);
  bottom: calc(4.49cqw - var(--pitch) / 2);
  width: var(--hole);
  /* Holes exactly as the Relif site map draws them, measured from its export:
     1.875 across, 2.143 in from the edge, the first and last centred 4.49
     from the ends. Each is a soft inner shadow set a little to the right:
     25 % black at the left edge, about 13 % at the top and foot, none on the
     right — a radial fade from a centre 0.1 of a hole to the right of the
     hole's own, tiled one per pitch and cut to a circle. */
  background:
    radial-gradient(circle at calc(50% + var(--hole) * .1) 50%,
      transparent calc(var(--hole) * .42),
      rgba(0, 0, 0, .135) calc(var(--hole) * .51),
      rgba(0, 0, 0, .25) calc(var(--hole) * .6))
      0 0 / 100% var(--pitch) repeat-y,
    var(--paper);
  -webkit-mask: radial-gradient(circle closest-side, #000 calc(100% - .75px), transparent) 0 0 / 100% var(--pitch) repeat-y;
  mask: radial-gradient(circle closest-side, #000 calc(100% - .75px), transparent) 0 0 / 100% var(--pitch) repeat-y;
  pointer-events: none;
}

/* trimmed to the diagram, so it takes very nearly the whole gutter */
.theme-dc .figure--punched[data-sheet="flow"] {
  --pad-t: 6.5cqw;
  --pad-r: 8cqw;
  --pad-b: 3.7cqw;
  --pad-l: 9.4cqw;
  --pitch: 3.3cqw;
}

/* the UI kit panel already keeps a margin around its columns */
.theme-dc .figure--punched[data-sheet="kit"] {
  --pad-t: 5.2cqw;
  --pad-r: 6.5cqw;
  --pad-b: 0.5cqw;
  --pad-l: 8.3cqw;
  --pitch: 3.19cqw;
}