fluid root rem + landscape aperture: html font-size = clamp(14px, 2.4vmin, 22px) so 1rem scales w. viewport (rotation-invariant via vmin); --sidebar-w + --h2-col-w CSS vars unify navbar/footer/h2 sizing; container margin-left = sidebar + h2-col-w in landscape so applets clip cleanly under the rotated wordmark; h2 markup splits into two spans (45/55 horizontal title); drop the disparate min-height font-size jumps + 1800px sidebar-doubling overrides

- html { font-size: clamp(14px, 2.4vmin, 22px) } — single sliding scale; everything in rem (sidebar widths, h2 font-size, paddings) scales together. Phone rotation swaps width/height but vmin stays the same → 1rem stays the same → navbar/footer/h2 hold their size between portrait + landscape.
  - :root --sidebar-w: 5rem (replaces the locally-scoped $sidebar-w SCSS var that lived inside @media blocks); --h2-col-w: 3rem for the rotated wordmark column in landscape. var(--sidebar-w) + var(--h2-col-w) are the only knobs that move the layout.
  - Landscape container: margin-left = calc(var(--sidebar-w) + var(--h2-col-w)); margin-right = var(--sidebar-w). Applets are now clipped INSIDE the h2 column, so the rotated "BILLPOST" / "DASHBOARD" wordmark never has content bleeding behind it (the original complaint).
  - h2 markup refactor across 13 templates: <span>BILL</span><span>POST</span> instead of <span>BILL</span>POST. Portrait styling: display: flex; first span flex 0 0 45% + --quaUser colour; second span flex 0 0 55% + --secUser inherited. Per-span text-align: justify + text-justify: inter-character keeps the inter-letter spacing within each span. Landscape resets the flex (single rotated wordmark, not split).
  - Drop the four h2 font-size jumps (min-height: 400/500/800px) — single font-size: 3rem now scales fluidly via root rem. Drop the @media (orientation: landscape) and (max-width: 1100px) h1 override (rem-fluid handles cramped widths). Drop the entire @media (orientation: landscape) and (min-width: 1800px) sidebar-doubling block in _base.scss / _applets.scss / _bud.scss — the rem clamp ceiling already caps the size.
  - _bud.scss + _applets.scss: bud-btn / bud-panel / bud-suggestions / gear-btn / applet menus all switch to var(--sidebar-w)-based positioning; landscape rules are single (no per-breakpoint duplication).
  - Per-spec tradeoff: non-.btn-primary buttons (BYE / NVM / OK / kit-btn / etc.) inherit rem-fluid like everything else and will scale slightly w. viewport. User explicitly OK'd this — they don't need to stay px-fixed.
  - 852 ITs + 24 layout/navbar/bud FTs green; existing geometry assertions are relative or categorical (not exact-px) so the rem clamp doesn't surface failures at the 800x1200 FT viewport.

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/static_src/scss/_applets.scss

@@ -112,11 +112,11 @@
     z-index: 312;
 }
 
-// In landscape: shift gear btn and applet menus left of the footer right sidebar
+// In landscape: shift gear btn and applet menus into the footer-sidebar
-// XL override below doubles sidebar to 8rem — centre items in the wider column.
+// column. Both gear-btn (3rem wide) and the menus are centred in the
+// `var(--sidebar-w)` slot via `right: calc((var(--sidebar-w) - 3rem) / 2)`,
+// which scales with the rem-fluid root — no per-breakpoint override.
 @media (orientation: landscape) {
-    $sidebar-w: 4rem;
-
     .gameboard-page,
     .dashboard-page,
     .wallet-page,
@@ -124,8 +124,8 @@
     .billboard-page,
     .billscroll-page {
         > .gear-btn {
-            right: 1rem;
+            right: calc((var(--sidebar-w) - 3rem) / 2);
-            bottom: 3.95rem;    // same gap above kit btn as portrait; no page-specific overrides needed
+            bottom: 3.95rem;
             top: auto;
         }
     }
@@ -137,32 +137,12 @@
     #id_room_menu,
     #id_billboard_applet_menu,
     #id_billscroll_menu {
-        right: 1rem;
+        right: calc((var(--sidebar-w) - 3rem) / 2);
         bottom: 6.6rem;
         top: auto;
     }
 }
 
-@media (orientation: landscape) and (min-width: 1800px) {
-    // Centre gear btn and menus in the doubled 8rem sidebar (was 0.5rem from right edge)
-    .gameboard-page,
-    .dashboard-page,
-    .wallet-page,
-    .room-page,
-    .billboard-page,
-    .billscroll-page {
-        > .gear-btn { right: 2.5rem; }
-    }
-
-    #id_dash_applet_menu,
-    #id_game_applet_menu,
-    #id_game_kit_menu,
-    #id_wallet_applet_menu,
-    #id_room_menu,
-    #id_billboard_applet_menu,
-    #id_billscroll_menu { right: 2.5rem; }
-}
-
 // ── Applet box visual shell (reusable outside the grid) ────
 %applet-box {
     border:

src/static_src/scss/_base.scss

@@ -1,3 +1,23 @@
+// ── Fluid root rem: 1rem scales with viewport ─────────────────────────────
+// All sidebar/h2/font sizes downstream are in rem, so redefining root
+// font-size against `vmin` (smaller of vh/vw) gives us a single sliding
+// scale that's invariant under phone rotation: rotating swaps width/height
+// but vmin stays the same → 1rem stays the same → navbar/footer/h2 hold
+// their size. Floor 14px on cramped viewports, ceiling 22px on huge ones.
+// 2.4vmin hits 16px (browser default) at vmin=667 (iPhone SE landscape).
+html {
+    font-size: clamp(14px, 2.4vmin, 22px);
+}
+
+// Layout custom properties — single source of truth for the landscape
+// sidebar width (navbar/footer) + the rotated-h2 column slot to the right
+// of the navbar. Container margin-left in landscape adds these so applets
+// can't bleed under the wordmark.
+:root {
+    --sidebar-w: 5rem;
+    --h2-col-w: 3rem;
+}
+
 body {
     display: flex;
     flex-direction: column;
@@ -173,22 +193,35 @@ body {
                 max-width: inherit;
                 margin: 0 1rem;
 
+                // Two-span title: <span>BILL</span><span>POST</span>. First
+                // word (always 4 letters: BILL/DASH/GAME/etc.) gets 45% of
+                // the title width; the variable second word fills the
+                // remaining 55%. Letters within each span spread via
+                // text-align: justify + text-justify: inter-character. The
+                // first-span colour shifts to --quaUser so the two-tone
+                // heading reads "Bill | Post" / "Dash | Sky".
                 h2 {
+                    display: flex;
                     font-size: 3rem;
                     color: rgba(var(--secUser), 0.75);
                     margin-bottom: 1rem;
-                    text-align: justify;
-                    text-align-last: justify;
-                    text-justify: inter-character;
                     text-transform: uppercase;
                     text-shadow:
-                        // 1px 1px 0 rgba(255, 255, 255, 0.125),       // highlight (up-left)
+                        var(--title-shadow-offset) var(--title-shadow-offset) 0 rgba(0, 0, 0, 0.8)
-                        var(--title-shadow-offset) var(--title-shadow-offset) 0 rgba(0, 0, 0, 0.8)    // shadow (down-right)
                     ;
 
-                    span {
+                    > span {
+                        text-align: justify;
+                        text-align-last: justify;
+                        text-justify: inter-character;
+                    }
+                    > span:first-child {
+                        flex: 0 0 45%;
                         color: rgba(var(--quaUser), 0.75);
                     }
+                    > span:last-child {
+                        flex: 0 0 55%;
+                    }
                 }
             }
         }
@@ -201,31 +234,20 @@ body {
     }
 }
 
-@media (orientation: landscape) and (max-width: 1100px) {
-    body .container {
-        .navbar {
-            h1 {
-                font-size: 1rem !important;
-            }
-        }
-    }
-}
-
 @media (orientation: landscape) {
-    $sidebar-w: 5rem;
-
     // ── Sidebar layout: navbar ← left, footer → right ────────────────────────────
     body {
         flex-direction: row;
     }
 
-    // Navbar → fixed left sidebar
+    // Navbar → fixed left sidebar (width derives from --sidebar-w which is
+    // fluid via the rem-redefine above; no per-breakpoint width jumps).
     body .container .navbar {
         position: fixed;
         left: 0;
         top: 0;
         height: 100vh;
-        width: $sidebar-w;
+        width: var(--sidebar-w);
         padding: 0.5rem 0;
         border-bottom: none;
         border-right: 0.1rem solid rgba(var(--secUser), 0.4);
@@ -292,8 +314,8 @@ body {
 
         // Login form: offset from fixed sidebars in landscape
         .input-group {
-            left: $sidebar-w;
+            left: var(--sidebar-w);
-            right: $sidebar-w;
+            right: var(--sidebar-w);
 
             .navbar-text {
                 writing-mode: horizontal-tb;
@@ -306,35 +328,51 @@ body {
         }
     }
 
-    // Container: fill center, compensate for fixed sidebars on both sides.
+    // Container: fill center, compensate for fixed sidebars on both sides
-    // max-width: none overrides the @media (min-width: 1200px) rule above so the
+    // AND for the rotated-h2 column on the left (so applets can't bleed
-    // container fills all available space between the two sidebars on wide screens.
+    // under the wordmark — true aperture clipping).
+    // max-width: none overrides the @media (min-width: 1200px) rule above
+    // so the container fills all available space between the sidebars.
     body .container {
         flex: 1;
         min-width: 0;
         max-width: none;
-        margin-left: $sidebar-w;
+        margin-left: calc(var(--sidebar-w) + var(--h2-col-w));
-        margin-right: $sidebar-w;
+        margin-right: var(--sidebar-w);
         padding: 0 0.5rem;
     }
 
-    // Header row: h2 rotates into the left gutter (just right of the navbar border).
+    // Header row: h2 rotates into the dedicated --h2-col-w slot just right
-    // position:fixed takes h2 out of flow; .row collapses to zero height automatically.
+    // of the navbar. position:fixed takes h2 out of flow; .row collapses
+    // to zero height automatically. Resets portrait flex so the rotated
+    // wordmark renders as one continuous title (not split 45/55 here).
     body .container .row {
         padding: 0;
         margin: 0;
     }
     body .container .row .col-lg-6 h2 {
         position: fixed;
-        left: 5rem; // $sidebar-w — flush with the navbar right border
+        left: var(--sidebar-w);
+        width: var(--h2-col-w);
         top: 50%;
         transform: translateY(-50%) rotate(180deg);
         writing-mode: vertical-rl;
-        font-size: 1.5rem;
+        display: block;            // override portrait flex
+        font-size: 3rem;           // rem-fluid → no min-height jumps
         letter-spacing: 0.4em;
         margin: 0;
         z-index: 85;
         pointer-events: none;
+
+        > span {
+            // Reset portrait justify; the rotated wordmark is one continuous
+            // line, not a two-column split.
+            text-align: initial;
+            text-align-last: initial;
+            text-justify: initial;
+            flex: initial;
+            display: inline;
+        }
     }
 
     // Footer → fixed right sidebar (mirrors navbar approach — explicit right boundary)
@@ -344,7 +382,7 @@ body {
         position: fixed;
         right: 0;
         top: 0;
-        width: $sidebar-w;
+        width: var(--sidebar-w);
         height: 100vh;
         flex-direction: column;
         justify-content: center;
@@ -387,16 +425,11 @@ body {
     }
 }
 
+// Footer typography refinements that only kick in once the viewport is
+// wide enough to clear the cramped phone-landscape regime. Sidebar
+// dimensions themselves are now fluid via rem and don't need a per-
+// breakpoint width override (the old ≥1800px doubling block is gone).
 @media (orientation: landscape) and (min-width: 700px) {
-    body .container .row .col-lg-6 h2 {
-        @media (min-height: 400px) {
-            font-size: 2.5rem;
-        }
-        @media (min-height: 500px) {
-            font-size: 3rem;
-        }
-    }
-
     body #id_footer {
         #id_footer_nav {
             gap: 3rem !important;
@@ -420,61 +453,6 @@ body {
     }
 }
 
-// ── XL landscape (≥1800px): double sidebar widths and scale content ────────────
-@media (orientation: landscape) and (min-width: 1800px) {
-    $sidebar-xl: 8rem;
-
-    body .container .navbar {
-        width: $sidebar-xl;
-
-        .container-fluid {
-            gap: 2rem;
-            padding: 0 0.5rem;
-        }
-
-        .navbar-brand h1  { font-size: 2.4rem; }
-        .navbar-text      { font-size: 0.78rem; }  // 0.65rem × 1.2
-        // .btn-primary      { width: 4rem; height: 4rem; font-size: 0.875rem; }
-
-        .input-group {
-            left:  $sidebar-xl;
-            right: $sidebar-xl;
-        }
-    }
-
-    body .container {
-        margin-left:  $sidebar-xl;
-        margin-right: $sidebar-xl;
-    }
-
-    // h2 page title: keep vertical rotation; shift left to clear the wider XL navbar.
-    body .container .row .col-lg-6 h2 {
-        left: 8rem; // $sidebar-xl
-        @media (min-height: 800px) {
-            font-size: 4.5rem;
-        }
-    }
-
-    body #id_footer {
-        width: $sidebar-xl;
-
-        #id_footer_nav {
-            gap: 8rem !important;
-            a { font-size: 3rem; }
-        }
-
-        .footer-container {
-            font-size: 0.85rem;
-            margin-top: 1rem;
-
-
-            small {
-                font-size: 1.2rem;
-            }
-        }
-    }
-}
-
 @media (orientation: portrait) and (max-width: 500px) {
     body .container  {
         .navbar {

src/static_src/scss/_bud.scss

@@ -12,16 +12,16 @@
     bottom: 0.5rem;
     left: 0.5rem;
 
+    // In landscape, centre the btn within the navbar sidebar — the sidebar
+    // is `var(--sidebar-w)` wide and the btn is 3rem, so left = (sidebar-w
+    // − 3rem) / 2. The clamp on the root font-size means that calc resolves
+    // to a sane value across viewport sizes; no per-breakpoint override.
     @media (orientation: landscape) {
-        left: 1rem;
+        left: calc((var(--sidebar-w) - 3rem) / 2);
         bottom: 0.5rem;
         top: auto;
     }
 
-    @media (orientation: landscape) and (min-width: 1800px) {
-        left: 2.5rem;  // mirror the doubled 8rem sidebar centring
-    }
-
     z-index: 318;
     font-size: 1.75rem;
     cursor: pointer;
@@ -63,13 +63,10 @@
     opacity: 0;
 
     @media (orientation: landscape) {
-        left: calc(4rem + 0.5rem);   // clear the navbar sidebar
+        // Clear both fixed sidebars; --sidebar-w scales fluidly via the
-        right: calc(4rem + 0.5rem);  // clear the footer sidebar
+        // root rem clamp, so this is the only landscape rule needed.
-    }
+        left: calc(var(--sidebar-w) + 0.5rem);
-
+        right: calc(var(--sidebar-w) + 0.5rem);
-    @media (orientation: landscape) and (min-width: 1800px) {
-        left: calc(8rem + 0.5rem);
-        right: calc(8rem + 0.5rem);
     }
 
     #id_recipient {
@@ -138,13 +135,8 @@ html:has(#id_kit_bag_dialog[open]) #id_bud_btn {
     box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
 
     @media (orientation: landscape) {
-        left: calc(4rem + 0.5rem);
+        left: calc(var(--sidebar-w) + 0.5rem);
-        right: calc(4rem + 0.5rem);
+        right: calc(var(--sidebar-w) + 0.5rem);
-    }
-
-    @media (orientation: landscape) and (min-width: 1800px) {
-        left: calc(8rem + 0.5rem);
-        right: calc(8rem + 0.5rem);
     }
 }
 

src/templates/apps/billboard/billboard.html

@@ -1,7 +1,7 @@
 {% extends "core/base.html" %}
 
 {% block title_text %}Billboard{% endblock title_text %}
-{% block header_text %}<span>Bill</span>board{% endblock header_text %}
+{% block header_text %}<span>Bill</span><span>board</span>{% endblock header_text %}
 
 {% block content %}
 <div class="billboard-page">

src/templates/apps/billboard/my_buds.html

@@ -2,7 +2,7 @@
 {% load lyric_extras %}
 
 {% block title_text %}Billbuds{% endblock title_text %}
-{% block header_text %}<span>Bill</span>buds{% endblock header_text %}
+{% block header_text %}<span>Bill</span><span>buds</span>{% endblock header_text %}
 
 
 {% block content %}

src/templates/apps/billboard/my_notes.html

@@ -2,7 +2,7 @@
 {% load static %}
 
 {% block title_text %}Billnotes{% endblock title_text %}
-{% block header_text %}<span>Bill</span>notes{% endblock header_text %}
+{% block header_text %}<span>Bill</span><span>notes</span>{% endblock header_text %}
 
 {% block content %}
 <div class="note-page">

src/templates/apps/billboard/my_posts.html

@@ -2,7 +2,7 @@
 {% load lyric_extras %}
 
 {% block title_text %}Billposts{% endblock title_text %}
-{% block header_text %}<span>Bill</span>posts{% endblock header_text %}
+{% block header_text %}<span>Bill</span><span>posts</span>{% endblock header_text %}
 
 
 {% block content %}

src/templates/apps/billboard/post.html

@@ -2,7 +2,7 @@
 {% load lyric_extras %}
 
 {% block title_text %}Billpost{% endblock title_text %}
-{% block header_text %}<span>Bill</span>post{% endblock header_text %}
+{% block header_text %}<span>Bill</span><span>post</span>{% endblock header_text %}
 
 
 {% block content %}

src/templates/apps/billboard/scroll.html

@@ -1,7 +1,7 @@
 {% extends "core/base.html" %}
 
 {% block title_text %}{{ room.name }} — Billscroll{% endblock %}
-{% block header_text %}<span>Bill</span>scroll{% endblock header_text %}
+{% block header_text %}<span>Bill</span><span>scroll</span>{% endblock header_text %}
 
 {% block content %}
 {% csrf_token %}

src/templates/apps/dashboard/home.html

@@ -4,9 +4,9 @@
 {% block title_text %}Dashboard{% endblock title_text %}
 {% block header_text %}
     {% if user.is_authenticated %}
-        <span>Dash</span>board
+        <span>Dash</span><span>board</span>
     {% else %}
-        <span>Howdy </span>stranger
+        <span>Howdy </span><span>stranger</span>
     {% endif %}
 {% endblock header_text %}
 

src/templates/apps/dashboard/sky.html

@@ -2,7 +2,7 @@
 {% load static %}
 
 {% block title_text %}My Sky{% endblock title_text %}
-{% block header_text %}<span>Dash</span>sky{% endblock header_text %}
+{% block header_text %}<span>Dash</span><span>sky</span>{% endblock header_text %}
 
 {% block content %}
 <div class="sky-page"

src/templates/apps/dashboard/wallet.html

@@ -2,7 +2,7 @@
 {% load static %}
 
 {% block title_text %}Dashwallet{% endblock title_text %}
-{% block header_text %}<span>Dash</span>wallet{% endblock header_text %}
+{% block header_text %}<span>Dash</span><span>wallet</span>{% endblock header_text %}
 
 {% block content %}
     <div class="wallet-page">

src/templates/apps/gameboard/game_kit.html

@@ -2,7 +2,7 @@
 {% load static %}
 
 {% block title_text %}Game Kit{% endblock title_text %}
-{% block header_text %}<span>Game</span>Kit{% endblock header_text %}
+{% block header_text %}<span>Game</span><span>Kit</span>{% endblock header_text %}
 
 {% block content %}
 <div class="gameboard-page">

src/templates/apps/gameboard/gameboard.html

@@ -2,7 +2,7 @@
 {% load static %}
 
 {% block title_text %}Gameboard{% endblock title_text %}
-{% block header_text %}<span>Game</span>board{% endblock header_text %}
+{% block header_text %}<span>Game</span><span>board</span>{% endblock header_text %}
 
 {% block content %}
     <div class="gameboard-page">

src/templates/apps/gameboard/room.html

@@ -2,7 +2,7 @@
 {% load static tooltip_tags %}
 
 {% block title_text %}Gameboard{% endblock title_text %}
-{% block header_text %}<span>Game</span>room{% endblock header_text %}
+{% block header_text %}<span>Game</span><span>room</span>{% endblock header_text %}
 
 {% block content %}
     <div class="room-page" data-room-id="{{ room.id }}"

src/templates/apps/gameboard/tarot_deck.html

@@ -1,7 +1,7 @@
 {% extends "core/base.html" %}
 
 {% block title_text %}Tarot — {{ room.name }}{% endblock title_text %}
-{% block header_text %}<span>Tarot</span> — {{ room.name }}{% endblock header_text %}
+{% block header_text %}<span>Tarot</span><span> — {{ room.name }}</span>{% endblock header_text %}
 
 {% block content %}
 <div class="tarot-page">