luckiest-co 1.0.32 → 1.0.34

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-overview-stepper.html

@@ -14,7 +14,7 @@
     <style>
       html, body { margin: 0; }
       #t1-ov-step {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--paper); color: var(--ink);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -35,7 +35,7 @@
 
       /* marker title */
       #t1-ov-step .title {
-        position: absolute; top: 88px; left: 50%; transform: translateX(-50%) skewX(var(--marker-skew));
+        position: absolute; top: calc(var(--safe-t) + 34px); left: 50%; transform: translateX(-50%) skewX(var(--marker-skew));
         background: var(--yellow); padding: 8px 28px; z-index: 3;
         font-weight: var(--wt-black); font-size: var(--size-title); letter-spacing: var(--track-tight);
         text-transform: uppercase; white-space: nowrap;
@@ -43,7 +43,7 @@
 
       /* intro */
       #t1-ov-step .intro {
-        position: absolute; top: 230px; left: 50%; transform: translateX(-50%);
+        position: absolute; top: calc(var(--safe-t) + 176px); left: 50%; transform: translateX(-50%);
         width: 1100px; text-align: center; z-index: 3;
         font-family: var(--font-label); font-weight: var(--wt-reg);
         font-size: var(--size-body); line-height: 1.4; color: var(--muted);
@@ -51,7 +51,7 @@
 
       /* stepper track */
       #t1-ov-step .track-wrap {
-        position: absolute; left: 160px; right: 160px; top: 430px; height: 16px; z-index: 2;
+        position: absolute; left: calc(var(--safe-l) + 64px); right: calc(var(--safe-r) + 64px); top: 430px; height: 16px; z-index: 2;
       }
       #t1-ov-step .track-bg {
         position: absolute; inset: 0;
@@ -66,7 +66,7 @@
 
       /* step nodes */
       #t1-ov-step .nodes {
-        position: absolute; left: 160px; right: 160px; top: 340px; z-index: 3;
+        position: absolute; left: calc(var(--safe-l) + 64px); right: calc(var(--safe-r) + 64px); top: 340px; z-index: 3;
         display: flex; justify-content: space-between; align-items: center;
       }
       #t1-ov-step .step {
@@ -76,7 +76,7 @@
         width: 120px; height: 120px; border-radius: 50%;
         background: var(--ink); color: var(--paper);
         display: flex; align-items: center; justify-content: center;
-        font-weight: var(--wt-black); font-size: 64px; font-variant-numeric: tabular-nums;
+        font-weight: var(--wt-black); font-size: calc(64px * var(--type)); font-variant-numeric: tabular-nums;
         border: 6px solid var(--ink); box-shadow: 6px 8px 0 rgba(23,19,14,0.18);
       }
       #t1-ov-step .step-label {
@@ -95,11 +95,46 @@
 
       /* source */
       #t1-ov-step .source {
-        position: absolute; left: 160px; bottom: 60px; z-index: 4;
+        position: absolute; left: calc(var(--safe-l) + 64px); bottom: calc(var(--safe-b) + 6px); z-index: 4;
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-tiny); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted);
       }
+
+      /* Vertical: the four steps stack as rows (circle left, label right) with the track running
+         down through the circles; the horizontal fill segments are hidden. */
+      [data-format="vertical"] #t1-ov-step .title, [data-format="square"] #t1-ov-step .title,
+      [data-format="vertical"] #t1-ov-step .intro, [data-format="square"] #t1-ov-step .intro {
+        left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2);
+      }
+      [data-format="vertical"] #t1-ov-step .title, [data-format="square"] #t1-ov-step .title {
+        top: var(--safe-t); width: max-content; max-width: calc(var(--w) - var(--safe-l) - var(--safe-r) - 56px);
+        white-space: normal; text-align: center;
+      }
+      [data-format="vertical"] #t1-ov-step .title { font-size: calc(64px * var(--type)); }
+      [data-format="vertical"] #t1-ov-step .intro, [data-format="square"] #t1-ov-step .intro { top: calc(var(--safe-t) + 116px); width: calc(var(--w) - var(--safe-l) - var(--safe-r)); }
+      [data-format="square"] #t1-ov-step .intro { top: calc(var(--safe-t) + 150px); }
+      [data-format="vertical"] #t1-ov-step .nodes {
+        left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 270px);
+        flex-direction: column; align-items: stretch; gap: 36px;
+      }
+      [data-format="vertical"] #t1-ov-step .step { flex-direction: row; width: auto; }
+      [data-format="vertical"] #t1-ov-step .step-circle { flex: 0 0 auto; }
+      [data-format="vertical"] #t1-ov-step .step-dot { display: none; }
+      [data-format="vertical"] #t1-ov-step .step-label {
+        margin: 0 0 0 40px; text-align: left; max-width: none; font-size: calc(30px * var(--type));
+      }
+      [data-format="vertical"] #t1-ov-step .track-wrap {
+        left: calc(var(--safe-l) + 60px - 8px); right: auto; width: 16px;
+        top: calc(var(--safe-t) + 270px + 66px - 8px); height: 504px;
+      }
+      [data-format="vertical"] #t1-ov-step .seg { display: none; }
+      [data-format="vertical"] #t1-ov-step .source, [data-format="square"] #t1-ov-step .source { left: var(--safe-l); bottom: var(--safe-b); }
+      /* Square: same horizontal stepper with narrower steps, fitted to the safe width. */
+      [data-format="square"] #t1-ov-step .nodes { left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 290px); align-items: flex-start; }
+      [data-format="square"] #t1-ov-step .track-wrap { left: calc(var(--safe-l) + 110px); right: calc(var(--safe-r) + 110px); top: calc(var(--safe-t) + 290px + 66px - 8px); }
+      [data-format="square"] #t1-ov-step .step { width: 220px; }
+      [data-format="square"] #t1-ov-step .step-label { max-width: 210px; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-overview-toc.html

@@ -12,7 +12,7 @@
     <style>
       html, body { margin: 0; }
       #t1-ov-toc {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--paper); color: var(--ink);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -34,7 +34,7 @@
 
       /* chapter heading - big Fraunces italic, top left */
       #t1-ov-toc .title-wrap {
-        position: absolute; top: 64px; left: 130px; right: 130px; z-index: 3;
+        position: absolute; top: calc(var(--safe-t) + 10px); left: calc(var(--safe-l) + 34px); right: calc(var(--safe-r) + 34px); z-index: 3;
         border-bottom: 6px double var(--ink); padding-bottom: 24px;
       }
       #t1-ov-toc .chapter-label {
@@ -43,7 +43,7 @@
         text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
       }
       #t1-ov-toc .title {
-        font-weight: var(--wt-black); font-size: 100px; font-style: italic;
+        font-weight: var(--wt-black); font-size: calc(100px * var(--type)); font-style: italic;
         letter-spacing: var(--track-tight); line-height: 0.95; color: var(--ink);
       }
       /* small yellow dot accent after title */
@@ -55,7 +55,7 @@
 
       /* contents entries */
       #t1-ov-toc .entries {
-        position: absolute; top: 260px; left: 130px; right: 130px;
+        position: absolute; top: calc(var(--safe-t) + 206px); left: calc(var(--safe-l) + 34px); right: calc(var(--safe-r) + 34px);
         display: flex; flex-direction: column; gap: 0; z-index: 3;
       }
       #t1-ov-toc .entry {
@@ -74,7 +74,7 @@
       }
       #t1-ov-toc .entry-topic {
         flex: 0 0 auto;
-        font-weight: var(--wt-black); font-size: 56px;
+        font-weight: var(--wt-black); font-size: calc(56px * var(--type));
         letter-spacing: var(--track-tight); line-height: 1.0; color: var(--ink);
       }
       /* leader dots - overflow clip trick */
@@ -82,13 +82,13 @@
         flex: 1 1 auto; overflow: hidden; align-self: flex-end;
         margin: 0 24px 10px 24px;
         font-family: var(--font-label); font-weight: var(--wt-reg);
-        font-size: 22px; letter-spacing: 0.3em; color: rgba(23,19,14,0.3);
+        font-size: calc(22px * var(--type)); letter-spacing: 0.3em; color: rgba(23,19,14,0.3);
         white-space: nowrap;
         /* repeated dot string */
       }
       #t1-ov-toc .entry-page {
         flex: 0 0 140px; text-align: right;
-        font-weight: var(--wt-black); font-size: 56px;
+        font-weight: var(--wt-black); font-size: calc(56px * var(--type));
         letter-spacing: var(--track-tight); line-height: 1.0; color: var(--ink);
         font-variant-numeric: tabular-nums;
       }
@@ -98,11 +98,29 @@
       }
 
       #t1-ov-toc .source {
-        position: absolute; left: 130px; bottom: 88px;
+        position: absolute; left: calc(var(--safe-l) + 34px); bottom: calc(var(--safe-b) + 34px);
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-tiny); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted); z-index: 3;
       }
+
+      /* Vertical and square: heading and contents span the safe box, smaller heading and entries,
+         long topics may wrap, source at the bottom left of the safe area. */
+      [data-format="vertical"] #t1-ov-toc .title-wrap, [data-format="square"] #t1-ov-toc .title-wrap { top: var(--safe-t); left: var(--safe-l); right: var(--safe-r); }
+      [data-format="vertical"] #t1-ov-toc .title { font-size: calc(80px * var(--type)); }
+      [data-format="square"] #t1-ov-toc .title { font-size: 80px; }
+      [data-format="vertical"] #t1-ov-toc .entries, [data-format="square"] #t1-ov-toc .entries { left: var(--safe-l); right: var(--safe-r); }
+      [data-format="vertical"] #t1-ov-toc .entries { top: calc(var(--safe-t) + 300px); }
+      [data-format="square"] #t1-ov-toc .entries { top: calc(var(--safe-t) + 200px); }
+      [data-format="vertical"] #t1-ov-toc .entry { padding: 30px 0; }
+      [data-format="square"] #t1-ov-toc .entry { padding: 30px 0; }
+      [data-format="vertical"] #t1-ov-toc .entry-topic { flex: 0 1 auto; font-size: calc(52px * var(--type)); }
+      [data-format="vertical"] #t1-ov-toc .entry-page { flex-basis: 100px; font-size: calc(52px * var(--type)); }
+      [data-format="vertical"] #t1-ov-toc .dots { margin: 0 16px 10px 16px; }
+      [data-format="vertical"] #t1-ov-toc .dots, [data-format="square"] #t1-ov-toc .dots { flex: 1 1 0; }
+      [data-format="square"] #t1-ov-toc .entry-topic { flex: 0 1 auto; }
+      [data-format="square"] #t1-ov-toc .entry-page { flex-basis: 110px; }
+      [data-format="vertical"] #t1-ov-toc .source, [data-format="square"] #t1-ov-toc .source { left: var(--safe-l); bottom: var(--safe-b); }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-overview-vtimeline.html

@@ -13,7 +13,7 @@
     <style>
       html, body { margin: 0; }
       #t1-ov-vtime {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--paper); color: var(--ink);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -34,7 +34,7 @@
 
       /* marker title */
       #t1-ov-vtime .title {
-        position: absolute; top: 88px; left: 50%; transform: translateX(-50%) skewX(var(--marker-skew));
+        position: absolute; top: calc(var(--safe-t) + 34px); left: 50%; transform: translateX(-50%) skewX(var(--marker-skew));
         background: var(--yellow); padding: 8px 28px; z-index: 3;
         font-weight: var(--wt-black); font-size: var(--size-title); letter-spacing: var(--track-tight);
         text-transform: uppercase; white-space: nowrap;
@@ -42,16 +42,16 @@
 
       /* vertical spine */
       #t1-ov-vtime .spine {
-        position: absolute; left: 680px; top: 240px; width: 8px; height: 700px;
+        position: absolute; left: 680px; top: 280px; width: 8px; height: 680px;
         background: var(--ink); transform-origin: top center; z-index: 2;
       }
 
       /* node rows */
       #t1-ov-vtime .nodes {
-        position: absolute; left: 0; top: 240px; width: 1920px; z-index: 3;
+        position: absolute; left: 0; top: calc(280px - 55px); width: var(--w); z-index: 3;
       }
       #t1-ov-vtime .node {
-        position: absolute; left: 0; width: 1920px; display: flex; align-items: center;
+        position: absolute; left: 0; width: var(--w); display: flex; align-items: center;
       }
       /* diamond node at spine center (left:680px, 8px wide → center=684px) */
       #t1-ov-vtime .node-diamond {
@@ -61,7 +61,7 @@
       }
       #t1-ov-vtime .node-year {
         position: absolute; left: 280px; top: 50%; transform: translateY(-50%);
-        font-weight: var(--wt-black); font-size: 90px; line-height: 1;
+        font-weight: var(--wt-black); font-size: calc(90px * var(--type)); line-height: 1;
         letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink);
       }
       #t1-ov-vtime .node-label {
@@ -74,11 +74,37 @@
 
       /* source */
       #t1-ov-vtime .source {
-        position: absolute; right: 130px; bottom: 60px; z-index: 4;
+        position: absolute; right: calc(var(--safe-r) + 34px); bottom: calc(var(--safe-b) + 6px); z-index: 4;
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-tiny); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted);
       }
+
+      /* Node rows are centred on the spine (row height 110, so .nodes sits 55px above the spine top).
+         Vertical: spine down the left of the safe box, year stacked above its event to the right.
+         Square: same left-year / right-event layout as landscape, compressed to the safe width. */
+      [data-format="vertical"] #t1-ov-vtime .title, [data-format="square"] #t1-ov-vtime .title {
+        top: var(--safe-t); left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2);
+      }
+      [data-format="vertical"] #t1-ov-vtime .title { font-size: calc(70px * var(--type)); }
+      [data-format="vertical"] #t1-ov-vtime .spine { left: calc(var(--safe-l) + 28px); top: calc(var(--safe-t) + 215px); height: 625px; }
+      [data-format="vertical"] #t1-ov-vtime .nodes { top: calc(var(--safe-t) + 215px - 55px); }
+      [data-format="vertical"] #t1-ov-vtime .node-diamond { left: var(--safe-l); }
+      [data-format="vertical"] #t1-ov-vtime .node-year { left: calc(var(--safe-l) + 100px); top: calc(50% - 56px); font-size: calc(64px * var(--type)); }
+      [data-format="vertical"] #t1-ov-vtime .node-label {
+        /* a fixed two-line box, so its first line always starts just under the year */
+        left: calc(var(--safe-l) + 100px); top: calc(50% - 10px + 1.2em); height: 2.4em; font-size: calc(36px * var(--type));
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r) - 100px);
+      }
+      [data-format="square"] #t1-ov-vtime .spine { left: calc(var(--safe-l) + 260px); top: calc(var(--safe-t) + 190px); height: 620px; }
+      [data-format="square"] #t1-ov-vtime .nodes { top: calc(var(--safe-t) + 190px - 55px); }
+      [data-format="square"] #t1-ov-vtime .node-diamond { left: calc(var(--safe-l) + 232px); }
+      [data-format="square"] #t1-ov-vtime .node-year { left: var(--safe-l); font-size: 76px; }
+      [data-format="square"] #t1-ov-vtime .node-label {
+        left: calc(var(--safe-l) + 340px); font-size: 44px;
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r) - 340px);
+      }
+      [data-format="vertical"] #t1-ov-vtime .source, [data-format="square"] #t1-ov-vtime .source { right: var(--safe-r); bottom: var(--safe-b); }
     </style>
   </head>
   <body>
@@ -105,8 +131,8 @@
       ];
 
       const SPINE_TOP  = 240;   // px from top of comp (matches CSS)
-      const SPINE_H    = 700;
-      const STEP       = SPINE_H / (nodes.length - 1);   // 233px between nodes
+      const SPINE_H    = document.querySelector("#t1-ov-vtime .spine").offsetHeight;   // 680 in landscape, set per format in CSS
+      const STEP       = SPINE_H / (nodes.length - 1);   // 227px between nodes in landscape
 
       const container = document.getElementById("vtime-nodes");
       nodes.forEach((n, i) => {

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-section-bracket.html

@@ -11,7 +11,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-bracket {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--paper); color: var(--ink);
         font-family: var(--font-display); overflow: hidden;
         display: flex; align-items: center; justify-content: center;
@@ -32,7 +32,7 @@
         background: radial-gradient(120% 120% at 50% 50%, transparent 56%, rgba(23,19,14,0.14) 100%);
       }
       #t1-sec-bracket .wrap { position: relative; z-index: 3; display: flex; align-items: center; gap: 50px; }
-      #t1-sec-bracket .br { font-weight: var(--wt-thin); font-size: 540px; line-height: 0.7; color: var(--ink); }
+      #t1-sec-bracket .br { font-weight: var(--wt-thin); font-size: calc(540px * var(--type)); line-height: 0.7; color: var(--ink); }
       #t1-sec-bracket .center { text-align: center; max-width: 960px; }
       #t1-sec-bracket .kicker {
         font-family: var(--font-label); font-weight: var(--wt-bold);
@@ -40,16 +40,28 @@
         text-transform: uppercase; color: var(--muted); margin-bottom: 22px;
       }
       #t1-sec-bracket .headline {
-        font-weight: var(--wt-black); font-size: 116px; line-height: 0.98; letter-spacing: var(--track-tight);
+        font-weight: var(--wt-black); font-size: calc(116px * var(--type)); line-height: 0.98; letter-spacing: var(--track-tight);
       }
       #t1-sec-bracket .headline em { font-style: italic; font-weight: var(--wt-thin); }
       #t1-sec-bracket .underline { margin: 26px auto 0; width: 0; height: 8px; background: var(--yellow); }
       #t1-sec-bracket .source {
-        position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 3;
+        position: absolute; bottom: calc(var(--safe-b) + 42px); left: 50%; transform: translateX(-50%); z-index: 3;
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-tiny); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted);
       }
+
+      /* Vertical and square: smaller brackets and a narrower headline column so the bracketed
+         block fits the safe width; the block is centered on the safe box, not the frame. */
+      [data-format="vertical"] #t1-sec-bracket .wrap { top: calc((var(--safe-t) - var(--safe-b)) / 2); left: calc((var(--safe-l) - var(--safe-r)) / 2); gap: 24px; }
+      [data-format="square"] #t1-sec-bracket .wrap { gap: 30px; }
+      [data-format="vertical"] #t1-sec-bracket .br { font-size: calc(380px * var(--type)); }
+      [data-format="square"] #t1-sec-bracket .br { font-size: 420px; }
+      [data-format="vertical"] #t1-sec-bracket .center { max-width: 520px; }
+      [data-format="square"] #t1-sec-bracket .center { max-width: 640px; }
+      [data-format="vertical"] #t1-sec-bracket .headline { font-size: calc(84px * var(--type)); }
+      [data-format="square"] #t1-sec-bracket .headline { font-size: 100px; }
+      [data-format="vertical"] #t1-sec-bracket .source, [data-format="square"] #t1-sec-bracket .source { bottom: var(--safe-b); }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-section-circle.html

@@ -12,7 +12,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-circle {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--paper); color: var(--ink);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -36,7 +36,7 @@
         border-radius: 50%; background: var(--yellow); z-index: 1;
       }
       #t1-sec-circle .kicker {
-        position: absolute; left: 150px; top: 300px; z-index: 3;
+        position: absolute; left: calc(var(--safe-l) + 54px); top: calc(var(--safe-t) + 246px); z-index: 3;
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-label); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--ink);
@@ -46,13 +46,13 @@
         background: var(--red); margin-right: 18px; vertical-align: middle;
       }
       #t1-sec-circle .headline {
-        position: absolute; left: 150px; top: 360px; width: 1160px; z-index: 3;
+        position: absolute; left: calc(var(--safe-l) + 54px); top: calc(var(--safe-t) + 306px); width: 1160px; z-index: 3;
         font-weight: var(--wt-thin); font-size: var(--size-display);
         line-height: 0.96; letter-spacing: var(--track-tight); color: var(--ink);
       }
       #t1-sec-circle .headline em { font-style: italic; font-weight: var(--wt-black); }
       #t1-sec-circle .scrap {
-        position: absolute; right: 150px; top: 250px; width: 470px; height: 560px;
+        position: absolute; right: calc(var(--safe-r) + 54px); top: calc(var(--safe-t) + 196px); width: 470px; height: 560px;
         background-color: var(--paper-2); background-image: var(--tex-halftone);
         background-size: var(--tex-halftone-size);
         outline: 10px solid var(--orange); outline-offset: -10px;
@@ -64,11 +64,27 @@
         font-size: var(--size-tiny); letter-spacing: var(--track-wide);
         color: var(--muted); background: var(--yellow); padding: 2px 10px;
       }      #t1-sec-circle .source {
-        position: absolute; left: 150px; bottom: 96px; z-index: 3;
+        position: absolute; left: calc(var(--safe-l) + 54px); bottom: calc(var(--safe-b) + 42px); z-index: 3;
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-tiny); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted);
       }
+
+      /* Vertical and square: kicker and headline stacked from the top of the safe area, the
+         circle behind "rewired", the scrap tucked lower right, source at the safe bottom. */
+      [data-format="vertical"] #t1-sec-circle .stage { transform-origin: 46% 40%; }
+      /* text keeps ~40px clear of the safe edges because the stage zooms 6% toward its origin */
+      [data-format="vertical"] #t1-sec-circle .kicker, [data-format="square"] #t1-sec-circle .kicker { left: calc(var(--safe-l) + 40px); top: calc(var(--safe-t) + 36px); }
+      [data-format="vertical"] #t1-sec-circle .headline, [data-format="square"] #t1-sec-circle .headline {
+        left: calc(var(--safe-l) + 40px); top: calc(var(--safe-t) + 96px); width: calc(var(--w) - var(--safe-l) - var(--safe-r) - 80px);
+      }
+      [data-format="vertical"] #t1-sec-circle .headline { font-size: calc(120px * var(--type)); }
+      [data-format="square"] #t1-sec-circle .headline { font-size: 116px; width: 560px; }
+      [data-format="vertical"] #t1-sec-circle .circle { left: calc(var(--safe-l) + 170px); top: calc(var(--safe-t) + 340px); width: 290px; height: 290px; }
+      [data-format="square"] #t1-sec-circle .circle { left: calc(var(--safe-l) + 150px); top: calc(var(--safe-t) + 270px); width: 260px; height: 260px; }
+      [data-format="vertical"] #t1-sec-circle .scrap { right: calc(var(--safe-r) + 30px); top: auto; bottom: calc(var(--safe-b) + 84px); width: 280px; height: 240px; }
+      [data-format="square"] #t1-sec-circle .scrap { right: calc(var(--safe-r) + 30px); top: calc(var(--safe-t) + 200px); width: 300px; height: 400px; }
+      [data-format="vertical"] #t1-sec-circle .source, [data-format="square"] #t1-sec-circle .source { left: calc(var(--safe-l) + 40px); bottom: calc(var(--safe-b) + 34px); }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-section-classified.html

@@ -12,7 +12,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-classified {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--paper-2); color: var(--ink);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -32,7 +32,7 @@
       }
       /* the pinned paper card */
       #t1-sec-classified .card {
-        position: absolute; left: 360px; top: 300px; width: 1200px; height: 470px;
+        position: absolute; left: calc(var(--safe-l) + 264px); top: calc(var(--safe-t) + 246px); width: 1200px; height: 470px;
         background: var(--paper); z-index: 2; transform: rotate(-1.6deg);
         box-shadow: 0 24px 50px rgba(23,19,14,0.32);
         display: flex; flex-direction: column; align-items: center; justify-content: center;
@@ -43,7 +43,7 @@
         text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
       }
       #t1-sec-classified .card .title {
-        font-weight: var(--wt-black); font-size: 116px; line-height: 0.96;
+        font-weight: var(--wt-black); font-size: calc(116px * var(--type)); line-height: 0.96;
         letter-spacing: var(--track-tight); text-align: center; max-width: 1040px;
       }
       /* tape pieces */
@@ -59,19 +59,37 @@
         letter-spacing: 0.08em; text-transform: uppercase; color: var(--red);
         border: 6px solid var(--red); padding: 10px 22px; border-radius: 6px; opacity: 0.92;
       }
-      #t1-sec-classified .stamp.main { right: 300px; top: 600px; font-size: 60px; transform: rotate(-12deg); }
-      #t1-sec-classified .stamp.sub  { left: 380px; top: 250px; font-size: 30px; transform: rotate(8deg); }
+      #t1-sec-classified .stamp.main { right: calc(var(--safe-r) + 204px); top: calc(var(--safe-t) + 546px); font-size: calc(60px * var(--type)); transform: rotate(-12deg); }
+      #t1-sec-classified .stamp.sub  { left: calc(var(--safe-l) + 284px); top: calc(var(--safe-t) + 196px); font-size: calc(30px * var(--type)); transform: rotate(8deg); }
       /* magnifier */
       #t1-sec-classified .mag { position: absolute; left: 210px; bottom: 150px; z-index: 6; transform: rotate(12deg); }
       #t1-sec-classified .mag .lens { width: 190px; height: 190px; border: 14px solid var(--ink); border-radius: 50%; background: rgba(255,255,255,0.12); }
       #t1-sec-classified .mag .handle { position: absolute; right: -64px; bottom: -54px; width: 96px; height: 22px; background: var(--ink); border-radius: 11px; transform: rotate(45deg); }
       /* sticky note */
       #t1-sec-classified .note {
-        position: absolute; right: 180px; top: 250px; z-index: 6; width: 230px; height: 200px;
+        position: absolute; right: calc(var(--safe-r) + 84px); top: calc(var(--safe-t) + 196px); z-index: 6; width: 230px; height: 200px;
         background: var(--yellow); transform: rotate(7deg); box-shadow: 0 10px 22px rgba(23,19,14,0.22);
         display: flex; align-items: center; justify-content: center; text-align: center;
-        font-family: var(--font-hand); font-size: 50px; color: var(--ink); padding: 16px;
+        font-family: var(--font-hand); font-size: calc(50px * var(--type)); color: var(--ink); padding: 16px;
       }
+
+      /* Vertical and square: the card spans the safe width, sticky note above it on the right,
+         stamps pinned to its top-left and bottom-right edges, magnifier below. */
+      [data-format="vertical"] #t1-sec-classified .card { left: var(--safe-l); top: calc(var(--safe-t) + 190px); width: calc(var(--w) - var(--safe-l) - var(--safe-r)); height: 480px; }
+      [data-format="square"] #t1-sec-classified .card { left: calc(var(--safe-l) + 20px); top: calc(var(--safe-t) + 230px); width: calc(var(--w) - var(--safe-l) - var(--safe-r) - 40px); height: 420px; }
+      [data-format="vertical"] #t1-sec-classified .card .title { max-width: 640px; }
+      [data-format="square"] #t1-sec-classified .card .title { max-width: 760px; font-size: 104px; }
+      [data-format="vertical"] #t1-sec-classified .tape.tl { left: calc(var(--safe-l) - 40px); top: calc(var(--safe-t) + 170px); }
+      [data-format="vertical"] #t1-sec-classified .tape.br { right: calc(var(--safe-r) - 40px); bottom: auto; top: calc(var(--safe-t) + 640px); }
+      [data-format="square"] #t1-sec-classified .tape.tl { left: calc(var(--safe-l) - 20px); top: calc(var(--safe-t) + 210px); }
+      [data-format="square"] #t1-sec-classified .tape.br { right: calc(var(--safe-r) - 20px); bottom: auto; top: calc(var(--safe-t) + 630px); }
+      [data-format="vertical"] #t1-sec-classified .stamp.sub { left: calc(var(--safe-l) + 30px); top: calc(var(--safe-t) + 150px); }
+      [data-format="square"] #t1-sec-classified .stamp.sub { left: calc(var(--safe-l) + 40px); top: calc(var(--safe-t) + 190px); }
+      [data-format="vertical"] #t1-sec-classified .stamp.main { right: calc(var(--safe-r) + 20px); top: calc(var(--safe-t) + 600px); }
+      [data-format="square"] #t1-sec-classified .stamp.main { right: calc(var(--safe-r) + 30px); top: calc(var(--safe-t) + 580px); }
+      [data-format="vertical"] #t1-sec-classified .note, [data-format="square"] #t1-sec-classified .note { right: calc(var(--safe-r) + 10px); top: calc(var(--safe-t) + 10px); }
+      [data-format="vertical"] #t1-sec-classified .mag { left: calc(var(--safe-l) + 20px); bottom: calc(var(--safe-b) + 10px); }
+      [data-format="square"] #t1-sec-classified .mag { left: calc(var(--safe-l) + 10px); bottom: calc(var(--safe-b) + 50px); }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-section-collage.html

@@ -12,7 +12,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-collage {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--paper); color: var(--ink);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -36,14 +36,14 @@
         background-image: var(--tex-halftone); background-size: var(--tex-halftone-size);
         box-shadow: 8px 12px 0 rgba(23,19,14,0.12);
       }
-      #t1-sec-collage .s1 { left: 120px; top: 150px; width: 300px; height: 220px; outline: 8px solid var(--ink); outline-offset: -8px; transform: rotate(-5deg); }
-      #t1-sec-collage .s2 { right: 130px; top: 120px; width: 360px; height: 250px; outline: 8px solid var(--yellow); outline-offset: -8px; transform: rotate(4deg); }
-      #t1-sec-collage .s3 { right: 200px; bottom: 130px; width: 280px; height: 330px; outline: 8px solid var(--orange); outline-offset: -8px; transform: rotate(-3deg); }
+      #t1-sec-collage .s1 { left: calc(var(--safe-l) + 24px); top: calc(var(--safe-t) + 96px); width: 300px; height: 220px; outline: 8px solid var(--ink); outline-offset: -8px; transform: rotate(-5deg); }
+      #t1-sec-collage .s2 { right: calc(var(--safe-r) + 34px); top: calc(var(--safe-t) + 66px); width: 360px; height: 250px; outline: 8px solid var(--yellow); outline-offset: -8px; transform: rotate(4deg); }
+      #t1-sec-collage .s3 { right: calc(var(--safe-r) + 104px); bottom: calc(var(--safe-b) + 76px); width: 280px; height: 330px; outline: 8px solid var(--orange); outline-offset: -8px; transform: rotate(-3deg); }
       /* shapes */
-      #t1-sec-collage .ycirc { position: absolute; left: 150px; bottom: 160px; width: 220px; height: 220px; background: var(--yellow); border-radius: 50%; }
+      #t1-sec-collage .ycirc { position: absolute; left: calc(var(--safe-l) + 54px); bottom: calc(var(--safe-b) + 106px); width: 220px; height: 220px; background: var(--yellow); border-radius: 50%; }
       #t1-sec-collage .wordmark {
-        position: absolute; left: 188px; bottom: 198px; width: 150px; text-align: center; z-index: 4;
-        font-style: italic; font-weight: var(--wt-black); font-size: 70px; color: var(--ink);
+        position: absolute; left: calc(var(--safe-l) + 92px); bottom: calc(var(--safe-b) + 144px); width: 150px; text-align: center; z-index: 4;
+        font-style: italic; font-weight: var(--wt-black); font-size: calc(70px * var(--type)); color: var(--ink);
       }
       /* title */
       #t1-sec-collage .title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1100px; text-align: center; z-index: 3; }
@@ -52,8 +52,26 @@
         font-size: var(--size-label); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
       }
-      #t1-sec-collage .l1 { display: block; font-weight: var(--wt-black); font-size: 128px; line-height: 0.96; letter-spacing: var(--track-tight); }
-      #t1-sec-collage .l2 { display: inline-block; margin-top: 10px; font-weight: var(--wt-black); font-style: italic; font-size: 128px; line-height: 1.0; letter-spacing: var(--track-tight); background: var(--yellow); padding: 0 22px; transform: skewX(var(--marker-skew)); }    </style>
+      #t1-sec-collage .l1 { display: block; font-weight: var(--wt-black); font-size: calc(128px * var(--type)); line-height: 0.96; letter-spacing: var(--track-tight); }
+      #t1-sec-collage .l2 { display: inline-block; margin-top: 10px; font-weight: var(--wt-black); font-style: italic; font-size: calc(128px * var(--type)); line-height: 1.0; letter-spacing: var(--track-tight); background: var(--yellow); padding: 0 22px; transform: skewX(var(--marker-skew)); }
+      /* Vertical and square: scraps pinned to the safe corners, title centered across the safe
+         width between them, wordmark circle at the safe bottom left. */
+      [data-format="vertical"] #t1-sec-collage .title, [data-format="square"] #t1-sec-collage .title {
+        left: var(--safe-l); transform: none; width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t1-sec-collage .title { top: calc(var(--safe-t) + 250px); }
+      [data-format="square"] #t1-sec-collage .title { top: calc(var(--safe-t) + 230px); }
+      [data-format="vertical"] #t1-sec-collage .l1, [data-format="vertical"] #t1-sec-collage .l2 { font-size: calc(90px * var(--type)); }
+      [data-format="square"] #t1-sec-collage .l1, [data-format="square"] #t1-sec-collage .l2 { font-size: 96px; }
+      [data-format="vertical"] #t1-sec-collage .s1 { left: var(--safe-l); top: var(--safe-t); width: 250px; height: 180px; }
+      [data-format="vertical"] #t1-sec-collage .s2 { right: var(--safe-r); top: calc(var(--safe-t) + 30px); width: 290px; height: 200px; }
+      [data-format="vertical"] #t1-sec-collage .s3 { right: var(--safe-r); bottom: var(--safe-b); width: 230px; height: 260px; }
+      [data-format="square"] #t1-sec-collage .s1 { left: var(--safe-l); top: var(--safe-t); width: 230px; height: 160px; }
+      [data-format="square"] #t1-sec-collage .s2 { right: var(--safe-r); top: var(--safe-t); width: 270px; height: 180px; }
+      [data-format="square"] #t1-sec-collage .s3 { right: var(--safe-r); bottom: var(--safe-b); width: 200px; height: 230px; }
+      [data-format="vertical"] #t1-sec-collage .ycirc, [data-format="square"] #t1-sec-collage .ycirc { left: calc(var(--safe-l) + 10px); bottom: var(--safe-b); width: 210px; height: 210px; }
+      [data-format="vertical"] #t1-sec-collage .wordmark, [data-format="square"] #t1-sec-collage .wordmark { left: calc(var(--safe-l) - 10px); bottom: calc(var(--safe-b) + 60px); width: 250px; }
+    </style>
   </head>
   <body>
     <div id="t1-sec-collage" data-composition-id="t1-sec-collage" data-start="0" data-width="1920" data-height="1080">

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-section-correction.html

@@ -12,7 +12,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-correction {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: var(--paper); color: var(--ink);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -31,8 +31,8 @@
         background: radial-gradient(120% 120% at 45% 50%, transparent 58%, rgba(23,19,14,0.15) 100%);
       }
       #t1-sec-correction .headline {
-        position: absolute; left: 150px; top: 430px; width: 1050px; z-index: 3;
-        font-weight: var(--wt-thin); font-size: 132px; line-height: 1.05;
+        position: absolute; left: calc(var(--safe-l) + 54px); top: calc(var(--safe-t) + 376px); width: 1050px; z-index: 3;
+        font-weight: var(--wt-thin); font-size: calc(132px * var(--type)); line-height: 1.05;
         letter-spacing: var(--track-tight); color: var(--ink);
       }
       #t1-sec-correction .struck { position: relative; font-weight: var(--wt-black); }
@@ -42,22 +42,34 @@
       }
       #t1-sec-correction .correction {
         position: absolute; left: 0; top: -64px;
-        font-family: var(--font-hand); font-size: 64px; font-weight: 700; color: var(--red);
+        font-family: var(--font-hand); font-size: calc(64px * var(--type)); font-weight: 700; color: var(--red);
         transform: rotate(-3deg); white-space: nowrap;
       }
       /* yellow wordmark circle on the right */
       #t1-sec-correction .circle {
-        position: absolute; right: 200px; top: 430px; width: 300px; height: 300px;
+        position: absolute; right: calc(var(--safe-r) + 104px); top: calc(var(--safe-t) + 376px); width: 300px; height: 300px;
         background: var(--yellow); border-radius: 50%; z-index: 2;
         display: flex; align-items: center; justify-content: center;
-        font-weight: var(--wt-black); font-style: italic; font-size: 110px; color: var(--ink);
+        font-weight: var(--wt-black); font-style: italic; font-size: calc(110px * var(--type)); color: var(--ink);
       }
       #t1-sec-correction .kicker {
-        position: absolute; left: 150px; top: 320px; z-index: 3;
+        position: absolute; left: calc(var(--safe-l) + 54px); top: calc(var(--safe-t) + 266px); z-index: 3;
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-label); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--muted);
       }
+
+      /* Vertical and square: kicker and headline across the safe width, the wordmark circle
+         drops below them to the safe bottom right. */
+      [data-format="vertical"] #t1-sec-correction .kicker, [data-format="square"] #t1-sec-correction .kicker { left: var(--safe-l); top: calc(var(--safe-t) + 60px); }
+      [data-format="vertical"] #t1-sec-correction .headline, [data-format="square"] #t1-sec-correction .headline { left: var(--safe-l); top: calc(var(--safe-t) + 200px); width: calc(var(--w) - var(--safe-l) - var(--safe-r)); }
+      [data-format="vertical"] #t1-sec-correction .headline { font-size: calc(94px * var(--type)); }
+      [data-format="square"] #t1-sec-correction .headline { font-size: 116px; }
+      [data-format="vertical"] #t1-sec-correction .circle, [data-format="square"] #t1-sec-correction .circle { right: var(--safe-r); top: auto; bottom: var(--safe-b); }
+      [data-format="square"] #t1-sec-correction .circle { width: 270px; height: 270px; font-size: 100px; }
+      [data-format="vertical"] #t1-sec-correction .kicker { top: calc(var(--safe-t) + 160px); }
+      [data-format="vertical"] #t1-sec-correction .headline { top: calc(var(--safe-t) + 300px); }
+      [data-format="vertical"] #t1-sec-correction .circle { width: 340px; height: 340px; font-size: calc(90px * var(--type)); }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/cards/tier1/t1-section-crt.html

@@ -12,7 +12,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-crt {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: #120f0a; color: #efe7d4;   /* dark screen register (not pure black) */
         font-family: var(--font-display); overflow: hidden;
       }
@@ -42,16 +42,16 @@
       }
       #t1-sec-crt .wordmark {
         font-family: var(--font-display); font-style: italic; font-weight: var(--wt-black);
-        font-size: 44px; color: var(--yellow); margin-bottom: 16px;
+        font-size: calc(44px * var(--type)); color: var(--yellow); margin-bottom: 16px;
       }
       #t1-sec-crt .title {
-        font-weight: var(--wt-black); font-size: 140px; line-height: 0.95;
+        font-weight: var(--wt-black); font-size: calc(140px * var(--type)); line-height: 0.95;
         letter-spacing: var(--track-tight); color: #f3ecda; max-width: 980px;
         text-shadow: -3px 0 rgba(226,59,46,0.75), 3px 0 rgba(80,170,224,0.75);
       }
       #t1-sec-crt .label {
         display: inline-block; margin-top: 30px; background: var(--yellow); color: #120f0a; padding: 8px 22px;
-        font-family: var(--font-label); font-weight: var(--wt-black); font-size: 30px;
+        font-family: var(--font-label); font-weight: var(--wt-black); font-size: calc(30px * var(--type));
         letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 0 28px rgba(79, 140, 255,0.55);
       }
       /* scanlines + flicker + power-on */
@@ -68,6 +68,17 @@
         background: #fff; z-index: 8; box-shadow: 0 0 40px #fff;
       }
       #t1-sec-crt .content { position: relative; z-index: 4; width: 100%; }
+
+      /* Vertical and square: the TV set fills the safe area (sits high in vertical), title smaller
+         so the longest word fits the screen. */
+      [data-format="vertical"] #t1-sec-crt .tv, [data-format="square"] #t1-sec-crt .tv {
+        left: var(--safe-l); top: var(--safe-t); margin: 0;
+        width: calc(var(--w) - var(--safe-l) - var(--safe-r)); height: calc(var(--h) - var(--safe-t) - var(--safe-b));
+      }
+      [data-format="vertical"] #t1-sec-crt .tv { padding: 44px; border-radius: 56px; }
+      [data-format="square"] #t1-sec-crt .tv { padding: 56px; border-radius: 60px; }
+      [data-format="vertical"] #t1-sec-crt .title { font-size: calc(86px * var(--type)); max-width: 640px; margin: 0 auto; }
+      [data-format="square"] #t1-sec-crt .title { font-size: 112px; max-width: 760px; margin: 0 auto; }
     </style>
   </head>
   <body>