/* icon-callout-loop showpiece, dressed in the Heron kit: warm grey grainy paper ruled by hairlines, a pen drawing
   that carries the page, and one signal orange for the callouts. Pure CSS loop on a 5.25 s clock (twice per video). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background-color: #f4f4ee;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .16 0 0 0 0 .14 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  color: #282828;
  font: 500 15px/1.45 "Inter Tight", system-ui, sans-serif;
}
.sheet { position: fixed; inset: 12px; border: 1px solid #b3b3af; pointer-events: none; z-index: 0; }
.frame { position: absolute; left: 50%; top: 50%; width: 1050px; height: 1200px; transform: translate(-50%, -50%); z-index: 1; }

.head { position: absolute; left: 36px; right: 36px; top: 56px; height: 214px; border-bottom: 1px solid #b3b3af; padding: 0 0 0 4px; }
.eyebrow { margin: 0 0 22px; font: 500 13px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: #626260; }
.head h1 { margin: 0; font: 600 68px/.96 "Inter Tight", system-ui, sans-serif; letter-spacing: -.025em; text-transform: uppercase; }

.cell { position: absolute; left: 36px; right: 36px; top: 284px; height: 860px; container-type: inline-size; }
.cell .art { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; }
.plus { position: absolute; width: 13px; height: 13px; }
.plus::before, .plus::after { content: ""; position: absolute; background: #626260; }
.plus::before { left: 6px; top: 0; width: 1px; height: 13px; }
.plus::after { top: 6px; left: 0; height: 1px; width: 13px; }
.plus.tl { left: -6px; top: -6px; } .plus.tr { right: -6px; top: -6px; } .plus.bl { left: -6px; bottom: -6px; } .plus.br { right: -6px; bottom: -6px; }

/* the part, set big: 5.25 s so two loops fill the 10.5 s video exactly */
.icl { --icl-cycle: 5.25s; --icl-mark: 28px; --icl-inset: 14px; --icl-ring-scale: 1.5; --icl-border: 1.5px; }
.icl__icon svg { width: 40%; }
.icl__body { padding: calc(var(--icl-inset) + var(--icl-mark) + 14px) 26px 28px; }
.icl__body small { display: block; font: 500 15px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; opacity: .85; margin-bottom: 12px; }
.icl__body b { display: block; font: 600 38px/1 "Inter Tight", system-ui, sans-serif; letter-spacing: -.02em; text-transform: uppercase; }
.icl__body i { display: block; font-style: normal; font-size: 20px; line-height: 1.3; opacity: .92; margin-top: 10px; }