luckiest-co 1.0.32 → 1.0.34

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

@@ -13,7 +13,7 @@
     <style>
       html, body { margin: 0; }
       #t1-ov-compare {
-        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 @@
 
       /* marker title spanning top */
       #t1-ov-compare .marker-title {
-        position: absolute; top: 72px; left: 50%; transform: translateX(-50%) skewX(var(--marker-skew));
+        position: absolute; top: calc(var(--safe-t) + 18px); left: 50%; transform: translateX(-50%) skewX(var(--marker-skew));
         background: var(--yellow); padding: 10px 36px; z-index: 5;
         font-weight: var(--wt-black); font-size: var(--size-title);
         letter-spacing: var(--track-tight); text-transform: uppercase; white-space: nowrap;
@@ -50,10 +50,10 @@
 
       /* two panels */
       #t1-ov-compare .panel {
-        position: absolute; top: 0; bottom: 0; width: 960px; overflow: hidden;
+        position: absolute; top: 0; bottom: 0; width: calc(var(--w) / 2); overflow: hidden;
       }
       #t1-ov-compare .panel.left  { left: 0;    background: var(--paper); }
-      #t1-ov-compare .panel.right { left: 960px; background: var(--paper-2); }
+      #t1-ov-compare .panel.right { left: calc(var(--w) / 2); background: var(--paper-2); }
 
       /* column headers */
       #t1-ov-compare .col-header {
@@ -61,12 +61,12 @@
         padding: 0 80px;
       }
       #t1-ov-compare .panel.left .col-header { padding-left: 120px; }
-      #t1-ov-compare .panel.right .col-header { padding-left: 80px; }
+      #t1-ov-compare .panel.right .col-header { padding-left: 80px; padding-right: var(--safe-r); }
 
       #t1-ov-compare .col-header-inner {
         display: inline-block; background: var(--ink);
         padding: 8px 28px; color: var(--paper);
-        font-weight: var(--wt-black); font-size: 48px;
+        font-weight: var(--wt-black); font-size: calc(48px * var(--type));
         letter-spacing: var(--track-tight); text-transform: uppercase;
       }
       #t1-ov-compare .panel.right .col-header-inner {
@@ -79,7 +79,7 @@
         padding: 0 80px; list-style: none; margin: 0;
       }
       #t1-ov-compare .panel.left .items  { padding-left: 120px; }
-      #t1-ov-compare .panel.right .items { padding-left: 80px; }
+      #t1-ov-compare .panel.right .items { padding-left: 80px; padding-right: var(--safe-r); }
 
       #t1-ov-compare .item {
         display: flex; align-items: flex-start; gap: 22px;
@@ -92,16 +92,47 @@
       #t1-ov-compare .panel.right .dot { background: var(--red); }
       #t1-ov-compare .item-text {
         font-family: var(--font-label); font-weight: var(--wt-bold);
-        font-size: 40px; line-height: 1.25; color: var(--ink);
+        font-size: calc(40px * var(--type)); line-height: 1.25; color: var(--ink);
       }
 
       /* source */
       #t1-ov-compare .source {
-        position: absolute; bottom: 56px; left: 120px; z-index: 6;
+        position: absolute; bottom: calc(var(--safe-b) + 2px); left: calc(var(--safe-l) + 24px); z-index: 6;
         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 two sides stack, option A on top and option B below a horizontal seam, each
+         with its header and points inside the safe width. */
+      [data-format="vertical"] #t1-ov-compare .marker-title, [data-format="square"] #t1-ov-compare .marker-title {
+        top: var(--safe-t); left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2);
+        width: max-content; max-width: calc(var(--w) - var(--safe-l) - var(--safe-r) - 72px);
+        white-space: normal; text-align: center;
+      }
+      [data-format="vertical"] #t1-ov-compare .marker-title { font-size: calc(58px * var(--type)); }
+      [data-format="vertical"] #t1-ov-compare .panel { width: var(--w); left: 0; }
+      [data-format="vertical"] #t1-ov-compare .panel.left { bottom: auto; height: calc(var(--safe-t) + 502px); }
+      [data-format="vertical"] #t1-ov-compare .panel.right { top: calc(var(--safe-t) + 502px); }
+      [data-format="vertical"] #t1-ov-compare .seam { left: 0; right: 0; width: auto; margin: 0; top: calc(var(--safe-t) + 499px); bottom: auto; height: 6px; }
+      [data-format="vertical"] #t1-ov-compare .panel .col-header, [data-format="vertical"] #t1-ov-compare .panel .items { padding-left: var(--safe-l); padding-right: var(--safe-r); }
+      [data-format="vertical"] #t1-ov-compare .panel.left .col-header { top: calc(var(--safe-t) + 136px); }
+      [data-format="vertical"] #t1-ov-compare .panel.left .items { top: calc(var(--safe-t) + 230px); }
+      [data-format="vertical"] #t1-ov-compare .panel.right .col-header { top: 34px; }
+      [data-format="vertical"] #t1-ov-compare .panel.right .items { top: 124px; }
+      [data-format="vertical"] #t1-ov-compare .item { margin-bottom: 30px; }
+      [data-format="vertical"] #t1-ov-compare .item-text { font-size: calc(36px * var(--type)); }
+      [data-format="vertical"] #t1-ov-compare .dot { margin-top: 15px; }
+      [data-format="vertical"] #t1-ov-compare .source, [data-format="square"] #t1-ov-compare .source { left: var(--safe-l); bottom: var(--safe-b); }
+      /* Square: side by side as landscape, columns padded to the safe box. */
+      [data-format="square"] #t1-ov-compare .marker-title { font-size: 72px; }
+      [data-format="square"] #t1-ov-compare .col-header { top: calc(var(--safe-t) + 150px); }
+      [data-format="square"] #t1-ov-compare .items { top: calc(var(--safe-t) + 250px); }
+      [data-format="square"] #t1-ov-compare .panel.left .col-header, [data-format="square"] #t1-ov-compare .panel.left .items { padding-left: var(--safe-l); padding-right: 40px; }
+      [data-format="square"] #t1-ov-compare .panel.right .col-header, [data-format="square"] #t1-ov-compare .panel.right .items { padding-left: 40px; padding-right: var(--safe-r); }
+      [data-format="square"] #t1-ov-compare .item { margin-bottom: 36px; gap: 18px; }
+      [data-format="square"] #t1-ov-compare .item-text { font-size: 34px; }
+      [data-format="square"] #t1-ov-compare .dot { margin-top: 11px; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
     <style>
       html, body { margin: 0; }
       #t1-ov-deck {
-        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,14 +35,14 @@
       }
       /* marker title */
       #t1-ov-deck .title {
-        position: absolute; top: 62px; left: 50%;
+        position: absolute; top: calc(var(--safe-t) + 8px); left: 50%;
         transform: translateX(-50%) skewX(var(--marker-skew));
         background: var(--yellow); padding: 8px 28px; z-index: 10;
         font-weight: var(--wt-black); font-size: var(--size-title);
         letter-spacing: var(--track-tight); text-transform: uppercase; white-space: nowrap;
       }
       #t1-ov-deck .intro {
-        position: absolute; top: 218px; left: 50%; transform: translateX(-50%);
+        position: absolute; top: calc(var(--safe-t) + 164px); left: 50%; transform: translateX(-50%);
         width: 900px; text-align: center; z-index: 10;
         font-family: var(--font-label); font-weight: var(--wt-reg);
         font-size: var(--size-body); line-height: 1.4; color: var(--muted);
@@ -101,10 +101,10 @@
       }
       #t1-ov-deck .card-1 .card-num { color: var(--ink); }
       #t1-ov-deck .card-topic {
-        font-weight: var(--wt-black); font-size: 52px;
+        font-weight: var(--wt-black); font-size: calc(52px * var(--type));
         line-height: 1.1; letter-spacing: var(--track-tight); color: var(--ink);
       }
-      #t1-ov-deck .card-1 .card-topic { font-size: 58px; }
+      #t1-ov-deck .card-1 .card-topic { font-size: calc(58px * var(--type)); }
       /* ruled lines on the card bodies */
       #t1-ov-deck .card-lines {
         position: absolute; left: 30px; right: 30px; top: 80px; bottom: 120px;
@@ -114,11 +114,31 @@
       }
       /* source */
       #t1-ov-deck .source {
-        position: absolute; left: 130px; bottom: 60px; z-index: 10;
+        position: absolute; left: calc(var(--safe-l) + 34px); bottom: calc(var(--safe-b) + 6px); z-index: 10;
         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: title, intro and the card fan stack top to bottom, centred on the
+         safe box; source at the bottom left of the safe area. */
+      [data-format="vertical"] #t1-ov-deck .title, [data-format="square"] #t1-ov-deck .title {
+        top: var(--safe-t); left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2);
+        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-deck .title { font-size: calc(62px * var(--type)); }
+      [data-format="square"] #t1-ov-deck .title { font-size: 80px; }
+      [data-format="vertical"] #t1-ov-deck .intro, [data-format="square"] #t1-ov-deck .intro {
+        top: calc(var(--safe-t) + 124px); left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2);
+        width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t1-ov-deck .fan, [data-format="square"] #t1-ov-deck .fan {
+        left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2 + 40px); transform: translateX(-50%);
+      }
+      [data-format="vertical"] #t1-ov-deck .fan { top: calc(var(--safe-t) + 300px); margin-left: 20px; }
+      [data-format="square"] #t1-ov-deck .fan { top: calc(var(--safe-t) + 230px); }
+      [data-format="vertical"] #t1-ov-deck .source, [data-format="square"] #t1-ov-deck .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-dossier.html

@@ -15,7 +15,7 @@
     <style>
       html, body { margin: 0; }
       #t1-ov-dossier {
-        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;
       }
@@ -38,7 +38,7 @@
 
       /* dossier label - marker title */
       #t1-ov-dossier .dossier-label {
-        position: absolute; top: 72px; left: 50%;
+        position: absolute; top: calc(var(--safe-t) + 18px); left: 50%;
         transform: translateX(-50%) skewX(var(--marker-skew));
         background: var(--red); color: var(--paper); padding: 10px 36px; z-index: 5;
         font-weight: var(--wt-black); font-size: var(--size-title);
@@ -48,8 +48,8 @@
 
       /* file stack - centered vertically */
       #t1-ov-dossier .file-stack {
-        position: absolute; left: 160px; right: 160px;
-        top: 230px; bottom: 110px;
+        position: absolute; left: calc(var(--safe-l) + 64px); right: calc(var(--safe-r) + 64px);
+        top: calc(var(--safe-t) + 176px); bottom: calc(var(--safe-b) + 56px);
         display: flex; flex-direction: column; justify-content: space-between;
         z-index: 3;
       }
@@ -83,7 +83,7 @@
       }
       #t1-ov-dossier .tab-code {
         font-family: var(--font-label); font-weight: var(--wt-black);
-        font-size: 22px; letter-spacing: var(--track-wide);
+        font-size: calc(22px * var(--type)); letter-spacing: var(--track-wide);
         text-transform: uppercase; color: var(--ink); text-align: center;
         line-height: 1.1; word-break: break-all;
       }
@@ -107,7 +107,7 @@
 
       #t1-ov-dossier .file-title {
         font-family: var(--font-label); font-weight: var(--wt-bold);
-        font-size: 44px; line-height: 1.15; color: var(--ink);
+        font-size: calc(44px * var(--type)); line-height: 1.15; color: var(--ink);
         position: relative; z-index: 1;
       }
 
@@ -115,7 +115,7 @@
       #t1-ov-dossier .stamp {
         position: absolute; right: 70px; top: 50%; transform: translateY(-50%) rotate(-8deg);
         font-family: var(--font-label); font-weight: var(--wt-black);
-        font-size: 26px; letter-spacing: 0.25em; text-transform: uppercase;
+        font-size: calc(26px * var(--type)); letter-spacing: 0.25em; text-transform: uppercase;
         color: var(--red); opacity: 0.18;
         border: 4px solid var(--red); padding: 6px 16px;
         pointer-events: none;
@@ -123,7 +123,7 @@
 
       /* cabinet drawer pull - decorative bar above stack */
       #t1-ov-dossier .drawer-pull {
-        position: absolute; left: 160px; right: 160px; top: 195px;
+        position: absolute; left: calc(var(--safe-l) + 64px); right: calc(var(--safe-r) + 64px); top: calc(var(--safe-t) + 141px);
         height: 28px; background: var(--ink); z-index: 3;
       }
       #t1-ov-dossier .drawer-pull::after {
@@ -136,11 +136,30 @@
 
       /* source */
       #t1-ov-dossier .source {
-        position: absolute; left: 160px; bottom: 46px; z-index: 6;
+        position: absolute; left: calc(var(--safe-l) + 64px); bottom: var(--safe-b); z-index: 6;
         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: label, drawer pull and file stack span the safe box; file titles get
+         smaller and may wrap; source at the bottom left of the safe area. */
+      [data-format="vertical"] #t1-ov-dossier .dossier-label, [data-format="square"] #t1-ov-dossier .dossier-label {
+        top: var(--safe-t); left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2);
+        width: max-content; max-width: calc(var(--w) - var(--safe-l) - var(--safe-r) - 72px);
+        white-space: normal; text-align: center;
+      }
+      [data-format="vertical"] #t1-ov-dossier .dossier-label { font-size: calc(72px * var(--type)); }
+      [data-format="vertical"] #t1-ov-dossier .drawer-pull, [data-format="square"] #t1-ov-dossier .drawer-pull { left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 124px); }
+      [data-format="vertical"] #t1-ov-dossier .file-stack, [data-format="square"] #t1-ov-dossier .file-stack {
+        left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 160px); bottom: calc(var(--safe-b) + 44px);
+      }
+      [data-format="vertical"] #t1-ov-dossier .file-body, [data-format="square"] #t1-ov-dossier .file-body { padding: 20px 30px; }
+      /* the narrower rows leave no clear space for the CONFIDENTIAL stamp, so it would sit on the titles */
+      [data-format="vertical"] #t1-ov-dossier .stamp, [data-format="square"] #t1-ov-dossier .stamp { display: none; }
+      [data-format="vertical"] #t1-ov-dossier .file-title { font-size: calc(36px * var(--type)); }
+      [data-format="square"] #t1-ov-dossier .file-title { font-size: 40px; }
+      [data-format="vertical"] #t1-ov-dossier .source, [data-format="square"] #t1-ov-dossier .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-filmstrip.html

@@ -14,7 +14,7 @@
     <style>
       html, body { margin: 0; }
       #t1-ov-film {
-        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-film .title {
-        position: absolute; top: 62px; left: 50%;
+        position: absolute; top: calc(var(--safe-t) + 8px); left: 50%;
         transform: translateX(-50%) skewX(var(--marker-skew));
         background: var(--yellow); padding: 8px 28px; z-index: 10;
         font-weight: var(--wt-black); font-size: var(--size-title);
@@ -92,13 +92,13 @@
       #t1-ov-film .frame-num {
         position: absolute; top: 6px; left: 8px;
         font-family: var(--font-label); font-weight: var(--wt-bold);
-        font-size: 16px; letter-spacing: 0.1em;
+        font-size: calc(16px * var(--type)); letter-spacing: 0.1em;
         color: var(--paper); opacity: 0.6;
         font-variant-numeric: tabular-nums;
       }
       /* captions - sit below the strip band */
       #t1-ov-film .captions {
-        position: absolute; left: 100px; right: 100px; top: 716px;
+        position: absolute; left: calc(var(--safe-l) + 4px); right: calc(var(--safe-r) + 4px); top: 716px;
         display: flex; gap: 28px; z-index: 3;
       }
       #t1-ov-film .cap {
@@ -114,11 +114,42 @@
       }
       /* source */
       #t1-ov-film .source {
-        position: absolute; left: 130px; bottom: 60px; z-index: 10;
+        position: absolute; left: calc(var(--safe-l) + 34px); bottom: calc(var(--safe-b) + 6px); z-index: 10;
         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 strip turns upright under the title and runs off the bottom edge, frames
+         stacked; captions sit in a column to the right, one beside each frame. */
+      [data-format="vertical"] #t1-ov-film .title, [data-format="square"] #t1-ov-film .title {
+        top: var(--safe-t); left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2);
+      }
+      [data-format="vertical"] #t1-ov-film .title { font-size: calc(64px * var(--type)); }
+      [data-format="vertical"] #t1-ov-film .strip-band { left: var(--safe-l); right: auto; width: 400px; top: calc(var(--safe-t) + 140px); height: auto; bottom: -40px; }
+      [data-format="vertical"] #t1-ov-film .sprockets-top, [data-format="vertical"] #t1-ov-film .sprockets-bottom {
+        top: 0; bottom: 0; height: auto; width: 32px;
+        background-image: repeating-linear-gradient(180deg, transparent 0px, transparent 32px,
+          var(--paper-2) 32px, var(--paper-2) 56px, transparent 56px, transparent 88px);
+      }
+      [data-format="vertical"] #t1-ov-film .sprockets-top { left: 14px; right: auto; }
+      [data-format="vertical"] #t1-ov-film .sprockets-bottom { right: 14px; left: auto; }
+      [data-format="vertical"] #t1-ov-film .frames {
+        left: 60px; right: 60px; top: 30px; bottom: auto; height: 790px;
+        flex-direction: column;
+      }
+      [data-format="vertical"] #t1-ov-film .captions {
+        left: calc(var(--safe-l) + 440px); right: var(--safe-r); top: calc(var(--safe-t) + 170px); height: 790px;
+        flex-direction: column;
+      }
+      [data-format="vertical"] #t1-ov-film .cap { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; }
+      [data-format="vertical"] #t1-ov-film .cap-1::after { margin: 10px 0 0; }
+      [data-format="vertical"] #t1-ov-film .source { left: calc(var(--safe-l) + 440px); bottom: var(--safe-b); }
+      [data-format="square"] #t1-ov-film .source { left: var(--safe-l); bottom: var(--safe-b); }
+      /* Square: same horizontal strip, frames and captions aligned to the safe width. */
+      [data-format="square"] #t1-ov-film .strip-band { top: calc(var(--safe-t) + 170px); }
+      [data-format="square"] #t1-ov-film .frames { left: calc(var(--safe-l) + 40px); right: calc(var(--safe-r) + 40px); gap: 20px; }
+      [data-format="square"] #t1-ov-film .captions { left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 600px); gap: 20px; }
     </style>
   </head>
   <body>

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

@@ -13,7 +13,7 @@
     <style>
       html, body { margin: 0; }
       #t1-ov-grid6 {
-        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-grid6 .title {
-        position: absolute; top: 62px; left: 130px;
+        position: absolute; top: calc(var(--safe-t) + 8px); left: calc(var(--safe-l) + 34px);
         background: var(--ink); color: var(--paper);
         padding: 10px 30px; z-index: 3;
         font-weight: var(--wt-black); font-size: var(--size-title);
@@ -43,7 +43,7 @@
       }
       /* 3x2 tile grid */
       #t1-ov-grid6 .tiles {
-        position: absolute; left: 110px; right: 110px; top: 230px; bottom: 110px;
+        position: absolute; left: calc(var(--safe-l) + 14px); right: calc(var(--safe-r) + 14px); top: calc(var(--safe-t) + 176px); bottom: calc(var(--safe-b) + 56px);
         display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
         gap: 24px; z-index: 2;
       }
@@ -61,23 +61,41 @@
       /* big number sits in corner */
       #t1-ov-grid6 .num {
         position: absolute; top: 24px; left: 32px;
-        font-weight: var(--wt-black); font-size: 100px; line-height: 1;
+        font-weight: var(--wt-black); font-size: calc(100px * var(--type)); line-height: 1;
         letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
         color: var(--ink); opacity: 0.12;
       }
       #t1-ov-grid6 .tile.hero .num { opacity: 0.25; }
       #t1-ov-grid6 .label {
-        font-weight: var(--wt-black); font-size: 50px;
+        font-weight: var(--wt-black); font-size: calc(50px * var(--type));
         line-height: 1.1; letter-spacing: var(--track-tight);
         color: var(--ink); position: relative; z-index: 1;
       }
       /* source */
       #t1-ov-grid6 .source {
-        position: absolute; right: 130px; bottom: 50px; z-index: 4;
+        position: absolute; right: calc(var(--safe-r) + 34px); bottom: var(--safe-b); 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: tiles regrid to 2 columns x 3 rows inside the safe box with smaller labels.
+         Square: keeps 3 x 2, fitted to the safe box. Title may wrap; source at bottom right. */
+      [data-format="vertical"] #t1-ov-grid6 .title, [data-format="square"] #t1-ov-grid6 .title {
+        top: var(--safe-t); left: var(--safe-l); white-space: normal;
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r) - 60px);
+      }
+      [data-format="vertical"] #t1-ov-grid6 .title { font-size: calc(54px * var(--type)); }
+      [data-format="square"] #t1-ov-grid6 .title { font-size: 68px; }
+      [data-format="vertical"] #t1-ov-grid6 .tiles, [data-format="square"] #t1-ov-grid6 .tiles { left: var(--safe-l); right: var(--safe-r); bottom: calc(var(--safe-b) + 40px); gap: 18px; }
+      [data-format="vertical"] #t1-ov-grid6 .tiles { top: calc(var(--safe-t) + 120px); grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
+      [data-format="square"] #t1-ov-grid6 .tiles { top: calc(var(--safe-t) + 130px); }
+      [data-format="vertical"] #t1-ov-grid6 .tile, [data-format="square"] #t1-ov-grid6 .tile { padding: 24px 26px; }
+      [data-format="vertical"] #t1-ov-grid6 .num { top: 16px; left: 22px; font-size: calc(60px * var(--type)); }
+      [data-format="square"] #t1-ov-grid6 .num { top: 18px; left: 24px; font-size: 84px; }
+      [data-format="vertical"] #t1-ov-grid6 .label { font-size: calc(34px * var(--type)); }
+      [data-format="square"] #t1-ov-grid6 .label { font-size: 38px; }
+      [data-format="vertical"] #t1-ov-grid6 .source, [data-format="square"] #t1-ov-grid6 .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-overview-indexset.html

@@ -13,7 +13,7 @@
     <style>
       html, body { margin: 0; }
       #t1-ov-index {
-        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-index .title {
-        position: absolute; top: 62px; left: 50%;
+        position: absolute; top: calc(var(--safe-t) + 8px); left: 50%;
         transform: translateX(-50%) skewX(var(--marker-skew));
         background: var(--yellow); padding: 8px 28px; z-index: 10;
         font-weight: var(--wt-black); font-size: var(--size-title);
@@ -42,7 +42,7 @@
       }
       /* card deck area - centered horizontally */
       #t1-ov-index .cards-wrap {
-        position: absolute; left: 0; right: 0; top: 220px; bottom: 140px;
+        position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 166px); bottom: calc(var(--safe-b) + 86px);
         display: flex; align-items: center; justify-content: center;
         z-index: 3;
       }
@@ -101,22 +101,50 @@
       /* topic text on the card */
       #t1-ov-index .card-topic {
         position: absolute; left: 80px; right: 30px; top: 60px;
-        font-weight: var(--wt-black); font-size: 58px;
+        font-weight: var(--wt-black); font-size: calc(58px * var(--type));
         line-height: 1.1; letter-spacing: var(--track-tight); color: var(--ink);
       }
       /* handwritten note style sub at bottom of card */
       #t1-ov-index .card-note {
         position: absolute; left: 80px; right: 30px; bottom: 40px;
         font-family: var(--font-hand); font-weight: var(--wt-bold);
-        font-size: 32px; color: var(--muted); line-height: 1.3;
+        font-size: calc(32px * var(--type)); color: var(--muted); line-height: 1.3;
       }
       /* source */
       #t1-ov-index .source {
-        position: absolute; left: 130px; bottom: 60px; z-index: 10;
+        position: absolute; left: calc(var(--safe-l) + 34px); bottom: calc(var(--safe-b) + 6px); z-index: 10;
         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 three index cards become wide cards stacked down the safe box, each tab
+         clear of the card above. Square: three narrower cards side by side without covering
+         each other's topic. Source at the bottom left of the safe area. */
+      [data-format="vertical"] #t1-ov-index .title, [data-format="square"] #t1-ov-index .title {
+        top: var(--safe-t); left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2);
+        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-index .title { font-size: calc(58px * var(--type)); }
+      [data-format="square"] #t1-ov-index .title { font-size: 76px; }
+      [data-format="vertical"] #t1-ov-index .cards-wrap { left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 130px); bottom: var(--safe-b); }
+      [data-format="vertical"] #t1-ov-index .icard { width: calc(100% - 30px); height: 210px; left: 15px; }
+      [data-format="vertical"] #t1-ov-index .icard-1 { top: 54px; }
+      [data-format="vertical"] #t1-ov-index .icard-2 { top: 312px; }
+      [data-format="vertical"] #t1-ov-index .icard-3 { top: 570px; }
+      [data-format="vertical"] #t1-ov-index .card-topic { top: 44px; }
+      [data-format="vertical"] #t1-ov-index .card-note { bottom: 26px; }
+      [data-format="square"] #t1-ov-index .cards-wrap { left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 150px); bottom: calc(var(--safe-b) + 40px); }
+      [data-format="square"] #t1-ov-index .icard { width: 296px; height: 520px; }
+      [data-format="square"] #t1-ov-index .icard-1 { left: 0; }
+      [data-format="square"] #t1-ov-index .icard-2 { left: 316px; }
+      [data-format="square"] #t1-ov-index .icard-3 { left: 632px; }
+      [data-format="square"] #t1-ov-index .margin-line { left: 36px; }
+      [data-format="square"] #t1-ov-index .card-topic, [data-format="square"] #t1-ov-index .card-note { left: 50px; right: 20px; }
+      [data-format="square"] #t1-ov-index .card-topic { font-size: 44px; }
+      [data-format="square"] #t1-ov-index .card-note { font-size: 28px; }
+      [data-format="vertical"] #t1-ov-index .source, [data-format="square"] #t1-ov-index .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-maplegend.html

@@ -14,7 +14,7 @@
     <style>
       html, body { margin: 0; }
       #t1-ov-maplegend {
-        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 @@
 
       /* marker title */
       #t1-ov-maplegend .marker-title {
-        position: absolute; top: 72px; left: 50%; transform: translateX(-50%) skewX(var(--marker-skew));
+        position: absolute; top: calc(var(--safe-t) + 18px); left: 50%; transform: translateX(-50%) skewX(var(--marker-skew));
         background: var(--yellow); padding: 10px 36px; z-index: 5;
         font-weight: var(--wt-black); font-size: var(--size-title);
         letter-spacing: var(--track-tight); text-transform: uppercase; white-space: nowrap;
@@ -74,7 +74,7 @@
         width: 56px; height: 56px;
         background: var(--yellow); border: 3px solid var(--ink);
         display: flex; align-items: center; justify-content: center;
-        font-weight: var(--wt-black); font-size: 32px;
+        font-weight: var(--wt-black); font-size: calc(32px * var(--type));
         box-shadow: 4px 4px 0 rgba(23,19,14,0.25);
         transform: rotate(-4deg);
       }
@@ -99,8 +99,8 @@
 
       /* legend panel: right 40% */
       #t1-ov-maplegend .legend {
-        position: absolute; left: 1165px; top: 200px; right: 40px;
-        bottom: 80px; z-index: 3;
+        position: absolute; left: 1165px; top: calc(var(--safe-t) + 146px); right: var(--safe-r);
+        bottom: calc(var(--safe-b) + 26px); z-index: 3;
         display: flex; flex-direction: column; justify-content: center;
         gap: 0;
       }
@@ -120,22 +120,53 @@
         width: 52px; height: 52px;
         background: var(--yellow); border: 3px solid var(--ink);
         display: flex; align-items: center; justify-content: center;
-        font-weight: var(--wt-black); font-size: 30px;
+        font-weight: var(--wt-black); font-size: calc(30px * var(--type));
         box-shadow: 3px 3px 0 rgba(23,19,14,0.2);
         transform: rotate(-2deg); margin-top: 4px;
       }
       #t1-ov-maplegend .leg-text {
         font-family: var(--font-label); font-weight: var(--wt-bold);
-        font-size: 40px; line-height: 1.2; color: var(--ink);
+        font-size: calc(40px * var(--type)); line-height: 1.2; color: var(--ink);
       }
 
       /* source */
       #t1-ov-maplegend .source {
-        position: absolute; left: 120px; bottom: 36px; z-index: 6;
+        position: absolute; left: calc(var(--safe-l) + 24px); bottom: var(--safe-b); z-index: 6;
         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: map strip on top, a horizontal divider, then the legend across the safe width;
+         pins move inside the shorter map. Square: map left and legend right as landscape, narrowed. */
+      [data-format="vertical"] #t1-ov-maplegend .marker-title, [data-format="square"] #t1-ov-maplegend .marker-title {
+        top: var(--safe-t); left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2);
+        width: max-content; max-width: calc(var(--w) - var(--safe-l) - var(--safe-r) - 72px);
+        white-space: normal; text-align: center;
+      }
+      [data-format="vertical"] #t1-ov-maplegend .marker-title { font-size: calc(64px * var(--type)); }
+      [data-format="square"] #t1-ov-maplegend .marker-title { font-size: 80px; }
+      [data-format="vertical"] #t1-ov-maplegend .map-area { width: var(--w); top: calc(var(--safe-t) + 110px); bottom: auto; height: 330px; }
+      [data-format="vertical"] #t1-ov-maplegend .pin1 { left: 230px; top: 120px; }
+      [data-format="vertical"] #t1-ov-maplegend .pin2 { left: 600px; top: 60px; }
+      [data-format="vertical"] #t1-ov-maplegend .pin3 { left: 420px; top: 230px; }
+      [data-format="vertical"] #t1-ov-maplegend .pin4 { left: 760px; top: 200px; }
+      [data-format="vertical"] #t1-ov-maplegend .divider { left: var(--safe-l); right: var(--safe-r); width: auto; top: calc(var(--safe-t) + 450px); bottom: auto; height: 5px; }
+      [data-format="vertical"] #t1-ov-maplegend .legend { left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 480px); bottom: calc(var(--safe-b) + 34px); justify-content: flex-start; }
+      [data-format="vertical"] #t1-ov-maplegend .legend-header { margin-bottom: 6px; padding-bottom: 10px; }
+      [data-format="vertical"] #t1-ov-maplegend .leg-row { padding: 16px 0; gap: 26px; }
+      [data-format="vertical"] #t1-ov-maplegend .leg-text { font-size: calc(30px * var(--type)); }
+      [data-format="square"] #t1-ov-maplegend .map-area { width: 570px; top: calc(var(--safe-t) + 140px); bottom: calc(var(--safe-b) + 30px); }
+      [data-format="square"] #t1-ov-maplegend .pin1 { left: 150px; top: 170px; }
+      [data-format="square"] #t1-ov-maplegend .pin2 { left: 400px; top: 110px; }
+      [data-format="square"] #t1-ov-maplegend .pin3 { left: 270px; top: 380px; }
+      [data-format="square"] #t1-ov-maplegend .pin4 { left: 440px; top: 330px; }
+      [data-format="square"] #t1-ov-maplegend .divider { left: 570px; top: calc(var(--safe-t) + 140px); bottom: calc(var(--safe-b) + 30px); }
+      [data-format="square"] #t1-ov-maplegend .legend { left: 600px; top: calc(var(--safe-t) + 140px); bottom: calc(var(--safe-b) + 30px); }
+      [data-format="square"] #t1-ov-maplegend .legend-header { margin-bottom: 16px; }
+      [data-format="square"] #t1-ov-maplegend .leg-row { padding: 20px 0; gap: 22px; }
+      [data-format="square"] #t1-ov-maplegend .leg-text { font-size: 30px; }
+      [data-format="vertical"] #t1-ov-maplegend .source, [data-format="square"] #t1-ov-maplegend .source { left: var(--safe-l); bottom: var(--safe-b); }
     </style>
   </head>
   <body>