luckiest-co 1.0.32 → 1.0.34

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lt-geopin.html

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-geo {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -23,7 +23,7 @@
       /* Bloom pools on the ground beneath the pin */
       #t2-lt-geo .local-bloom {
         position: absolute;
-        left: 66px; bottom: 88px;
+        left: calc(var(--safe-l) - 14px); bottom: calc(var(--safe-b) + 34px);
         width: 460px; height: 220px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 28% 85%,
@@ -38,7 +38,7 @@
       /* Component stacks vertically: pin → pill */
       #t2-lt-geo .stack {
         position: absolute;
-        left: 80px; bottom: 108px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 54px);
         display: flex; flex-direction: column;
         align-items: flex-start; gap: 0;
         z-index: 2;
@@ -89,7 +89,7 @@
       #t2-lt-geo .place {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 34px;
+        font-size: calc(34px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -100,13 +100,19 @@
 
       #t2-lt-geo .coords {
         font-family: var(--font-mono);
-        font-size: 18px;
+        font-size: calc(18px * var(--type));
         font-weight: var(--wt-reg);
         letter-spacing: 0.06em;
         color: var(--accent);
         text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.60);
         white-space: nowrap;
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-geo .stack, [data-format="square"] #t2-lt-geo .stack {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-geo .local-bloom, [data-format="square"] #t2-lt-geo .local-bloom { bottom: calc(var(--safe-b) - 20px); }
+      [data-format="vertical"] #t2-lt-geo [data-slot], [data-format="square"] #t2-lt-geo [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lt-glasscard.html

@@ -14,7 +14,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-glass {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -22,7 +22,7 @@
       /* Localized bloom behind the card only */
       #t2-lt-glass .local-bloom {
         position: absolute;
-        left: 60px; bottom: 100px;
+        left: calc(var(--safe-l) - 20px); bottom: calc(var(--safe-b) + 46px);
         width: 520px; height: 220px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 50% 80%,
@@ -37,7 +37,7 @@
       /* Main glass card */
       #t2-lt-glass .card {
         position: absolute;
-        left: 80px; bottom: 120px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 66px);
         width: 460px;
         padding: 28px 36px 26px;
         background: var(--glass-bg-dark);
@@ -66,7 +66,7 @@
       #t2-lt-glass .name {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 36px;
+        font-size: calc(36px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -77,7 +77,7 @@
       #t2-lt-glass .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         line-height: 1.3;
@@ -95,6 +95,12 @@
         vertical-align: middle;
         position: relative; top: -1px;
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-glass .card, [data-format="square"] #t2-lt-glass .card {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-glass .local-bloom, [data-format="square"] #t2-lt-glass .local-bloom { bottom: calc(var(--safe-b) - 20px); }
+      [data-format="vertical"] #t2-lt-glass [data-slot], [data-format="square"] #t2-lt-glass [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lt-gradient.html

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-grad {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -23,7 +23,7 @@
       /* Localized bloom - follows the gradient color shift */
       #t2-lt-grad .local-bloom {
         position: absolute;
-        left: 52px; bottom: 108px;
+        left: calc(var(--safe-l) - 28px); bottom: calc(var(--safe-b) + 54px);
         width: 540px; height: 200px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 30% 80%,
@@ -38,7 +38,7 @@
       /* Card */
       #t2-lt-grad .card {
         position: absolute;
-        left: 80px; bottom: 128px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 74px);
         padding: 24px 38px 24px;
         background: var(--glass-bg-dark);
         backdrop-filter: var(--glass-blur);
@@ -62,7 +62,7 @@
       #t2-lt-grad .name {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 46px;
+        font-size: calc(46px * var(--type));
         letter-spacing: var(--track-snug);
         line-height: 1.05;
         /* gradient fill */
@@ -84,12 +84,18 @@
       #t2-lt-grad .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         color: var(--text-dim);
         letter-spacing: 0.01em;
         line-height: 1.3;
         white-space: nowrap;
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-grad .card, [data-format="square"] #t2-lt-grad .card {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-grad .local-bloom, [data-format="square"] #t2-lt-grad .local-bloom { bottom: calc(var(--safe-b) - 20px); }
+      [data-format="vertical"] #t2-lt-grad [data-slot], [data-format="square"] #t2-lt-grad [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lt-gradientbar.html

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-gbar {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -43,7 +43,7 @@
 
       /* Main gradient bar */
       #t2-lt-gbar .bar {
-        padding: 22px 80px 24px;
+        padding: 22px 80px 24px var(--safe-l);
         background: linear-gradient(90deg,
           rgba(var(--accent-rgb), 0.22) 0%,
           rgba(16, 22, 34, 0.70) 32%,
@@ -89,7 +89,7 @@
       #t2-lt-gbar .name {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 40px;
+        font-size: calc(40px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -108,7 +108,7 @@
       #t2-lt-gbar .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         letter-spacing: 0.025em;
         color: var(--text-dim);
         line-height: 1.3;
@@ -124,6 +124,14 @@
         background: var(--accent);
         box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.80);
       }
+      /* Vertical and square: the bar keeps bleeding from the left edge, sits on the safe bottom, the bloom
+         follows it, and slots wrap inside the safe width. */
+      [data-format="vertical"] #t2-lt-gbar .bar-wrap, [data-format="square"] #t2-lt-gbar .bar-wrap {
+        bottom: var(--safe-b); width: min(900px, calc(var(--w) - var(--safe-r)));
+      }
+      [data-format="vertical"] #t2-lt-gbar .bar, [data-format="square"] #t2-lt-gbar .bar { padding-right: 24px; }
+      [data-format="vertical"] #t2-lt-gbar .local-bloom, [data-format="square"] #t2-lt-gbar .local-bloom { bottom: calc(var(--safe-b) - 20px); }
+      [data-format="vertical"] #t2-lt-gbar [data-slot], [data-format="square"] #t2-lt-gbar [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lt-handlebar.html

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-hndl {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-mono);
       }
@@ -23,7 +23,7 @@
       /* Localized glow - tight, behind the pill */
       #t2-lt-hndl .local-glow {
         position: absolute;
-        left: 62px; bottom: 124px;
+        left: calc(var(--safe-l) - 18px); bottom: calc(var(--safe-b) + 70px);
         width: 440px; height: 130px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 30% 80%,
@@ -38,7 +38,7 @@
       /* Pill container */
       #t2-lt-hndl .pill {
         position: absolute;
-        left: 80px; bottom: 142px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 88px);
         display: inline-flex;
         align-items: center;
         gap: 0;
@@ -83,7 +83,7 @@
       #t2-lt-hndl .platform-name {
         font-family: var(--font-body);
         font-weight: var(--wt-bold);
-        font-size: 17px;
+        font-size: calc(17px * var(--type));
         letter-spacing: var(--track-wide);
         text-transform: uppercase;
         color: var(--accent);
@@ -102,7 +102,7 @@
       #t2-lt-hndl .handle {
         font-family: var(--font-mono);
         font-weight: 700;
-        font-size: 28px;
+        font-size: calc(28px * var(--type));
         letter-spacing: 0.02em;
         color: var(--white);
         text-shadow: var(--textglow);
@@ -119,6 +119,12 @@
         vertical-align: middle;
         position: relative; top: -1px;
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-hndl .pill, [data-format="square"] #t2-lt-hndl .pill {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-hndl .local-glow, [data-format="square"] #t2-lt-hndl .local-glow { bottom: calc(var(--safe-b) - 18px); }
+      [data-format="vertical"] #t2-lt-hndl [data-slot], [data-format="square"] #t2-lt-hndl [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lt-infochips.html

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-ichips {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -23,7 +23,7 @@
       /* Localized bloom */
       #t2-lt-ichips .local-bloom {
         position: absolute;
-        left: 60px; bottom: 80px;
+        left: calc(var(--safe-l) - 20px); bottom: calc(var(--safe-b) + 26px);
         width: 540px; height: 260px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 40% 80%,
@@ -38,7 +38,7 @@
       /* Stack of chips */
       #t2-lt-ichips .chip-stack {
         position: absolute;
-        left: 80px; bottom: 120px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 66px);
         display: flex;
         flex-direction: column;
         align-items: flex-start;
@@ -99,7 +99,7 @@
       #t2-lt-ichips .chip-name .chip-label {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 34px;
+        font-size: calc(34px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -110,11 +110,17 @@
       #t2-lt-ichips .chip-role .chip-label {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         white-space: nowrap;
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-ichips .chip-stack, [data-format="square"] #t2-lt-ichips .chip-stack {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-ichips .local-bloom, [data-format="square"] #t2-lt-ichips .local-bloom { bottom: calc(var(--safe-b) - 40px); }
+      [data-format="vertical"] #t2-lt-ichips [data-slot], [data-format="square"] #t2-lt-ichips [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lt-lensbar.html

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-lens {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -23,7 +23,7 @@
       /* Localized soft bloom behind the name zone */
       #t2-lt-lens .local-bloom {
         position: absolute;
-        left: 40px; bottom: 90px;
+        left: calc(var(--safe-l) - 40px); bottom: calc(var(--safe-b) + 36px);
         width: 680px; height: 220px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 38% 75%,
@@ -38,7 +38,7 @@
       /* Name zone container */
       #t2-lt-lens .name-zone {
         position: absolute;
-        left: 80px; bottom: 148px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 94px);
         z-index: 3;
         overflow: visible;
       }
@@ -59,7 +59,7 @@
         position: relative;
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 42px;
+        font-size: calc(42px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -71,7 +71,7 @@
       /* The sweeping flare streak - clipped to name zone width + overflow */
       #t2-lt-lens .flare-track {
         position: absolute;
-        left: 80px; bottom: 132px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 78px);
         width: 700px; height: 86px;
         overflow: hidden;
         z-index: 4;
@@ -108,7 +108,7 @@
       /* Role sits below */
       #t2-lt-lens .role-wrap {
         position: absolute;
-        left: 80px; bottom: 100px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 46px);
         z-index: 2;
         display: flex;
         align-items: center;
@@ -124,11 +124,24 @@
       #t2-lt-lens .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         line-height: 1.3;
       }
+      /* Vertical and square: role sits on the safe bottom, the name and flare ride on top of it via
+         anchors so a wrapped role never collides, and slots wrap. */
+      [data-format="vertical"] #t2-lt-lens .role-wrap, [data-format="square"] #t2-lt-lens .role-wrap {
+        anchor-name: --lrole; bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-lens .name-zone, [data-format="square"] #t2-lt-lens .name-zone {
+        position-anchor: --lrole; bottom: calc(anchor(top) + 19px); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-lens .flare-track, [data-format="square"] #t2-lt-lens .flare-track {
+        position-anchor: --lrole; bottom: calc(anchor(top) + 3px); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-lens .local-bloom, [data-format="square"] #t2-lt-lens .local-bloom { bottom: calc(var(--safe-b) - 10px); }
+      [data-format="vertical"] #t2-lt-lens [data-slot], [data-format="square"] #t2-lt-lens [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>
@@ -139,6 +152,11 @@
          data-height="1080">
 
       <div class="local-bloom"></div>
+      <!-- role below (first in the DOM so the name can anchor to it; z-index sets the stacking) -->
+      <div class="role-wrap">
+        <div class="role-line"></div>
+        <div class="role" data-slot="role">AI Education Director, ACME</div>
+      </div>
 
       <!-- name zone (backing + text) -->
       <div class="name-zone">
@@ -152,11 +170,6 @@
         <div class="flare-hot" id="lens-hot"></div>
       </div>
 
-      <!-- role below -->
-      <div class="role-wrap">
-        <div class="role-line"></div>
-        <div class="role" data-slot="role">AI Education Director, ACME</div>
-      </div>
 
     </div>
 

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lt-live.html

@@ -15,7 +15,7 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-live {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -23,7 +23,7 @@
       /* Localized warm bloom (LIVE uses alert red accent glow, not blue) */
       #t2-lt-live .local-bloom {
         position: absolute;
-        left: 50px; bottom: 80px;
+        left: calc(var(--safe-l) - 30px); bottom: calc(var(--safe-b) + 26px);
         width: 600px; height: 250px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 38% 85%,
@@ -38,7 +38,7 @@
       /* Outer card */
       #t2-lt-live .card {
         position: absolute;
-        left: 80px; bottom: 108px;
+        left: var(--safe-l); bottom: calc(var(--safe-b) + 54px);
         padding: 22px 38px 22px 30px;
         min-width: 480px;
         background: var(--glass-bg-dark);
@@ -114,7 +114,7 @@
       #t2-lt-live .live-label {
         font-family: var(--font-mono);
         font-weight: var(--wt-bold);
-        font-size: 18px;
+        font-size: calc(18px * var(--type));
         letter-spacing: 0.20em;
         text-transform: uppercase;
         color: var(--alert);
@@ -126,7 +126,7 @@
       #t2-lt-live .name {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 38px;
+        font-size: calc(38px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -137,11 +137,17 @@
       #t2-lt-live .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         line-height: 1.3;
       }
+      /* Vertical and square: card sits at the bottom of the safe area, bloom follows, slots wrap. */
+      [data-format="vertical"] #t2-lt-live .card, [data-format="square"] #t2-lt-live .card {
+        bottom: var(--safe-b); max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-live .local-bloom, [data-format="square"] #t2-lt-live .local-bloom { bottom: calc(var(--safe-b) - 28px); }
+      [data-format="vertical"] #t2-lt-live [data-slot], [data-format="square"] #t2-lt-live [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lt-location.html

@@ -15,7 +15,9 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-loc {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
+        /* the lower-third group's anchor: left / bottom of the main card */
+        --lt-x: var(--safe-l); --lt-y: calc(var(--safe-b) + 56px);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -23,7 +25,7 @@
       /* Localized bloom */
       #t2-lt-loc .local-bloom {
         position: absolute;
-        left: 50px; bottom: 88px;
+        left: calc(var(--lt-x) - 30px); bottom: calc(var(--lt-y) - 22px);
         width: 540px; height: 250px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 50% 82%,
@@ -38,7 +40,7 @@
       /* Main glass card */
       #t2-lt-loc .card {
         position: absolute;
-        left: 80px; bottom: 110px;
+        left: var(--lt-x); bottom: var(--lt-y);
         width: 520px;
         background: var(--glass-bg-dark);
         backdrop-filter: var(--glass-blur);
@@ -71,7 +73,7 @@
       #t2-lt-loc .name {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 36px;
+        font-size: calc(36px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -82,7 +84,7 @@
       #t2-lt-loc .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 21px;
+        font-size: calc(21px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         line-height: 1.3;
@@ -130,12 +132,18 @@
       #t2-lt-loc .location-text {
         font-family: var(--font-body);
         font-weight: var(--wt-semi);
-        font-size: 20px;
+        font-size: calc(20px * var(--type));
         letter-spacing: 0.03em;
         color: var(--accent);
         text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.55);
         line-height: 1.2;
       }
+      /* Vertical and square: the group sits at the bottom-left of the safe area and slots wrap. */
+      [data-format="vertical"] #t2-lt-loc, [data-format="square"] #t2-lt-loc { --lt-y: var(--safe-b); }
+      [data-format="vertical"] #t2-lt-loc .card, [data-format="square"] #t2-lt-loc .card {
+        top: auto; width: auto; max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-loc [data-slot], [data-format="square"] #t2-lt-loc [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier2/t2-lt-logolock.html

@@ -15,7 +15,9 @@
       html, body { margin: 0; background: transparent; }
 
       #t2-lt-logo {
-        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        position: absolute; inset: 0; width: var(--w); height: var(--h);
+        /* the lower-third group's anchor: left / bottom of the main card */
+        --lt-x: var(--safe-l); --lt-y: calc(var(--safe-b) + 66px);
         background: transparent; overflow: hidden;
         font-family: var(--font-display);
       }
@@ -23,7 +25,7 @@
       /* Localized bloom behind the card */
       #t2-lt-logo .local-bloom {
         position: absolute;
-        left: 50px; bottom: 95px;
+        left: calc(var(--lt-x) - 30px); bottom: calc(var(--lt-y) - 25px);
         width: 540px; height: 230px;
         border-radius: 50%;
         background: radial-gradient(ellipse at 50% 80%,
@@ -38,7 +40,7 @@
       /* Main glass card */
       #t2-lt-logo .card {
         position: absolute;
-        left: 80px; bottom: 120px;
+        left: var(--lt-x); bottom: var(--lt-y);
         display: flex;
         align-items: center;
         gap: 0;
@@ -96,7 +98,7 @@
       #t2-lt-logo .logo-mark span {
         font-family: var(--font-display);
         font-weight: var(--wt-black);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         color: var(--white);
         text-shadow: 0 0 12px rgba(255,255,255,0.80);
         letter-spacing: -0.02em;
@@ -112,7 +114,7 @@
       #t2-lt-logo .name {
         font-family: var(--font-display);
         font-weight: var(--wt-bold);
-        font-size: 36px;
+        font-size: calc(36px * var(--type));
         letter-spacing: var(--track-snug);
         color: var(--white);
         text-shadow: var(--textglow);
@@ -122,7 +124,7 @@
       #t2-lt-logo .role {
         font-family: var(--font-body);
         font-weight: var(--wt-med);
-        font-size: 22px;
+        font-size: calc(22px * var(--type));
         letter-spacing: 0.01em;
         color: var(--text-dim);
         line-height: 1.3;
@@ -139,6 +141,12 @@
         vertical-align: middle;
         position: relative; top: -1px;
       }
+      /* Vertical and square: the group sits at the bottom-left of the safe area and slots wrap. */
+      [data-format="vertical"] #t2-lt-logo, [data-format="square"] #t2-lt-logo { --lt-y: var(--safe-b); }
+      [data-format="vertical"] #t2-lt-logo .card, [data-format="square"] #t2-lt-logo .card {
+        top: auto; width: auto; max-width: calc(var(--w) - var(--safe-l) - var(--safe-r));
+      }
+      [data-format="vertical"] #t2-lt-logo [data-slot], [data-format="square"] #t2-lt-logo [data-slot] { white-space: normal; }
     </style>
   </head>
   <body>