/* Shared by all four mockups: the hand-made fonts + hand-drawn marks. */
@font-face { font-family: "Hale Hand";   src: url(../../fonts/HaleHand.woff) format("woff");   font-display: block; }
@font-face { font-family: "Hale Marker"; src: url(../../fonts/HaleMarker.woff) format("woff"); font-display: block; }
@font-face { font-family: "Hale Type";   src: url(../../fonts/HaleType.woff) format("woff");   font-display: block; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* the design canvas is 1440 units wide and scales with the page */
.page { container-type: inline-size; max-width: 1760px; margin: 0 auto; position: relative; }
.page { --u: calc(100cqw / 1440); }
.comp { position: relative; }
.comp > .at { position: absolute; }

.mark { position: absolute; pointer-events: none; }
.mark > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.hand   { font-family: "Hale Hand", cursive; }
.marker { font-family: "Hale Marker", cursive; }
.type   { font-family: "Hale Type", monospace; }

/* placement: style="--x:60; --y:160; --w:400; --h:200; --r:-2; --fs:30" (design px) */
.at { left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u)); transform: rotate(calc(var(--r, 0) * 1deg)); }
[style*="--w"] { width: calc(var(--w) * var(--u)); }
[style*="--h"] { height: calc(var(--h) * var(--u)); }
[style*="--fs"] { font-size: calc(var(--fs) * var(--u)); }
.comp[style*="--h"] { height: calc(var(--h) * var(--u)); }

/* phones: compositions fall back to a single column in source order */
@media (max-width: 760px) {
  .page { --u: calc(100cqw / 560); }
  .comp { height: auto !important; padding: 28px 16px; }
  .comp > .at { position: relative; left: auto; top: auto; margin: 0 0 22px; max-width: 100%; }
  .comp > .at[style*="--w"] { width: auto; }
  .comp > .mark.at, .comp > .desk-only { display: none; }
}