/* flick-cards showpiece: Truus kit, a black section (Epilogue 900 lowercase, Lora italic swap word, DM Sans). */
:root { --paper: #f0ebe6; --black: #000; --orange: #f5693c; --pink: #f0befa; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--black); color: var(--paper);
  font: 400 17px/1.4 "DM Sans", system-ui, sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased;
}
.work {
  height: 100svh; min-height: 640px; display: grid; align-content: center; justify-items: center;
  row-gap: clamp(28px, 5.5vh, 68px); padding: 24px 0; overflow: clip;
}
h1 {
  margin: 0; font: 900 clamp(56px, 10.5vw, 112px)/.9 "Epilogue", sans-serif; letter-spacing: -.035em; text-align: center;
}
.loop { position: relative; display: inline-block; font: italic 400 1.04em/.9 "Lora", serif; letter-spacing: -.02em; padding: 0 .08em; }
.loop svg { position: absolute; left: -9%; top: -10%; width: 118%; height: 124%; overflow: visible; pointer-events: none; }
.loop path { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.flick {
  font-size: clamp(13px, min(1.9vw, 1.62vh), 20px);
  --flick-border: .375em solid var(--paper);
  --flick-card-bg: #000;
  gap: .4em;
}
.flick__media img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.flick__captions { height: 6.2em; }
.flick__caption h3 { margin: 0; font: 900 2.6em/1 "Epilogue", sans-serif; letter-spacing: -.03em; }
.flick__caption h3 em { font: italic 400 1.06em/1 "Lora", serif; letter-spacing: -.02em; }
.flick__caption p { margin: .45em 0 0; font-size: .95em; color: rgba(240, 235, 230, .62); }

@media (max-width: 767px) {
  .work { min-height: 600px; }
  .flick { font-size: 16px; --flick-card-w: 13.5em; --flick-stage-w: 24em; --flick-border: .25em solid var(--paper); }
  .flick__caption h3 { font-size: 2.1em; }
}