/* ============================================================
   Save the Sharks — case study
   Loaded after styles.css. The same paper components as the other four,
   re-coloured from the brochure itself: its pale ocean blue, its pink-red,
   and the red of the translucent folder it comes in. Adds what this project
   needs: the cover's dimension drawing, the four parts of the inner page in
   tabs, and the brochure held up whole at the end.
   ============================================================ */

.theme-sts {
  --hero-bg:     #fbe4ec;   /* the brochure's pink-red, paled to a sheet */
  --sheet-pink:  #fbe4ec;   /* the punched sheets the drawings are mounted on */
  --card-blue:   #e8f1f9;   /* pale ocean paper: folder cards, photo cards */
  --tab-blue:    #3f7fb5;   /* deeper blue: tape, eyelets, rules, marks */
  --mock-blue:   #a9cbe6;   /* the brochure blue: mockup plate + active tab */
  --mock-blue-2: #d6e7f4;   /* inactive tab */
  --tab-hover:   #c2dbef;
  --flow-bg:     #fbe1e9;   /* pale pink paper */
  --tag-pink:    #f4a3bd;
  --highlight:   #f9cdd9;   /* the brochure's pink-red as a marker */
  --index-pink:  #f4a3bd;   /* section index bars and the back tab */
  --folder-red:  #c00000;   /* the translucent folder */
  --shark-pink:  #e4306c;   /* the brochure's red areas */
}

/* ---- hero -------------------------------------------------------------- */
/* the slip is the brochure's pale ocean blue on the pink sheet, and its
   marker the deeper pink the page uses for its tabs and tags */
.theme-sts .hero__card { background: var(--card-blue); }
.theme-sts .metric__label span { --highlight: var(--tag-pink); }

/* the photo of the folder takes the laptop's place, as a print */
.theme-sts .hero__photo {
  left: 4.5%;
  top: 30%;
  width: 60%;
  aspect-ratio: 3 / 2;            /* the sheet's photo frame, as in Little Wood Home */
  object-fit: cover;
  object-position: 40% 45%;
  border: 8px solid #fff;
  box-shadow: var(--paper-shadow);
  transform: rotate(-1deg);
}
@media (max-width: 1199px) {
  .theme-sts .hero__photo { width: 100%; transform: none; }
}

/* ---- the photograph beside the problem statement ---------------------- */
.brief { margin: 0; justify-self: center; max-width: 360px; }
.brief img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: var(--paper-shadow);
  transform: rotate(1.5deg);
}
.brief figcaption {
  margin-top: 16px;
  font-size: var(--small);
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}
.split__text > .h2:not(:first-child) { margin-top: clamp(40px, 4.44vw, 64px); }

/* ---- punched sheets ---------------------------------------------------- */
/* A drawing mounted on pale pink paper punched down its left edge, cut to the
   Relif site map's geometry, all in widths of the sheet (see the holes below). */
.punched {
  position: relative;
  container-type: inline-size;
  --pitch: 3.293cqw;          /* the site map's */
  --hole: 1.875cqw;
  background: var(--sheet-pink);
  box-shadow: var(--paper-shadow);
}
.punched__body {
  padding: var(--pad-t, 5.2cqw) var(--pad-r, 6.5cqw) var(--pad-b, 5.2cqw) var(--pad-l, 9.4cqw);
}
.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;
}
.punched__body > img { display: block; width: 100%; height: auto; }
[data-zoom] img { cursor: zoom-in; }

/* ---- the cover's dimensions -------------------------------------------- */
/* The outline as drawn in the file, with its two measurements set as a
   technical drawing: a ruled line across the top for the length, one down
   the left for the depth, each with end ticks and the figure set into it. */
.dims { margin: 0; }
.dims__art {
  position: relative;
  padding: 36px 0 0 52px;
}
/* the drawing is cut out round the shark: the shark itself is white paper on
   the pink sheet, with the folded panel shaded grey inside it */
.dims img { display: block; width: 100%; height: auto; }

.dims__w,
.dims__h {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--small);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.dims__w {
  left: 52px;
  right: 0;
  top: 8px;
  height: 16px;
  border-inline: 1px solid currentColor;
}
.dims__w::before,
.dims__h::before {
  content: "";
  position: absolute;
  background: currentColor;
}
.dims__w::before { left: 0; right: 0; top: 50%; height: 1px; }
.dims__h {
  left: 0;
  top: 36px;
  bottom: 0;
  width: 40px;
  border-block: 1px solid currentColor;
}
.dims__h::before { top: 0; bottom: 0; left: 50%; width: 1px; }
.dims__w span,
.dims__h span {
  position: relative;
  padding: 0 8px;
  background: var(--sheet-pink);   /* the sheet it is drawn on */
}
.dims__h span { padding: 6px 0; writing-mode: vertical-rl; transform: rotate(180deg); }
/* on a phone the measuring rules take less of the narrow sheet */
@media (max-width: 599px) {
  .dims__art { padding: 28px 0 0 30px; }
  .dims__w   { left: 30px; top: 4px; }
  .dims__h   { top: 28px; width: 22px; }
  .dims__w span, .dims__h span { font-size: 11px; }
}
.dims figcaption {
  margin-top: 12px;
  font-size: var(--small);
  color: var(--ink-soft);
  text-align: center;
}

/* ---- the quote the brochure opens on ---------------------------------- */
.quote {
  margin: 0;
  padding: 8px 0 8px 24px;
  border-left: 3px solid var(--shark-pink);
}
.quote p {
  margin: 0;
  font-family: Urbanist, sans-serif;
  font-weight: 600;
  font-size: var(--h4);
  line-height: 1.45;
}
.quote p + p { margin-top: 12px; }
.quote cite { display: block; margin-top: 12px; font-style: normal; font-size: var(--small); color: var(--ink-soft); }

/* ---- the four parts of the inner page ---------------------------------- */
.theme-sts .panel { min-width: 0; }
.theme-sts .mockup__body { padding: clamp(20px, 3.5cqw, 40px); }

.part {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(20px, 4cqw, 48px);
  align-items: center;
}
.part__art {
  --art-pad: clamp(12px, 2cqw, 24px);
  position: relative;
  margin: 0;
  height: clamp(320px, 52cqw, 560px);
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
/* whatever its shape, the part is shown whole inside the white sheet */
.part__art img {
  position: absolute;
  inset: var(--art-pad);
  display: block;
  width: calc(100% - var(--art-pad) * 2);
  height: calc(100% - var(--art-pad) * 2);
  max-width: none;
  object-fit: contain;
}
.part__text { display: grid; gap: 12px; }
.part__lead {
  margin: 0;
  font-family: Urbanist, sans-serif;
  font-weight: 600;
  font-size: var(--h4);
  line-height: 1.4;
}
.part__text p { margin: 0; font-size: var(--body); line-height: 1.6; }
/* the colour a note is about, marked in that colour */
.part__key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 2px;
  vertical-align: baseline;
}
.part__key--red  { background: var(--shark-pink); }
.part__key--blue { background: #84b4d8; }
.part__key--white { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }

@media (max-width: 767px) {
  .part { grid-template-columns: minmax(0, 1fr); }
  /* one column: the sheet takes the part's own shape instead of a fixed box */
  .part__art { height: auto; padding: var(--art-pad); }
  .part__art img {
    position: static;
    width: 100%;
    height: auto;
    max-height: 70vh;
  }
}

/* ---- postcard ---------------------------------------------------------- */
.postcard {
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 460px;
  padding: 16px 16px 20px;
  background: #fff;
  box-shadow: var(--paper-shadow);
  transform: rotate(-1.5deg);
}
.postcard img { display: block; width: 100%; height: auto; }

/* the brochure unfolded and held up whole: cut out, so it sits on the page
   itself rather than in a frame */
.whole { margin: 0; }
.whole img { display: block; width: 100%; height: auto; }
.whole figcaption {
  margin-top: 8px;
  font-size: var(--small);
  color: var(--ink-soft);
  text-align: center;
}

.footer a { color: inherit; }