:root{--lucky-field:oklch(0.92 0.022 125);--lucky-screen-shadow:6px 6px 18px rgba(8,23,46,.15)}

/* Figma 308:1119: preserve the 1080 × 540 composition and original image crops. */
.lucky-finds-hero{position:relative;container-type:inline-size;aspect-ratio:2;margin:0;overflow:hidden;border-radius:8px;background:var(--lucky-field)}
.lucky-finds-screen{position:absolute;top:10.740741%;height:78.333333%;overflow:hidden;border-radius:12px;box-shadow:var(--lucky-screen-shadow)}
.lucky-finds-screen-journal{left:16.203704%;width:19.537037%}
.lucky-finds-screen-capture{left:40.555556%;width:19.166667%}
.lucky-finds-screen-back{left:64.537037%;width:19.259259%}
.lucky-finds-hero .lucky-finds-screen img{position:absolute;max-width:none}
.lucky-finds-hero .lucky-finds-screen-journal img{height:137.88%;width:339.61%;left:-227.06%;top:-25.3%}
.lucky-finds-hero .lucky-finds-screen-capture img{height:137.63%;width:236.47%;left:-122.59%;top:-25.09%}
.lucky-finds-hero .lucky-finds-screen-back img{height:137.95%;width:344.26%;left:-230.49%;top:-25.03%}

/* The article shell, reading rail, typography, metadata and navigation are shared with live case studies. */
.lucky-finds-study .skip{position:absolute;left:16px;top:16px;z-index:30;transform:translateY(-180%);padding:8px 16px;background:var(--brand-paper);color:var(--color-link)}
.lucky-finds-study .skip:focus{transform:translateY(0)}

.feature-thumbnail .lucky-finds-hero{background:transparent}

/* Crop comparison labels out of the source graphics without altering app UI. */
.lucky-screenshot-field{container-type:inline-size;overflow:hidden;padding:5% 0;border-radius:8px;background:var(--lucky-field)}
.lucky-screenshot-row{display:grid;grid-template-columns:repeat(var(--shot-count),minmax(0,1fr));gap:2.4%;width:90%;margin:auto}
.lucky-shot{position:relative;min-width:0;overflow:hidden;border-radius:12px;box-shadow:var(--lucky-screen-shadow)}
.lucky-finds-study .lucky-shot img{position:absolute;display:block;max-width:none;height:auto;margin:0;border:0;border-radius:0;box-shadow:none}
@media(max-width:600px){
  .lucky-screenshot-field{padding-block:24px}
  .lucky-screenshot-row{width:86%;grid-template-columns:repeat(var(--shot-count),minmax(0,1fr));gap:4%}
}

.lucky-video-stage{display:flex;justify-content:center;padding:32px;background:var(--lucky-field);border-radius:8px}
.lucky-video-stage video{display:block;width:auto;height:auto;max-width:100%;max-height:480px;aspect-ratio:590/1198;border-radius:12px;box-shadow:var(--lucky-screen-shadow)}
.lucky-video-figure .caption{margin-top:12px}
.lucky-sketch-pair{display:grid;gap:24px;align-items:center}
.lucky-direction-sketches{grid-template-columns:0.85fr 1.15fr}
.lucky-capture-sketches{grid-template-columns:2.5fr 1fr}
.lucky-finds-study .lucky-design-board .diagram-link{max-width:480px;margin-inline:auto}
.lucky-finds-study .lucky-entry-sketch .diagram-link{max-width:360px;margin-inline:auto}
@media(max-width:600px){
  .lucky-video-stage{padding:24px}
  .lucky-video-stage video{max-height:440px}
  .lucky-sketch-pair{grid-template-columns:1fr}
  .lucky-capture-sketches .diagram-link:last-child{max-width:280px;margin-inline:auto}
}