luckiest-co 1.0.32 → 1.0.34

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

@@ -12,7 +12,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-cutout {
-        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,33 +31,43 @@
         background: radial-gradient(130% 120% at 35% 50%, transparent 58%, rgba(23,19,14,0.16) 100%);
       }
       #t1-sec-cutout .kicker {
-        position: absolute; left: 150px; top: 250px; z-index: 4;
+        position: absolute; left: calc(var(--safe-l) + 54px); top: calc(var(--safe-t) + 196px); z-index: 4;
         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); background: var(--yellow); padding: 5px 16px;
         transform: skewX(var(--marker-skew));
       }
       #t1-sec-cutout .headline {
-        position: absolute; left: 150px; top: 330px; width: 880px; z-index: 4;
-        font-weight: var(--wt-black); font-size: 124px; line-height: 0.95;
+        position: absolute; left: calc(var(--safe-l) + 54px); top: calc(var(--safe-t) + 276px); width: 880px; z-index: 4;
+        font-weight: var(--wt-black); font-size: calc(124px * var(--type)); line-height: 0.95;
         letter-spacing: var(--track-tight); color: var(--ink);
       }
       #t1-sec-cutout .headline em { font-style: italic; font-weight: var(--wt-thin); }
       /* the masked subject cutout */
       #t1-sec-cutout .subject {
-        position: absolute; right: 120px; top: 150px; width: 620px; height: 820px;
+        position: absolute; right: calc(var(--safe-r) + 24px); top: calc(var(--safe-t) + 96px); width: 620px; height: 820px;
         background-color: var(--paper-2); background-image: var(--tex-halftone);
         background-size: var(--tex-halftone-size); z-index: 2;
         outline: 12px solid var(--yellow); outline-offset: -12px; transform: rotate(1.5deg);
         box-shadow: -16px 20px 0 rgba(23,19,14,0.14);
       }
       #t1-sec-cutout .wordmark {
-        position: absolute; left: 980px; top: 760px; width: 200px; height: 200px;
+        position: absolute; left: calc(var(--safe-l) + 884px); top: calc(var(--safe-t) + 706px); width: 200px; height: 200px;
         background: var(--yellow); border-radius: 50%; z-index: 5;
         display: flex; align-items: center; justify-content: center;
-        font-weight: var(--wt-black); font-style: italic; font-size: 64px; color: var(--ink);
+        font-weight: var(--wt-black); font-style: italic; font-size: calc(64px * var(--type)); color: var(--ink);
         transform: rotate(-5deg);
-      }    </style>
+      }
+      /* Vertical: kicker and headline on top, the cutout below them at the safe bottom right with
+         the wordmark circle overlapping its left edge. Square: headline left, cutout right column. */
+      [data-format="vertical"] #t1-sec-cutout .kicker, [data-format="square"] #t1-sec-cutout .kicker { left: var(--safe-l); top: var(--safe-t); }
+      [data-format="vertical"] #t1-sec-cutout .headline { left: var(--safe-l); top: calc(var(--safe-t) + 70px); width: calc(var(--w) - var(--safe-l) - var(--safe-r)); font-size: calc(96px * var(--type)); }
+      [data-format="square"] #t1-sec-cutout .headline { left: var(--safe-l); top: calc(var(--safe-t) + 70px); width: 540px; font-size: 96px; }
+      [data-format="vertical"] #t1-sec-cutout .subject { right: var(--safe-r); top: auto; bottom: var(--safe-b); width: 440px; height: 470px; }
+      [data-format="square"] #t1-sec-cutout .subject { right: var(--safe-r); top: calc(var(--safe-t) + 40px); width: 360px; height: 560px; }
+      [data-format="vertical"] #t1-sec-cutout .wordmark { left: calc(var(--safe-l) + 90px); top: auto; bottom: calc(var(--safe-b) + 60px); }
+      [data-format="square"] #t1-sec-cutout .wordmark { left: calc(var(--safe-l) + 380px); top: calc(var(--safe-t) + 500px); }
+    </style>
   </head>
   <body>
     <div id="t1-sec-cutout" data-composition-id="t1-sec-cutout" data-start="0" data-width="1920" data-height="1080">

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

@@ -11,7 +11,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-fullbleed {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: #1a160f; color: var(--paper);
         font-family: var(--font-display); overflow: hidden;
       }
@@ -30,24 +30,37 @@
       }
       #t1-sec-fullbleed .stage { position: absolute; inset: 0; transform-origin: 50% 60%; }
       #t1-sec-fullbleed .kicker {
-        position: absolute; left: 150px; bottom: 470px;
+        position: absolute; left: calc(var(--safe-l) + 54px); bottom: calc(var(--safe-b) + 416px);
         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); background: var(--yellow); padding: 5px 16px;
         transform: skewX(var(--marker-skew));
       }
       #t1-sec-fullbleed .headline {
-        position: absolute; left: 150px; bottom: 150px; width: 1500px;
-        font-weight: var(--wt-black); font-size: 148px; line-height: 0.94;
+        position: absolute; left: calc(var(--safe-l) + 54px); bottom: calc(var(--safe-b) + 96px); width: 1500px;
+        font-weight: var(--wt-black); font-size: calc(148px * var(--type)); line-height: 0.94;
         letter-spacing: var(--track-tight); color: var(--paper);
       }
       #t1-sec-fullbleed .headline em { font-style: normal; background: var(--yellow); color: var(--ink); padding: 0 14px; }
       #t1-sec-fullbleed .source {
-        position: absolute; right: 150px; bottom: 96px;
+        position: absolute; right: calc(var(--safe-r) + 54px); bottom: calc(var(--safe-b) + 42px);
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-tiny); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: rgba(239,233,220,0.6);
       }
+
+      /* Vertical and square: headline across the safe width at the safe bottom, kicker above it,
+         source under it on the right; the scrim rises to cover the safe area. */
+      [data-format="vertical"] #t1-sec-fullbleed .stage { transform-origin: 46% 50%; }
+      [data-format="vertical"] #t1-sec-fullbleed .scrim { background: linear-gradient(0deg, rgba(12,9,6,0.92) 0%, rgba(12,9,6,0.85) 35%, rgba(12,9,6,0.3) 62%, rgba(12,9,6,0.0) 85%); }
+      [data-format="vertical"] #t1-sec-fullbleed .headline, [data-format="square"] #t1-sec-fullbleed .headline {
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 60px); width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t1-sec-fullbleed .headline { font-size: calc(112px * var(--type)); }
+      [data-format="square"] #t1-sec-fullbleed .headline { font-size: 124px; }
+      [data-format="vertical"] #t1-sec-fullbleed .kicker { left: var(--safe-l); bottom: calc(var(--safe-b) + 370px); }
+      [data-format="square"] #t1-sec-fullbleed .kicker { left: var(--safe-l); bottom: calc(var(--safe-b) + 330px); }
+      [data-format="vertical"] #t1-sec-fullbleed .source, [data-format="square"] #t1-sec-fullbleed .source { right: var(--safe-r); bottom: var(--safe-b); }
     </style>
   </head>
   <body>

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

@@ -12,7 +12,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-hl {
-        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;
       }
@@ -27,14 +27,14 @@
         background-size: 180px 180px; mix-blend-mode: multiply; opacity: 0.4; pointer-events: none; z-index: 5;
       }
       #t1-sec-hl .kicker {
-        position: absolute; left: 150px; top: 340px;
+        position: absolute; left: calc(var(--safe-l) + 54px); top: calc(var(--safe-t) + 286px);
         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);
       }
       #t1-sec-hl .headline {
-        position: absolute; left: 150px; top: 400px; width: 1500px;
-        font-weight: var(--wt-thin); font-size: 144px; line-height: 1.04;
+        position: absolute; left: calc(var(--safe-l) + 54px); top: calc(var(--safe-t) + 346px); width: 1500px;
+        font-weight: var(--wt-thin); font-size: calc(144px * var(--type)); line-height: 1.04;
         letter-spacing: var(--track-tight); color: var(--ink);
       }
       #t1-sec-hl .hl { position: relative; font-weight: var(--wt-black); white-space: nowrap; }
@@ -43,11 +43,21 @@
         background: var(--yellow); transform-origin: left center; z-index: -1;
       }
       #t1-sec-hl .source {
-        position: absolute; left: 150px; bottom: 96px;
+        position: absolute; left: calc(var(--safe-l) + 54px); bottom: calc(var(--safe-b) + 42px);
         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 across the safe width (the highlighted phrase
+         stays on one line, so the type shrinks to fit), source at the safe bottom. */
+      [data-format="vertical"] #t1-sec-hl .kicker, [data-format="square"] #t1-sec-hl .kicker { left: var(--safe-l); }
+      [data-format="vertical"] #t1-sec-hl .headline, [data-format="square"] #t1-sec-hl .headline { left: var(--safe-l); width: calc(var(--w) - var(--safe-l) - var(--safe-r)); }
+      [data-format="vertical"] #t1-sec-hl .kicker { top: calc(var(--safe-t) + 330px); }
+      [data-format="vertical"] #t1-sec-hl .headline { top: calc(var(--safe-t) + 390px); font-size: calc(96px * var(--type)); }
+      [data-format="square"] #t1-sec-hl .kicker { top: calc(var(--safe-t) + 200px); }
+      [data-format="square"] #t1-sec-hl .headline { top: calc(var(--safe-t) + 260px); font-size: 120px; }
+      [data-format="vertical"] #t1-sec-hl .source, [data-format="square"] #t1-sec-hl .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-section-indexcard.html

@@ -12,7 +12,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-index {
-        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;
         display: flex; align-items: center; justify-content: center;
@@ -36,22 +36,35 @@
       #t1-sec-index .tab {
         position: absolute; left: 90px; top: -54px; height: 54px; display: flex; align-items: center; padding: 0 28px;
         background: var(--red); color: var(--paper);
-        font-family: var(--font-label); font-weight: var(--wt-black); font-size: 26px;
+        font-family: var(--font-label); font-weight: var(--wt-black); font-size: calc(26px * var(--type));
         letter-spacing: 0.14em; text-transform: uppercase;
       }
       #t1-sec-index .code {
         position: absolute; left: 56px; top: 44px;
-        font-family: var(--font-label); font-weight: var(--wt-bold); font-size: 26px;
+        font-family: var(--font-label); font-weight: var(--wt-bold); font-size: calc(26px * var(--type));
         letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
       }
       #t1-sec-index .title {
         position: absolute; left: 160px; top: 220px; width: 1080px;
-        font-weight: var(--wt-black); font-size: 130px; line-height: 0.96; letter-spacing: var(--track-tight);
+        font-weight: var(--wt-black); font-size: calc(130px * var(--type)); line-height: 0.96; letter-spacing: var(--track-tight);
       }
       #t1-sec-index .sub {
         position: absolute; left: 160px; top: 470px; width: 1040px;
-        font-family: var(--font-label); font-weight: var(--wt-reg); font-size: 30px; line-height: 1.5; color: var(--ink);
+        font-family: var(--font-label); font-weight: var(--wt-reg); font-size: calc(30px * var(--type)); line-height: 1.5; color: var(--ink);
       }
+
+      /* Vertical and square: the card fits the safe width and is centered on the safe box (not the
+         frame); red margin line, title and note move in to match the narrower card. */
+      [data-format="vertical"] #t1-sec-index .card { top: calc((var(--safe-t) - var(--safe-b)) / 2); left: calc((var(--safe-l) - var(--safe-r)) / 2); width: calc(var(--w) - var(--safe-l) - var(--safe-r)); height: 720px; }
+      [data-format="square"] #t1-sec-index .card { top: 27px; width: calc(var(--w) - var(--safe-l) - var(--safe-r) - 40px); height: 640px; }
+      [data-format="vertical"] #t1-sec-index .redline { left: 76px; }
+      [data-format="square"] #t1-sec-index .redline { left: 96px; }
+      [data-format="vertical"] #t1-sec-index .tab { left: 50px; }
+      [data-format="vertical"] #t1-sec-index .code { left: 40px; }
+      [data-format="vertical"] #t1-sec-index .title { left: 110px; top: 200px; width: 610px; font-size: calc(96px * var(--type)); }
+      [data-format="square"] #t1-sec-index .title { left: 136px; top: 190px; width: 700px; font-size: 112px; }
+      [data-format="vertical"] #t1-sec-index .sub { left: 110px; top: 480px; width: 610px; }
+      [data-format="square"] #t1-sec-index .sub { left: 136px; top: 440px; width: 700px; }
     </style>
   </head>
   <body>

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

@@ -12,7 +12,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-map {
-        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;
       }
@@ -35,36 +35,48 @@
         background: radial-gradient(130% 120% at 40% 45%, transparent 52%, rgba(23,19,14,0.24) 100%);
       }
       /* location marker (yellow dot + ink crosshair) */
-      #t1-sec-map .marker { position: absolute; right: 430px; top: 300px; z-index: 4; }
+      #t1-sec-map .marker { position: absolute; right: calc(var(--safe-r) + 334px); top: calc(var(--safe-t) + 246px); z-index: 4; }
       #t1-sec-map .marker .ring { width: 120px; height: 120px; border: 4px solid var(--ink); border-radius: 50%; }
       #t1-sec-map .marker .dot { position: absolute; left: 36px; top: 36px; width: 48px; height: 48px; background: var(--yellow); border: 4px solid var(--ink); border-radius: 50%; }
       #t1-sec-map .marker .cx, #t1-sec-map .marker .cy { position: absolute; background: var(--ink); }
       #t1-sec-map .marker .cx { left: -30px; right: -30px; top: 58px; height: 3px; }
       #t1-sec-map .marker .cy { top: -30px; bottom: -30px; left: 58px; width: 3px; }
       #t1-sec-map .place {
-        position: absolute; right: 320px; top: 330px; z-index: 5;
-        font-family: var(--font-label); font-weight: var(--wt-black); font-size: 30px;
+        position: absolute; right: calc(var(--safe-r) + 224px); top: calc(var(--safe-t) + 276px); z-index: 5;
+        font-family: var(--font-label); font-weight: var(--wt-black); font-size: calc(30px * var(--type));
         letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
         background: var(--yellow); padding: 4px 14px; transform: rotate(-2deg);
       }
       #t1-sec-map .kicker {
-        position: absolute; left: 150px; bottom: 430px; z-index: 4;
+        position: absolute; left: calc(var(--safe-l) + 54px); bottom: calc(var(--safe-b) + 376px); z-index: 4;
         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); background: var(--paper); padding: 5px 14px;
       }
       #t1-sec-map .headline {
-        position: absolute; left: 150px; bottom: 150px; width: 1300px; z-index: 4;
-        font-weight: var(--wt-black); font-size: 138px; line-height: 0.94;
+        position: absolute; left: calc(var(--safe-l) + 54px); bottom: calc(var(--safe-b) + 96px); width: 1300px; z-index: 4;
+        font-weight: var(--wt-black); font-size: calc(138px * var(--type)); line-height: 0.94;
         letter-spacing: var(--track-tight); color: var(--ink);
       }
       #t1-sec-map .headline em { font-style: normal; background: var(--yellow); padding: 0 14px; }
+
+      /* Vertical and square: marker and place tag near the top right of the safe area, kicker and
+         headline across the safe width at the safe bottom. */
+      [data-format="vertical"] #t1-sec-map .marker { right: calc(var(--safe-r) + 230px); top: calc(var(--safe-t) + 80px); }
+      [data-format="vertical"] #t1-sec-map .place { right: calc(var(--safe-r) + 90px); top: calc(var(--safe-t) + 110px); }
+      [data-format="square"] #t1-sec-map .marker { right: calc(var(--safe-r) + 230px); top: calc(var(--safe-t) + 80px); }
+      [data-format="square"] #t1-sec-map .place { right: calc(var(--safe-r) + 100px); top: calc(var(--safe-t) + 110px); }
+      [data-format="vertical"] #t1-sec-map .headline, [data-format="square"] #t1-sec-map .headline { left: var(--safe-l); width: calc(var(--w) - var(--safe-l) - var(--safe-r)); }
+      [data-format="vertical"] #t1-sec-map .headline { bottom: calc(var(--safe-b) + 40px); font-size: calc(112px * var(--type)); }
+      [data-format="square"] #t1-sec-map .headline { bottom: var(--safe-b); font-size: 120px; }
+      [data-format="vertical"] #t1-sec-map .kicker { left: var(--safe-l); bottom: calc(var(--safe-b) + 340px); }
+      [data-format="square"] #t1-sec-map .kicker { left: var(--safe-l); bottom: calc(var(--safe-b) + 290px); }
     </style>
   </head>
   <body>
     <div id="t1-sec-map" data-composition-id="t1-sec-map" data-start="0" data-width="1920" data-height="1080">
       <div class="geo"></div>
-      <svg class="routes" viewBox="0 0 1920 1080" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+      <svg class="routes" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
         <path class="river" d="M-20 240 C 360 300, 520 140, 900 260 S 1500 360, 1960 250" />
         <path d="M200 700 C 500 640, 760 820, 1100 720 S 1700 700, 1960 780" />
         <path d="M1300 80 C 1260 280, 1480 440, 1380 640" />

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

@@ -11,7 +11,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-marker {
-        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;
       }
@@ -29,14 +29,14 @@
         position: absolute; inset: 0; pointer-events: none;
         background: radial-gradient(130% 120% at 40% 50%, transparent 58%, rgba(23,19,14,0.15) 100%);
       }
-      #t1-sec-marker .stage { position: absolute; left: 150px; top: 300px; transform-origin: left top; }
+      #t1-sec-marker .stage { position: absolute; left: calc(var(--safe-l) + 54px); top: calc(var(--safe-t) + 246px); transform-origin: left top; }
       #t1-sec-marker .kicker {
         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); margin-bottom: 26px;
       }
       #t1-sec-marker .line {
-        display: inline-block; font-weight: var(--wt-black); font-size: 132px;
+        display: inline-block; font-weight: var(--wt-black); font-size: calc(132px * var(--type));
         line-height: 1.0; letter-spacing: var(--track-tight); color: var(--ink);
         background: var(--yellow); padding: 2px 26px; margin: 0 0 18px; clear: both; float: left;
         box-shadow: 7px 7px 0 rgba(23,19,14,0.14);
@@ -44,12 +44,19 @@
       #t1-sec-marker .l1 { transform: skewX(-1.6deg) rotate(-0.6deg); }
       #t1-sec-marker .l2 { transform: skewX(1.2deg) rotate(0.5deg); background: var(--ink); color: var(--paper); }
       #t1-sec-marker .l3 { transform: skewX(-0.8deg) rotate(-0.3deg); }      #t1-sec-marker .badge {
-        position: absolute; right: 150px; bottom: 130px; width: 150px; height: 150px;
+        position: absolute; right: calc(var(--safe-r) + 54px); bottom: calc(var(--safe-b) + 76px); width: 150px; height: 150px;
         background: var(--red); color: var(--paper); border-radius: 50%;
         display: flex; align-items: center; justify-content: center; text-align: center;
-        font-family: var(--font-label); font-weight: var(--wt-black); font-size: 26px;
+        font-family: var(--font-label); font-weight: var(--wt-black); font-size: calc(26px * var(--type));
         letter-spacing: 0.04em; transform: rotate(-8deg); line-height: 1.0;
       }
+
+      /* Vertical and square: the marker stack starts higher in the safe area at a smaller size,
+         badge at the safe bottom right. */
+      [data-format="vertical"] #t1-sec-marker .stage, [data-format="square"] #t1-sec-marker .stage { left: var(--safe-l); top: calc(var(--safe-t) + 100px); }
+      [data-format="vertical"] #t1-sec-marker .line { font-size: calc(118px * var(--type)); }
+      [data-format="square"] #t1-sec-marker .line { font-size: 120px; }
+      [data-format="vertical"] #t1-sec-marker .badge, [data-format="square"] #t1-sec-marker .badge { right: var(--safe-r); bottom: var(--safe-b); }
     </style>
   </head>
   <body>

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

@@ -11,7 +11,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-num {
-        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;
       }
@@ -26,25 +26,39 @@
         background-size: 180px 180px; mix-blend-mode: multiply; opacity: 0.4; pointer-events: none; z-index: 5;
       }
       #t1-sec-num .ghost {
-        position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
-        font-weight: var(--wt-black); font-style: italic; font-size: 1280px; line-height: 0.7;
+        position: absolute; right: calc(var(--safe-r) + 130px); top: 50%; transform: translateY(-50%);
+        font-weight: var(--wt-black); font-style: italic; font-size: calc(1280px * var(--type)); line-height: 0.7;
         color: transparent; -webkit-text-stroke: 5px rgba(23,19,14,0.16);
         z-index: 1; user-select: none;
       }
       #t1-sec-num .kicker {
-        position: absolute; left: 150px; top: 360px; z-index: 3;
+        position: absolute; left: calc(var(--safe-l) + 54px); top: calc(var(--safe-t) + 306px); 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);
       }
       #t1-sec-num .kicker::before { content: ""; display: inline-block; width: 56px; height: 3px; background: var(--red); margin-right: 16px; vertical-align: middle; }
       #t1-sec-num .headline {
-        position: absolute; left: 150px; top: 410px; width: 1180px; z-index: 3;
-        font-weight: var(--wt-black); font-size: 138px; line-height: 0.95;
+        position: absolute; left: calc(var(--safe-l) + 54px); top: calc(var(--safe-t) + 356px); width: 1180px; z-index: 3;
+        font-weight: var(--wt-black); font-size: calc(138px * var(--type)); line-height: 0.95;
         letter-spacing: var(--track-tight); color: var(--ink);
       }
       #t1-sec-num .headline em { font-style: italic; font-weight: var(--wt-thin); }
-      #t1-sec-num .underline { position: absolute; left: 154px; top: 720px; width: 0; height: 8px; background: var(--yellow); z-index: 2; }
+      #t1-sec-num .underline { position: absolute; left: calc(var(--safe-l) + 58px); top: calc(var(--safe-t) + 666px); width: 0; height: 8px; background: var(--yellow); z-index: 2; }
+
+      /* Vertical and square: the ghost numeral fills the safe box behind the text (vertical) or
+         its right side (square); kicker, headline and underline stack on the left. */
+      [data-format="vertical"] #t1-sec-num .ghost { right: calc(var(--safe-r) + 110px); top: calc((var(--h) + var(--safe-t) - var(--safe-b)) / 2); font-size: calc(900px * var(--type)); }
+      [data-format="square"] #t1-sec-num .ghost { right: calc(var(--safe-r) + 100px); font-size: 1000px; }
+      [data-format="vertical"] #t1-sec-num .kicker, [data-format="square"] #t1-sec-num .kicker { left: var(--safe-l); }
+      [data-format="vertical"] #t1-sec-num .headline, [data-format="square"] #t1-sec-num .headline { left: var(--safe-l); width: calc(var(--w) - var(--safe-l) - var(--safe-r)); }
+      [data-format="vertical"] #t1-sec-num .underline, [data-format="square"] #t1-sec-num .underline { left: calc(var(--safe-l) + 4px); }
+      [data-format="vertical"] #t1-sec-num .kicker { top: calc(var(--safe-t) + 330px); }
+      [data-format="vertical"] #t1-sec-num .headline { top: calc(var(--safe-t) + 380px); font-size: calc(110px * var(--type)); }
+      [data-format="vertical"] #t1-sec-num .underline { top: calc(var(--safe-t) + 800px); }
+      [data-format="square"] #t1-sec-num .kicker { top: calc(var(--safe-t) + 230px); }
+      [data-format="square"] #t1-sec-num .headline { top: calc(var(--safe-t) + 280px); width: 640px; font-size: 116px; }
+      [data-format="square"] #t1-sec-num .underline { top: calc(var(--safe-t) + 640px); }
     </style>
   </head>
   <body>

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

@@ -11,12 +11,12 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-split {
-        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;
       }
       #t1-sec-split .grid {
-        position: absolute; left: 0; top: 0; width: 1100px; height: 1080px;
+        position: absolute; left: 0; top: 0; width: 1100px; height: var(--h);
         background-image:
           repeating-linear-gradient(0deg,  var(--grid-line) 0 1px, transparent 1px var(--grid-size)),
           repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px var(--grid-size));
@@ -27,36 +27,52 @@
       }
       /* right image panel */
       #t1-sec-split .panel {
-        position: absolute; right: 0; top: 0; width: 760px; height: 1080px;
+        position: absolute; right: 0; top: 0; width: 760px; height: var(--h);
         background-color: var(--paper-2); background-image: var(--tex-halftone);
         background-size: var(--tex-halftone-size); z-index: 2;
       }
       #t1-sec-split .panel::after {
-        content: "ARCHIVE"; position: absolute; left: 24px; bottom: 24px;
+        content: "ARCHIVE"; position: absolute; left: 24px; bottom: var(--safe-b);
         font-family: var(--font-label); font-weight: var(--wt-bold);
         font-size: var(--size-tiny); letter-spacing: var(--track-wide);
         color: var(--ink); background: var(--yellow); padding: 3px 12px;
       }
-      #t1-sec-split .rule { position: absolute; right: 760px; top: 0; width: 10px; height: 1080px; background: var(--ink); z-index: 3; transform-origin: top center; }
+      #t1-sec-split .rule { position: absolute; right: 760px; top: 0; width: 10px; height: var(--h); background: var(--ink); z-index: 3; transform-origin: top center; }
       #t1-sec-split .kicker {
-        position: absolute; left: 130px; top: 360px; z-index: 4;
+        position: absolute; left: calc(var(--safe-l) + 34px); top: calc(var(--safe-t) + 306px); z-index: 4;
         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);
       }
       #t1-sec-split .kicker::before { content: ""; display: inline-block; width: 50px; height: 3px; background: var(--red); margin-right: 16px; vertical-align: middle; }
       #t1-sec-split .headline {
-        position: absolute; left: 130px; top: 410px; width: 900px; z-index: 4;
-        font-weight: var(--wt-black); font-size: 124px; line-height: 0.95;
+        position: absolute; left: calc(var(--safe-l) + 34px); top: calc(var(--safe-t) + 356px); width: 900px; z-index: 4;
+        font-weight: var(--wt-black); font-size: calc(124px * var(--type)); line-height: 0.95;
         letter-spacing: var(--track-tight); color: var(--ink);
       }
       #t1-sec-split .headline em { font-style: italic; font-weight: var(--wt-thin); }
       #t1-sec-split .source {
-        position: absolute; left: 130px; bottom: 110px; z-index: 4;
+        position: absolute; left: calc(var(--safe-l) + 34px); bottom: calc(var(--safe-b) + 56px); 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 and square: side-by-side becomes stacked. The image panel is a full-width band
+         on top with the rule along its bottom edge; kicker, headline and source sit below it. */
+      [data-format="vertical"] #t1-sec-split .grid, [data-format="square"] #t1-sec-split .grid { width: var(--w); }
+      [data-format="vertical"] #t1-sec-split .panel, [data-format="square"] #t1-sec-split .panel { width: var(--w); }
+      [data-format="vertical"] #t1-sec-split .panel { height: 640px; }
+      [data-format="square"] #t1-sec-split .panel { height: 400px; }
+      [data-format="vertical"] #t1-sec-split .panel::after, [data-format="square"] #t1-sec-split .panel::after { left: var(--safe-l); bottom: 24px; }
+      [data-format="vertical"] #t1-sec-split .rule, [data-format="square"] #t1-sec-split .rule { right: 0; width: var(--w); height: 10px; transform-origin: center top; }
+      [data-format="vertical"] #t1-sec-split .rule { top: 640px; }
+      [data-format="square"] #t1-sec-split .rule { top: 400px; }
+      [data-format="vertical"] #t1-sec-split .kicker { left: var(--safe-l); top: 710px; }
+      [data-format="vertical"] #t1-sec-split .headline { left: var(--safe-l); top: 760px; width: calc(var(--w) - var(--safe-l) - var(--safe-r)); font-size: calc(100px * var(--type)); }
+      [data-format="square"] #t1-sec-split .kicker { left: var(--safe-l); top: 450px; }
+      [data-format="square"] #t1-sec-split .headline { left: var(--safe-l); top: 500px; width: calc(var(--w) - var(--safe-l) - var(--safe-r)); font-size: 100px; }
+      [data-format="vertical"] #t1-sec-split .source, [data-format="square"] #t1-sec-split .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-section-stacked.html

@@ -12,7 +12,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-stacked {
-        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;
       }
@@ -32,28 +32,44 @@
         background: radial-gradient(120% 120% at 50% 50%, transparent 56%, rgba(23,19,14,0.15) 100%);
       }
       #t1-sec-stacked .stage { position: absolute; inset: 0; transform-origin: 50% 50%; }
-      #t1-sec-stacked .title { position: absolute; left: 150px; top: 250px; width: 1620px; }
+      #t1-sec-stacked .title { position: absolute; left: calc(var(--safe-l) + 54px); top: calc(var(--safe-t) + 196px); width: 1620px; }
       #t1-sec-stacked .line { display: block; line-height: 0.94; letter-spacing: var(--track-tight); overflow: hidden; }
-      #t1-sec-stacked .l1 { font-weight: var(--wt-thin); font-size: 150px; }
-      #t1-sec-stacked .l2 { font-weight: var(--wt-black); font-style: italic; font-size: 176px; }
-      #t1-sec-stacked .l3 { font-weight: var(--wt-thin); font-size: 150px; }
+      #t1-sec-stacked .l1 { font-weight: var(--wt-thin); font-size: calc(150px * var(--type)); }
+      #t1-sec-stacked .l2 { font-weight: var(--wt-black); font-style: italic; font-size: calc(176px * var(--type)); }
+      #t1-sec-stacked .l3 { font-weight: var(--wt-thin); font-size: calc(150px * var(--type)); }
       #t1-sec-stacked .l1 span, #t1-sec-stacked .l2 span, #t1-sec-stacked .l3 span { display: inline-block; }
       /* keyword over a circle */
       #t1-sec-stacked .key {
-        position: absolute; left: 1130px; top: 470px; z-index: 3;
-        font-weight: var(--wt-black); font-style: italic; font-size: 176px; color: var(--ink);
+        position: absolute; left: calc(var(--safe-l) + 1034px); top: calc(var(--safe-t) + 416px); z-index: 3;
+        font-weight: var(--wt-black); font-style: italic; font-size: calc(176px * var(--type)); color: var(--ink);
       }
       #t1-sec-stacked .circle {
-        position: absolute; left: 1090px; top: 430px; width: 340px; height: 340px;
+        position: absolute; left: calc(var(--safe-l) + 994px); top: calc(var(--safe-t) + 376px); width: 340px; height: 340px;
         background: var(--yellow); border-radius: 50%; z-index: 1;
       }
       #t1-sec-stacked .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);
       }
-      #t1-sec-stacked .rule { position: absolute; left: 150px; bottom: 150px; width: 0; height: 6px; background: var(--red); z-index: 3; }
+      #t1-sec-stacked .rule { position: absolute; left: calc(var(--safe-l) + 54px); bottom: calc(var(--safe-b) + 96px); width: 0; height: 6px; background: var(--red); z-index: 3; }
+
+      /* Vertical and square: the three lines stack from the top of the safe area, the keyword
+         circle sits under them (right of center), rule and source at the safe bottom. */
+      [data-format="vertical"] #t1-sec-stacked .stage { transform-origin: 46% 40%; }
+      /* text keeps ~28px clear of the safe edges because the stage zooms 4% toward its origin */
+      [data-format="vertical"] #t1-sec-stacked .title, [data-format="square"] #t1-sec-stacked .title { left: calc(var(--safe-l) + 28px); top: calc(var(--safe-t) + 24px); width: calc(var(--w) - var(--safe-l) - var(--safe-r) - 56px); }
+      [data-format="vertical"] #t1-sec-stacked .l1, [data-format="vertical"] #t1-sec-stacked .l3 { font-size: calc(124px * var(--type)); }
+      [data-format="vertical"] #t1-sec-stacked .l2 { font-size: calc(128px * var(--type)); }
+      [data-format="square"] #t1-sec-stacked .l1, [data-format="square"] #t1-sec-stacked .l3 { font-size: 124px; }
+      [data-format="square"] #t1-sec-stacked .l2 { font-size: 144px; }
+      [data-format="vertical"] #t1-sec-stacked .circle { left: calc(var(--safe-l) + 330px); top: calc(var(--safe-t) + 500px); }
+      [data-format="vertical"] #t1-sec-stacked .key { left: calc(var(--safe-l) + 370px); top: calc(var(--safe-t) + 540px); font-size: calc(146px * var(--type)); }
+      [data-format="square"] #t1-sec-stacked .circle { left: calc(var(--safe-l) + 540px); top: calc(var(--safe-t) + 420px); width: 300px; height: 300px; }
+      [data-format="square"] #t1-sec-stacked .key { left: calc(var(--safe-l) + 570px); top: calc(var(--safe-t) + 450px); font-size: 150px; }
+      [data-format="vertical"] #t1-sec-stacked .source, [data-format="square"] #t1-sec-stacked .source { left: calc(var(--safe-l) + 28px); bottom: calc(var(--safe-b) + 28px); }
+      [data-format="vertical"] #t1-sec-stacked .rule, [data-format="square"] #t1-sec-stacked .rule { left: calc(var(--safe-l) + 28px); bottom: calc(var(--safe-b) + 82px); }
     </style>
   </head>
   <body>

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

@@ -11,7 +11,7 @@
     <style>
       html, body { margin: 0; }
       #t1-sec-stamp {
-        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;
@@ -41,19 +41,28 @@
       #t1-sec-stamp .stamp::before { top: 14px; }
       #t1-sec-stamp .stamp::after { bottom: 14px; }
       #t1-sec-stamp .kick {
-        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.3em; text-transform: uppercase; margin-bottom: 10px;
       }
       #t1-sec-stamp .title {
-        font-family: var(--font-label); font-weight: var(--wt-black); font-size: 150px;
+        font-family: var(--font-label); font-weight: var(--wt-black); font-size: calc(150px * var(--type));
         letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.92;
       }
       #t1-sec-stamp .date {
-        position: absolute; z-index: 3; right: 320px; bottom: 250px;
+        position: absolute; z-index: 3; right: calc(var(--safe-r) + 224px); bottom: calc(var(--safe-b) + 196px);
         border: 5px solid var(--ink); color: var(--ink); padding: 8px 18px; opacity: 0.78;
-        font-family: var(--font-label); font-weight: var(--wt-black); font-size: 34px;
+        font-family: var(--font-label); font-weight: var(--wt-black); font-size: calc(34px * var(--type));
         letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(5deg);
       }
+
+      /* Vertical and square: the stamp is centered on the safe box (not the frame) at a size that
+         fits its width; the date stamp sits under it on the right. */
+      [data-format="vertical"] #t1-sec-stamp .stamp { top: calc((var(--safe-t) - var(--safe-b)) / 2); left: calc((var(--safe-l) - var(--safe-r)) / 2); padding: 26px 44px; }
+      [data-format="vertical"] #t1-sec-stamp .title { font-size: calc(80px * var(--type)); }
+      [data-format="square"] #t1-sec-stamp .stamp { padding: 26px 48px; }
+      [data-format="square"] #t1-sec-stamp .title { font-size: 112px; }
+      [data-format="vertical"] #t1-sec-stamp .date { right: calc(var(--safe-r) + 20px); bottom: calc(var(--safe-b) + 150px); }
+      [data-format="square"] #t1-sec-stamp .date { right: calc(var(--safe-r) + 40px); bottom: calc(var(--safe-b) + 120px); }
     </style>
   </head>
   <body>