luckiest-co 1.0.32 → 1.0.34

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

@@ -15,7 +15,7 @@
     <style>
       html, body { margin: 0; }
       #t1-ov-matrix {
-        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;
       }
@@ -37,7 +37,7 @@
 
       /* marker title */
       #t1-ov-matrix .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;
@@ -45,7 +45,7 @@
 
       /* table wrapper - centered */
       #t1-ov-matrix .table-wrap {
-        position: absolute; top: 240px; left: 50%; transform: translateX(-50%);
+        position: absolute; top: calc(var(--safe-t) + 186px); left: 50%; transform: translateX(-50%);
         width: 1360px;
       }
 
@@ -59,7 +59,7 @@
       #t1-ov-matrix .matrix thead th {
         padding: 22px 28px;
         font-family: var(--font-label); font-weight: var(--wt-bold);
-        font-size: 36px; letter-spacing: var(--track-wide); text-transform: uppercase;
+        font-size: calc(36px * var(--type)); letter-spacing: var(--track-wide); text-transform: uppercase;
         border-bottom: 5px solid var(--ink);
       }
       #t1-ov-matrix .matrix thead th:first-child {
@@ -82,7 +82,7 @@
       }
       #t1-ov-matrix .row-label {
         font-family: var(--font-label); font-weight: var(--wt-bold);
-        font-size: 40px; color: var(--ink); text-align: left;
+        font-size: calc(40px * var(--type)); color: var(--ink); text-align: left;
       }
       #t1-ov-matrix .cell {
         text-align: center;
@@ -91,7 +91,7 @@
       /* check / cross marks - NOT arrows */
       #t1-ov-matrix .mark {
         display: inline-block;
-        font-size: 72px; line-height: 1; font-weight: var(--wt-black);
+        font-size: calc(72px * var(--type)); line-height: 1; font-weight: var(--wt-black);
         font-family: var(--font-label);
       }
       #t1-ov-matrix .mark.yes {
@@ -112,11 +112,39 @@
 
       /* source */
       #t1-ov-matrix .source {
-        position: absolute; bottom: 72px; left: 120px; z-index: 6;
+        position: absolute; bottom: calc(var(--safe-b) + 18px); 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 and square: title and table centred on the safe box, the table narrowed to the
+         safe width with smaller header, labels and marks; source at the bottom left of the safe area. */
+      [data-format="vertical"] #t1-ov-matrix .marker-title, [data-format="square"] #t1-ov-matrix .marker-title,
+      [data-format="vertical"] #t1-ov-matrix .table-wrap, [data-format="square"] #t1-ov-matrix .table-wrap {
+        left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2);
+      }
+      [data-format="vertical"] #t1-ov-matrix .marker-title, [data-format="square"] #t1-ov-matrix .marker-title {
+        top: var(--safe-t); 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-matrix .marker-title { font-size: calc(64px * var(--type)); }
+      [data-format="vertical"] #t1-ov-matrix .table-wrap, [data-format="square"] #t1-ov-matrix .table-wrap { width: calc(var(--w) - var(--safe-l) - var(--safe-r)); }
+      [data-format="vertical"] #t1-ov-matrix .table-wrap { top: calc(var(--safe-t) + 190px); }
+      [data-format="square"] #t1-ov-matrix .table-wrap { top: calc(var(--safe-t) + 170px); }
+      [data-format="vertical"] #t1-ov-matrix .matrix thead th { padding: 18px 10px; font-size: calc(24px * var(--type)); letter-spacing: 0.1em; }
+      [data-format="vertical"] #t1-ov-matrix .matrix thead th:first-child { width: 267px; }
+      [data-format="vertical"] #t1-ov-matrix .th-col { width: 220px; }
+      [data-format="vertical"] #t1-ov-matrix .matrix tbody td { padding: 48px 14px; }
+      [data-format="vertical"] #t1-ov-matrix .row-label { font-size: calc(32px * var(--type)); }
+      [data-format="vertical"] #t1-ov-matrix .mark { font-size: calc(54px * var(--type)); }
+      [data-format="square"] #t1-ov-matrix .matrix thead th { padding: 20px 14px; font-size: 30px; }
+      [data-format="square"] #t1-ov-matrix .matrix thead th:first-child { width: 332px; }
+      [data-format="square"] #t1-ov-matrix .th-col { width: 256px; }
+      [data-format="square"] #t1-ov-matrix .matrix tbody td { padding: 40px 20px; }
+      [data-format="square"] #t1-ov-matrix .row-label { font-size: 38px; }
+      [data-format="square"] #t1-ov-matrix .mark { font-size: 64px; }
+      [data-format="vertical"] #t1-ov-matrix .source, [data-format="square"] #t1-ov-matrix .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-numlist.html

@@ -12,7 +12,7 @@
     <style>
       html, body { margin: 0; }
       #t1-ov-numlist {
-        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-numlist .title {
-        position: absolute; top: 80px; left: 130px;
+        position: absolute; top: calc(var(--safe-t) + 26px); left: calc(var(--safe-l) + 34px);
         background: var(--yellow); padding: 8px 28px;
         transform: skewX(var(--marker-skew)); transform-origin: left center;
         font-weight: var(--wt-black); font-size: var(--size-title);
@@ -42,14 +42,14 @@
         white-space: nowrap; z-index: 3;
       }
       #t1-ov-numlist .intro {
-        position: absolute; top: 220px; left: 130px; right: 130px;
+        position: absolute; top: calc(var(--safe-t) + 166px); left: calc(var(--safe-l) + 34px); right: calc(var(--safe-r) + 34px);
         font-family: var(--font-label); font-weight: var(--wt-reg);
         font-size: var(--size-body); color: var(--muted); z-index: 3;
       }
 
       /* row list */
       #t1-ov-numlist .rows {
-        position: absolute; top: 300px; left: 130px; right: 130px;
+        position: absolute; top: calc(var(--safe-t) + 246px); left: calc(var(--safe-l) + 34px); right: calc(var(--safe-r) + 34px);
         display: flex; flex-direction: column; gap: 0; z-index: 3;
       }
       #t1-ov-numlist .row {
@@ -61,7 +61,7 @@
 
       #t1-ov-numlist .ordinal {
         flex: 0 0 120px; text-align: right;
-        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: var(--track-tight); color: var(--yellow);
         /* yellow outline with ink stroke using text-shadow for contrast */
         -webkit-text-stroke: 3px var(--ink);
@@ -74,7 +74,7 @@
       }
       #t1-ov-numlist .copy { flex: 1 1 auto; }
       #t1-ov-numlist .topic {
-        font-weight: var(--wt-black); font-size: 54px;
+        font-weight: var(--wt-black); font-size: calc(54px * var(--type));
         letter-spacing: var(--track-tight); line-height: 1.05; color: var(--ink);
       }
       #t1-ov-numlist .sub {
@@ -84,11 +84,30 @@
       }
 
       #t1-ov-numlist .source {
-        position: absolute; right: 130px; bottom: 88px;
+        position: absolute; right: calc(var(--safe-r) + 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: same list pinned to the safe box, title sized to the narrower width,
+         tighter rows, source moved under the list at the bottom left. */
+      [data-format="vertical"] #t1-ov-numlist .title, [data-format="square"] #t1-ov-numlist .title {
+        top: var(--safe-t); left: var(--safe-l); white-space: normal;
+        max-width: calc(var(--w) - var(--safe-l) - var(--safe-r) - 56px);
+      }
+      [data-format="vertical"] #t1-ov-numlist .title { font-size: calc(54px * var(--type)); }
+      [data-format="square"] #t1-ov-numlist .title { font-size: 72px; }
+      [data-format="vertical"] #t1-ov-numlist .intro, [data-format="square"] #t1-ov-numlist .intro { left: var(--safe-l); right: var(--safe-r); }
+      [data-format="vertical"] #t1-ov-numlist .intro { top: calc(var(--safe-t) + 110px); }
+      [data-format="square"] #t1-ov-numlist .intro { top: calc(var(--safe-t) + 116px); }
+      [data-format="vertical"] #t1-ov-numlist .rows, [data-format="square"] #t1-ov-numlist .rows { left: var(--safe-l); right: var(--safe-r); }
+      [data-format="vertical"] #t1-ov-numlist .rows { top: calc(var(--safe-t) + 220px); }
+      [data-format="square"] #t1-ov-numlist .rows { top: calc(var(--safe-t) + 180px); }
+      [data-format="vertical"] #t1-ov-numlist .row, [data-format="square"] #t1-ov-numlist .row { padding: 20px 0; gap: 30px; }
+      [data-format="vertical"] #t1-ov-numlist .ordinal { flex-basis: 110px; font-size: calc(80px * var(--type)); }
+      [data-format="square"] #t1-ov-numlist .ordinal { flex-basis: 110px; font-size: 88px; }
+      [data-format="vertical"] #t1-ov-numlist .source, [data-format="square"] #t1-ov-numlist .source { right: auto; 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-outline.html

@@ -14,7 +14,7 @@
     <style>
       html, body { margin: 0; }
       #t1-ov-outline {
-        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;
       }
@@ -52,7 +52,7 @@
 
       /* marker title */
       #t1-ov-outline .marker-title {
-        position: absolute; top: 72px; left: 280px;
+        position: absolute; top: calc(var(--safe-t) + 18px); left: calc(var(--safe-l) + 184px);
         transform: skewX(var(--marker-skew));
         background: var(--yellow); padding: 10px 36px; z-index: 5;
         font-weight: var(--wt-black); font-size: var(--size-title);
@@ -62,7 +62,7 @@
 
       /* content area - right of the margin rule */
       #t1-ov-outline .notes {
-        position: absolute; left: 280px; right: 140px; top: 220px;
+        position: absolute; left: calc(var(--safe-l) + 184px); right: calc(var(--safe-r) + 44px); top: calc(var(--safe-t) + 166px);
         z-index: 3;
       }
 
@@ -78,7 +78,7 @@
       }
       #t1-ov-outline .b-text {
         font-family: var(--font-label); font-weight: var(--wt-bold);
-        font-size: 52px; line-height: 1.2; color: var(--ink);
+        font-size: calc(52px * var(--type)); line-height: 1.2; color: var(--ink);
       }
 
       /* sub-point - indented */
@@ -92,16 +92,36 @@
       }
       #t1-ov-outline .sub-text {
         font-family: var(--font-label); font-weight: var(--wt-reg);
-        font-size: 36px; line-height: 1.3; color: var(--muted);
+        font-size: calc(36px * var(--type)); line-height: 1.3; color: var(--muted);
         font-style: italic;
       }
       /* source */
       #t1-ov-outline .source {
-        position: absolute; left: 280px; bottom: 46px; z-index: 6;
+        position: absolute; left: calc(var(--safe-l) + 184px); 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: title, notes and source start just right of the punch holes and span
+         the safe width; bullets and sub-points get smaller so three groups fit the safe height. */
+      [data-format="vertical"] #t1-ov-outline .marker-title, [data-format="square"] #t1-ov-outline .marker-title,
+      [data-format="vertical"] #t1-ov-outline .notes, [data-format="square"] #t1-ov-outline .notes,
+      [data-format="vertical"] #t1-ov-outline .source, [data-format="square"] #t1-ov-outline .source { left: calc(var(--safe-l) + 40px); }
+      [data-format="vertical"] #t1-ov-outline .marker-title, [data-format="square"] #t1-ov-outline .marker-title {
+        top: var(--safe-t); white-space: normal; max-width: calc(var(--w) - var(--safe-l) - var(--safe-r) - 112px);
+      }
+      [data-format="vertical"] #t1-ov-outline .marker-title { font-size: calc(58px * var(--type)); }
+      [data-format="square"] #t1-ov-outline .marker-title { font-size: 76px; }
+      [data-format="vertical"] #t1-ov-outline .notes, [data-format="square"] #t1-ov-outline .notes { right: var(--safe-r); }
+      [data-format="vertical"] #t1-ov-outline .notes { top: calc(var(--safe-t) + 140px); }
+      [data-format="square"] #t1-ov-outline .notes { top: calc(var(--safe-t) + 150px); }
+      [data-format="vertical"] #t1-ov-outline .b-text { font-size: calc(50px * var(--type)); }
+      [data-format="vertical"] #t1-ov-outline .sub-text { font-size: calc(34px * var(--type)); }
+      [data-format="square"] #t1-ov-outline .b-text { font-size: 52px; }
+      [data-format="square"] #t1-ov-outline .sub-text { font-size: 36px; }
+      [data-format="vertical"] #t1-ov-outline .sub-row, [data-format="square"] #t1-ov-outline .sub-row { margin-left: 50px; margin-bottom: 46px; }
+      [data-format="vertical"] #t1-ov-outline .sub-dash, [data-format="square"] #t1-ov-outline .sub-dash { margin-top: 20px; }
     </style>
   </head>
   <body>

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

@@ -14,7 +14,7 @@
     <style>
       html, body { margin: 0; }
       #t1-ov-phase {
-        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-phase .title {
-        position: absolute; top: 68px; left: 50%; transform: translateX(-50%) skewX(var(--marker-skew));
+        position: absolute; top: calc(var(--safe-t) + 14px); left: 50%; transform: translateX(-50%) skewX(var(--marker-skew));
         background: var(--yellow); padding: 8px 32px; z-index: 7;
         font-weight: var(--wt-black); font-size: var(--size-title);
         letter-spacing: var(--track-tight); text-transform: uppercase; white-space: nowrap;
@@ -50,7 +50,7 @@
       #t1-ov-phase .band {
         position: absolute; left: 0; right: 0; height: 230px;
         display: flex; align-items: center; overflow: hidden;
-        border-bottom: 4px solid var(--ink);
+        border-bottom: 4px solid var(--ink); padding-right: var(--safe-r);
       }
       #t1-ov-phase .band:first-child { border-top: 4px solid var(--ink); }
 
@@ -62,7 +62,7 @@
       #t1-ov-phase .band-num {
         flex-shrink: 0;
         width: 320px; text-align: right; padding-right: 56px;
-        font-weight: var(--wt-black); font-size: 160px; line-height: 1;
+        font-weight: var(--wt-black); font-size: calc(160px * var(--type)); line-height: 1;
         letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--ink);
         opacity: 0.12;
         /* on yellow band override */
@@ -87,7 +87,7 @@
       }
 
       #t1-ov-phase .band-title {
-        font-weight: var(--wt-black); font-size: 80px; line-height: 1;
+        font-weight: var(--wt-black); font-size: calc(80px * var(--type)); line-height: 1;
         letter-spacing: var(--track-tight); color: var(--ink);
       }
 
@@ -103,7 +103,7 @@
         width: 108px; height: 108px; border-radius: 50%;
         background: var(--ink); color: var(--paper);
         display: flex; align-items: center; justify-content: center;
-        font-weight: var(--wt-black); font-size: 56px;
+        font-weight: var(--wt-black); font-size: calc(56px * var(--type));
         font-variant-numeric: tabular-nums;
         flex-shrink: 0;
       }
@@ -111,11 +111,38 @@
 
       /* source */
       #t1-ov-phase .source {
-        position: absolute; left: 56px; bottom: 54px; z-index: 8;
+        position: absolute; left: var(--safe-l); bottom: var(--safe-b); z-index: 8;
         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: full-bleed bands stay, stacked under the title inside the safe area;
+         the faint numeral and rule drop out, the badge sits at the safe left edge and the text
+         column fills the rest of the safe width. */
+      [data-format="vertical"] #t1-ov-phase .title, [data-format="square"] #t1-ov-phase .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) - 64px);
+        white-space: normal; text-align: center;
+      }
+      [data-format="vertical"] #t1-ov-phase .title { font-size: calc(64px * var(--type)); }
+      [data-format="square"] #t1-ov-phase .title { font-size: 80px; }
+      [data-format="vertical"] #t1-ov-phase .bands { top: calc(var(--safe-t) + 130px); }
+      [data-format="square"] #t1-ov-phase .bands { top: calc(var(--safe-t) + 136px); }
+      [data-format="vertical"] #t1-ov-phase .band, [data-format="square"] #t1-ov-phase .band { height: 250px; }
+      [data-format="vertical"] #t1-ov-phase .band-2, [data-format="square"] #t1-ov-phase .band-2 { top: 254px; }
+      [data-format="vertical"] #t1-ov-phase .band-3, [data-format="square"] #t1-ov-phase .band-3 { top: 508px; }
+      [data-format="vertical"] #t1-ov-phase .band-num, [data-format="square"] #t1-ov-phase .band-num,
+      [data-format="vertical"] #t1-ov-phase .band-rule, [data-format="square"] #t1-ov-phase .band-rule { display: none; }
+      [data-format="vertical"] #t1-ov-phase .badge, [data-format="square"] #t1-ov-phase .badge { left: var(--safe-l); width: 96px; height: 96px; }
+      [data-format="vertical"] #t1-ov-phase .band-text, [data-format="square"] #t1-ov-phase .band-text { padding-left: calc(var(--safe-l) + 130px); }
+      [data-format="vertical"] #t1-ov-phase .band-title { font-size: calc(62px * var(--type)); }
+      [data-format="vertical"] #t1-ov-phase .band-sub { font-size: calc(28px * var(--type)); }
+      [data-format="square"] #t1-ov-phase .band-title { font-size: 68px; }
+      [data-format="square"] #t1-ov-phase .badge { font-size: 50px; }
+      [data-format="square"] #t1-ov-phase .band { height: 240px; }
+      [data-format="square"] #t1-ov-phase .band-2 { top: 244px; }
+      [data-format="square"] #t1-ov-phase .band-3 { top: 488px; }
     </style>
   </head>
   <body>

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

@@ -13,7 +13,7 @@
     <style>
       html, body { margin: 0; }
       #t1-ov-quad {
-        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-quad .title {
-        position: absolute; top: 62px; left: 50%; transform: translateX(-50%) skewX(var(--marker-skew));
+        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: 3;
         font-weight: var(--wt-black); font-size: var(--size-title);
         letter-spacing: var(--track-tight); text-transform: uppercase; white-space: nowrap;
@@ -45,7 +45,7 @@
         background: var(--ink); z-index: 2;
       }
       #t1-ov-quad .divider-v {
-        position: absolute; top: 220px; bottom: 0; left: 960px; width: 5px;
+        position: absolute; top: 220px; bottom: 0; left: calc(var(--w) / 2); width: 5px;
         background: var(--ink); z-index: 2;
       }
       /* quadrant tiles */
@@ -57,21 +57,21 @@
         display: flex; flex-direction: column; justify-content: center;
         padding: 56px 72px;
       }
-      #t1-ov-quad .q1 { padding-right: 56px; }
-      #t1-ov-quad .q2 { padding-left: 56px; }
-      #t1-ov-quad .q3 { padding-right: 56px; }
-      #t1-ov-quad .q4 { padding-left: 56px; }
+      #t1-ov-quad .q1 { padding-right: 56px; padding-left: var(--safe-l); }
+      #t1-ov-quad .q2 { padding-left: 56px; padding-right: var(--safe-r); }
+      #t1-ov-quad .q3 { padding-right: 56px; padding-left: var(--safe-l); }
+      #t1-ov-quad .q4 { padding-left: 56px; padding-right: var(--safe-r); }
       /* number chip */
       #t1-ov-quad .chip {
         display: inline-flex; align-items: center; justify-content: center;
         width: 72px; height: 72px;
         background: var(--ink); color: var(--paper);
-        font-weight: var(--wt-black); font-size: 40px;
+        font-weight: var(--wt-black); font-size: calc(40px * var(--type));
         font-variant-numeric: tabular-nums; margin-bottom: 22px;
       }
       #t1-ov-quad .q1 .chip, #t1-ov-quad .q2 .chip { background: var(--yellow); color: var(--ink); }
       #t1-ov-quad .topic {
-        font-weight: var(--wt-black); font-size: 60px;
+        font-weight: var(--wt-black); font-size: calc(60px * var(--type));
         line-height: 1.05; letter-spacing: var(--track-tight); margin-bottom: 14px;
       }
       #t1-ov-quad .sub {
@@ -80,11 +80,42 @@
       }
       /* source */
       #t1-ov-quad .source {
-        position: absolute; left: 130px; bottom: 34px; z-index: 4;
+        position: absolute; left: calc(var(--safe-l) + 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: the four quadrants become four rows (chip left, topic and sub right) split by
+         rules; the cross dividers are hidden. Title centred on the safe box and allowed to wrap. */
+      [data-format="vertical"] #t1-ov-quad .title, [data-format="square"] #t1-ov-quad .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-quad .title { font-size: calc(54px * var(--type)); }
+      [data-format="vertical"] #t1-ov-quad .divider-h, [data-format="vertical"] #t1-ov-quad .divider-v { display: none; }
+      [data-format="vertical"] #t1-ov-quad .quads {
+        left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 190px); bottom: calc(var(--safe-b) + 30px);
+        grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr);
+      }
+      [data-format="vertical"] #t1-ov-quad .q {
+        display: grid; grid-template-columns: 72px 1fr; column-gap: 30px; align-content: center;
+        padding: 0; border-top: 3px solid var(--ink);
+      }
+      [data-format="vertical"] #t1-ov-quad .chip { grid-column: 1; grid-row: 1 / span 2; margin: 6px 0 0 0; }
+      [data-format="vertical"] #t1-ov-quad .topic { grid-column: 2; margin-bottom: 8px; font-size: calc(52px * var(--type)); }
+      [data-format="vertical"] #t1-ov-quad .sub { grid-column: 2; }
+      [data-format="vertical"] #t1-ov-quad .source, [data-format="square"] #t1-ov-quad .source { left: var(--safe-l); bottom: var(--safe-b); }
+      /* Square: keep the 2x2 cross, fitted to the safe box. */
+      [data-format="square"] #t1-ov-quad .title { font-size: 64px; }
+      [data-format="square"] #t1-ov-quad .quads { left: var(--safe-l); right: var(--safe-r); top: calc(var(--safe-t) + 130px); bottom: calc(var(--safe-b) + 40px); }
+      [data-format="square"] #t1-ov-quad .q { padding: 24px 28px; }
+      [data-format="square"] #t1-ov-quad .q1, [data-format="square"] #t1-ov-quad .q3 { padding-left: 0; }
+      [data-format="square"] #t1-ov-quad .q2, [data-format="square"] #t1-ov-quad .q4 { padding-right: 0; }
+      [data-format="square"] #t1-ov-quad .topic { font-size: 54px; }
+      [data-format="square"] #t1-ov-quad .divider-v { top: calc(var(--safe-t) + 130px); bottom: calc(var(--safe-b) + 40px); }
+      [data-format="square"] #t1-ov-quad .divider-h { top: calc(var(--safe-t) + 130px + (var(--h) - var(--safe-t) - var(--safe-b) - 170px) / 2); }
     </style>
   </head>
   <body>

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

@@ -13,7 +13,7 @@
     <style>
       html, body { margin: 0; }
       #t1-ov-road {
-        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-road .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: 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,7 +42,7 @@
 
       /* intro sub-line */
       #t1-ov-road .intro {
-        position: absolute; top: 218px; left: 50%; transform: translateX(-50%);
+        position: absolute; top: calc(var(--safe-t) + 164px); 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);
@@ -50,12 +50,12 @@
 
       /* SVG canvas for the road path */
       #t1-ov-road .road-svg {
-        position: absolute; left: 0; top: 280px; width: 1920px; height: 720px; z-index: 2;
+        position: absolute; left: 0; top: 280px; width: var(--w); height: 720px; z-index: 2;
       }
 
       /* milestone stop blocks */
       #t1-ov-road .stops {
-        position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 4;
+        position: absolute; left: 0; top: 0; width: var(--w); height: var(--h); z-index: 4;
         pointer-events: none;
       }
       #t1-ov-road .stop {
@@ -65,7 +65,7 @@
         width: 72px; height: 72px;
         background: var(--ink); color: var(--paper);
         display: flex; align-items: center; justify-content: center;
-        font-weight: var(--wt-black); font-size: 36px; font-variant-numeric: tabular-nums;
+        font-weight: var(--wt-black); font-size: calc(36px * var(--type)); font-variant-numeric: tabular-nums;
         transform: rotate(45deg);
       }
       #t1-ov-road .stop-num {
@@ -78,14 +78,56 @@
         text-transform: uppercase; color: var(--ink);
         white-space: nowrap; max-width: 380px;
       }
+      /* landscape stop positions on the road (were inline styles) */
+      #t1-ov-road .s1 { left: 44px; top: 780px; }
+      #t1-ov-road .s2 { left: 604px; top: 400px; }
+      #t1-ov-road .s3 { left: 1244px; top: 760px; }
+      #t1-ov-road .s4 { left: 1804px; top: 440px; }
+      #t1-ov-road .stop .stop-label { left: 90px; top: -4px; transform: none; }
+      #t1-ov-road .s4 .stop-label { left: auto; right: 90px; text-align: right; }
+      /* the portrait road used in vertical and square */
+      #t1-ov-road .road-alt { display: none; position: absolute; z-index: 2; }
 
       /* source */
       #t1-ov-road .source {
-        position: absolute; left: 130px; bottom: 60px; z-index: 7;
+        position: absolute; left: calc(var(--safe-l) + 34px); bottom: calc(var(--safe-b) + 6px); z-index: 7;
         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: the wide road is swapped for a portrait switchback (.road-alt, an
+         800x700 box) and the stops sit on its bends; labels point into the frame. Title and intro
+         are centred on the safe box; source at the bottom left of the safe area. */
+      [data-format="vertical"] #t1-ov-road .title, [data-format="square"] #t1-ov-road .title,
+      [data-format="vertical"] #t1-ov-road .intro, [data-format="square"] #t1-ov-road .intro {
+        top: var(--safe-t); left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r)) / 2);
+      }
+      [data-format="vertical"] #t1-ov-road .title, [data-format="square"] #t1-ov-road .title {
+        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-road .title { font-size: calc(64px * var(--type)); }
+      [data-format="square"] #t1-ov-road .title { font-size: 80px; }
+      [data-format="vertical"] #t1-ov-road .intro, [data-format="square"] #t1-ov-road .intro { top: calc(var(--safe-t) + 112px); width: calc(var(--w) - var(--safe-l) - var(--safe-r)); }
+      [data-format="vertical"] #t1-ov-road .road-svg, [data-format="square"] #t1-ov-road .road-svg { display: none; }
+      [data-format="vertical"] #t1-ov-road .road-alt, [data-format="vertical"] #t1-ov-road .stops {
+        display: block; left: var(--safe-l); top: calc(var(--safe-t) + 250px);
+        width: calc(var(--w) - var(--safe-l) - var(--safe-r)); height: calc((var(--w) - var(--safe-l) - var(--safe-r)) * 7 / 8);
+      }
+      [data-format="square"] #t1-ov-road .road-alt, [data-format="square"] #t1-ov-road .stops {
+        display: block; top: calc(var(--safe-t) + 190px); height: 680px; width: calc(680px * 8 / 7);
+        left: calc(var(--safe-l) + (var(--w) - var(--safe-l) - var(--safe-r) - 680px * 8 / 7) / 2);
+      }
+      /* stop centres on the runs: (100,100) (540,350) (250,600) (720,600) of the 800x700 road box; labels hang below the pins */
+      [data-format="vertical"] #t1-ov-road .s1, [data-format="square"] #t1-ov-road .s1 { left: calc(100 / 800 * 100% - 36px); top: calc(100 / 700 * 100% - 36px); }
+      [data-format="vertical"] #t1-ov-road .s2, [data-format="square"] #t1-ov-road .s2 { left: calc(540 / 800 * 100% - 36px); top: calc(350 / 700 * 100% - 36px); }
+      [data-format="vertical"] #t1-ov-road .s3, [data-format="square"] #t1-ov-road .s3 { left: calc(250 / 800 * 100% - 36px); top: calc(600 / 700 * 100% - 36px); }
+      [data-format="vertical"] #t1-ov-road .s4, [data-format="square"] #t1-ov-road .s4 { left: calc(720 / 800 * 100% - 36px); top: calc(600 / 700 * 100% - 36px); }
+      [data-format="vertical"] #t1-ov-road .s2 .stop-label, [data-format="square"] #t1-ov-road .s2 .stop-label { top: 96px; left: auto; right: -20px; text-align: right; }
+      [data-format="vertical"] #t1-ov-road .s1 .stop-label, [data-format="square"] #t1-ov-road .s1 .stop-label,
+      [data-format="vertical"] #t1-ov-road .s3 .stop-label, [data-format="square"] #t1-ov-road .s3 .stop-label { top: 96px; left: 0; }
+      [data-format="vertical"] #t1-ov-road .s4 .stop-label, [data-format="square"] #t1-ov-road .s4 .stop-label { top: 96px; right: -20px; }
+      [data-format="vertical"] #t1-ov-road .source, [data-format="square"] #t1-ov-road .source { left: var(--safe-l); bottom: var(--safe-b); }
     </style>
   </head>
   <body>
@@ -113,29 +155,34 @@
               fill="none" stroke="var(--yellow)" stroke-width="6"
               stroke-dasharray="40 28" stroke-linecap="round"/>
       </svg>
+      <!-- portrait road for vertical and square: three runs joined by U-turns, down the safe box -->
+      <svg class="road-alt" viewBox="0 0 800 700" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
+        <path d="M 60,100 L 600,100 C 770,100 770,350 600,350 L 200,350 C 30,350 30,600 200,600 L 740,600" fill="none" stroke="var(--ink)" stroke-width="44" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M 60,100 L 600,100 C 770,100 770,350 600,350 L 200,350 C 30,350 30,600 200,600 L 740,600" fill="none" stroke="var(--paper-2)" stroke-width="30" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M 60,100 L 600,100 C 770,100 770,350 600,350 L 200,350 C 30,350 30,600 200,600 L 740,600" fill="none" stroke="var(--yellow)" stroke-width="5" stroke-dasharray="32 22" stroke-linecap="round"/>
+      </svg>
 
       <!-- milestone stops - positioned at the 4 path anchor-ish points -->
       <div class="stops">
         <!-- Stop 1: near x=80, y=280+560=840 in comp coords -->
-        <div class="stop s1" style="left:44px; top:780px;">
+        <div class="stop s1">
           <div class="stop-pin"><span class="stop-num">1</span></div>
-          <div class="stop-label" data-slot="stop1" style="left:90px; top:-4px; transform:none;">Discovery</div>
+          <div class="stop-label" data-slot="stop1">Discovery</div>
         </div>
         <!-- Stop 2: near x=640, y=280+180=460 -->
-        <div class="stop s2" style="left:604px; top:400px;">
+        <div class="stop s2">
           <div class="stop-pin"><span class="stop-num">2</span></div>
-          <div class="stop-label" data-slot="stop2" style="left:90px; top:-4px; transform:none;">Planning</div>
+          <div class="stop-label" data-slot="stop2">Planning</div>
         </div>
         <!-- Stop 3: near x=1280, y=280+540=820 -->
-        <div class="stop s3" style="left:1244px; top:760px;">
+        <div class="stop s3">
           <div class="stop-pin"><span class="stop-num">3</span></div>
-          <div class="stop-label" data-slot="stop3" style="left:90px; top:-4px; transform:none;">Execution</div>
+          <div class="stop-label" data-slot="stop3">Execution</div>
         </div>
         <!-- Stop 4: near x=1840, y=280+220=500 -->
-        <div class="stop s4" style="left:1804px; top:440px;">
+        <div class="stop s4">
           <div class="stop-pin"><span class="stop-num">4</span></div>
-          <div class="stop-label" data-slot="stop4" style="right:0; left:auto; transform:none;
-            top:-4px; text-align:right; right:90px;">Delivery</div>
+          <div class="stop-label" data-slot="stop4">Delivery</div>
         </div>
       </div>
 
@@ -162,6 +209,8 @@
       const pathLen = initPath(roadPath);
       initPath(roadSurface);
       initPath(roadCenter);
+      const roadAlt = Array.from(document.querySelectorAll("#t1-ov-road .road-alt path"));
+      roadAlt.forEach(initPath);
 
       const tl = gsap.timeline({ paused: true });
 
@@ -176,7 +225,7 @@
         { autoAlpha: 0, y: 14, duration: 0.3 }, 0.42);
 
       // road draws in (stepped, choppy)
-      tl.to([roadPath, roadSurface, roadCenter],
+      tl.to([roadPath, roadSurface, roadCenter].concat(roadAlt),
         { strokeDashoffset: 0, duration: 0.8, ease: "steps(12)" }, 0.55);
 
       // stops pop along the road