Tighten stack overlap; fix folder top tabs; replace paper with rack.

Cards and trace use negative-margin overlap; folder tabs stay above bodies; new server-rack variant. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-20 22:50:45 -04:00 · 2026-05-20 22:50:45 -04:00 · 17338fc3b4
commit 17338fc3b4
parent 531acf6969
14 changed files with 342 additions and 188 deletions
--- a/README.md
+++ b/README.md
@ -15,10 +15,10 @@ Design concepts for the Levkin software development company homepage.

 | Variant | Path | Metaphor |
 |---------|------|----------|
-| **Cards** | `/stack/` | Dark sticky cards with stack lips |
-| **Folder** | `/stack-folder/` | Manila folders, side tabs |
-| **Paper** | `/stack-paper/` | Cream document pile |
+| **Cards** | `/stack/` | Dark overlapping sticky cards |
+| **Folder** | `/stack-folder/` | Manila folders, top tabs stay visible |
 | **Trace** | `/stack-trace/` | Call-stack / devtools frames |
+| **Rack** | `/stack-rack/` | Server rack 1U units with status LEDs |

 Open `/` to compare all.

--- a/index.html
+++ b/index.html
@ -173,9 +173,13 @@
      font-size: 0.65rem;
      border-left: 12px solid #c9a86c;
    }
-    .preview--paper {
-      background: #3d3832;
-      font-size: 2rem;
+    .preview--rack {
+      background: #12141a;
+      color: #4ade80;
+      font-family: 'DM Mono', monospace;
+      font-size: 0.55rem;
+      letter-spacing: 0.15em;
+      border: 2px solid #2a3040;
    }
    .preview--trace {
      background: #0d0d0f;
@ -241,7 +245,7 @@
        </div>
        <div class="card-body">
          <h2>Stack · Cards</h2>
-          <p>L0–L6 sticky cards with stack lips. Scroll stops at L6.</p>
+          <p>L0–L6 overlapping sticky cards. Scroll stops at L6.</p>
          <span class="tag">default · dark · technical</span>
        </div>
      </a>
@ -249,16 +253,16 @@
        <div class="preview preview--folder">L0│tab</div>
        <div class="card-body">
          <h2>Stack · Folder</h2>
-          <p>Manila folders — colored side tabs, vertical labels.</p>
+          <p>Manila folders — name tabs on top, always visible when stacked.</p>
          <span class="tag">folder · tabs · office</span>
        </div>
      </a>
-      <a class="card" href="/stack-paper/">
-        <div class="preview preview--paper">📄</div>
+      <a class="card" href="/stack-rack/">
+        <div class="preview preview--rack">U0▮U1▮</div>
        <div class="card-body">
-          <h2>Stack · Paper</h2>
-          <p>Offset document pile — cream sheets, slight rotation.</p>
-          <span class="tag">paper · desk · serif</span>
+          <h2>Stack · Rack</h2>
+          <p>Server rack 1U units — LEDs, handles, infra stack.</p>
+          <span class="tag">rack · infra · LEDs</span>
        </div>
      </a>
      <a class="card" href="/stack-trace/">
--- a/stack-folder/folder.css
+++ b/stack-folder/folder.css
@ -1,68 +1,107 @@
 :root {
-  --nav: 2.5rem; --stick: 1rem; --step: 1.1rem; --unit: 56vh;
-  --mono: 'IBM Plex Mono', monospace; --sans: 'Instrument Sans', system-ui, sans-serif;
+  --nav: 2.5rem;
+  --stick: 0.5rem;
+  --step: 1.85rem;
+  --tab-h: 1.65rem;
+  --scroll-tick: 26vh;
+  --overlap: 22vh;
+  --mono: 'IBM Plex Mono', monospace;
+  --sans: 'Instrument Sans', system-ui, sans-serif;
 }
+
 * { box-sizing: border-box; margin: 0; padding: 0; }
+
 body { font-family: var(--sans); background: #2a2824; color: #1a1814; }
+
 .nav {
-  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
-  display: flex; gap: 1rem; padding: 0.5rem 1rem; font-family: var(--mono); font-size: 0.62rem;
+  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
+  display: flex; gap: 1rem; padding: 0.5rem 1rem;
+  font-family: var(--mono); font-size: 0.62rem;
  background: rgba(42,40,36,0.95); color: #c4b8a8;
 }
+
 .nav a { color: #8a8278; text-decoration: none; }
 .depth { margin-left: auto; color: #d4a574; font-weight: 600; }
-.mount { max-width: 520px; margin: 0 auto; padding-top: var(--nav); }
-.scroll-section { height: var(--unit); }
-.scroll-section--final { height: calc(var(--unit) * 0.5); min-height: 240px; }
+
+.mount {
+  max-width: 520px;
+  margin: 0 auto;
+  padding: calc(var(--nav) + 0.5rem) 1rem 0;
+}
+
+.scroll-section { height: var(--scroll-tick); position: relative; }
+.scroll-section--final { height: 16vh; min-height: 180px; }
 .stop { height: 1px; margin-bottom: 3rem; }
+
+/* Folder stacks; tab sits above body and stays visible */
 .folder {
  position: sticky;
-  margin-left: 2.5rem;
+  margin-bottom: calc(-1 * var(--overlap));
+  padding-top: 0;
+}
+
+.tab {
+  position: relative;
+  z-index: 50;
+  display: inline-block;
+  font-family: var(--mono);
+  font-size: 0.58rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  padding: 0.35rem 0.85rem 0.3rem;
+  border-radius: 6px 6px 0 0;
+  border: 1px solid rgba(0,0,0,0.12);
+  border-bottom: none;
+  margin-left: 0.5rem;
+  box-shadow: 0 -2px 8px rgba(0,0,0,0.12);
+}
+
+.body {
+  position: relative;
+  z-index: 1;
  background: #e8e2d4;
  border: 1px solid #c4b8a8;
-  border-radius: 0 6px 6px 6px;
-  box-shadow: 4px 4px 0 rgba(0,0,0,0.15), 0 12px 28px rgba(0,0,0,0.25);
-  min-height: 140px;
-}
-.tab {
-  position: absolute;
-  left: -2.5rem;
-  top: 0;
-  width: 2.35rem;
-  height: 100%;
-  min-height: 120px;
-  writing-mode: vertical-rl;
-  transform: rotate(180deg);
-  font-family: var(--mono);
-  font-size: 0.55rem;
-  letter-spacing: 0.06em;
-  padding: 0.5rem 0.25rem;
-  border-radius: 6px 0 0 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
+  border-radius: 0 8px 8px 8px;
+  padding: 1rem 1.2rem 1.1rem;
+  box-shadow: 3px 6px 20px rgba(0,0,0,0.2);
+  min-height: 100px;
 }
+
 .f0 { top: calc(var(--nav) + var(--stick)); z-index: 1; }
-.f0 .tab { background: #c9a86c; color: #2a2824; }
+.f0 .tab { background: #c9a86c; color: #2a2824; z-index: 107; }
 .f1 { top: calc(var(--nav) + var(--stick) + var(--step)); z-index: 2; }
-.f1 .tab { background: #a8c4d4; }
-.f2 { top: calc(var(--nav) + var(--stick) + var(--step)*2); z-index: 3; }
-.f2 .tab { background: #b8d4a8; }
-.f3 { top: calc(var(--nav) + var(--stick) + var(--step)*3); z-index: 4; }
-.f3 .tab { background: #d4b8c4; }
-.f4 { top: calc(var(--nav) + var(--stick) + var(--step)*4); z-index: 5; }
-.f4 .tab { background: #d4c8a8; }
-.f5 { top: calc(var(--nav) + var(--stick) + var(--step)*5); z-index: 6; }
-.f5 .tab { background: #c4c4c4; }
-.f6 { top: calc(var(--nav) + var(--stick) + var(--step)*6); z-index: 7; }
-.f6 .tab { background: #2a4a6b; color: #e8e2d4; }
-.body { padding: 1.1rem 1.25rem; }
-.body h1, .body h2 { font-size: 1.2rem; margin-bottom: 0.35rem; }
-.body p { font-size: 0.88rem; color: #4a4844; }
+.f1 .tab { background: #a8c4d4; color: #1a2830; z-index: 108; }
+.f2 { top: calc(var(--nav) + var(--stick) + var(--step) * 2); z-index: 3; }
+.f2 .tab { background: #b8d4a8; color: #1a2818; z-index: 109; }
+.f3 { top: calc(var(--nav) + var(--stick) + var(--step) * 3); z-index: 4; }
+.f3 .tab { background: #d4b8c4; color: #2a1820; z-index: 110; }
+.f4 { top: calc(var(--nav) + var(--stick) + var(--step) * 4); z-index: 5; }
+.f4 .tab { background: #d4c8a8; color: #2a2418; z-index: 111; }
+.f5 { top: calc(var(--nav) + var(--stick) + var(--step) * 5); z-index: 6; }
+.f5 .tab { background: #c4c4c4; color: #2a2a2a; z-index: 112; }
+.f6 {
+  top: calc(var(--nav) + var(--stick) + var(--step) * 6);
+  z-index: 7;
+  margin-bottom: 0;
+}
+.f6 .tab { background: #2a4a6b; color: #e8e2d4; z-index: 113; }
+
+.body h1, .body h2 { font-size: 1.15rem; margin-bottom: 0.3rem; }
+.body p { font-size: 0.86rem; color: #4a4844; }
 .body a { color: #2a4a6b; }
-.avail { font-family: var(--mono); font-size: 0.65rem; color: #3d6b3d; margin-top: 0.35rem; }
-.btn { font-family: var(--mono); font-size: 0.68rem; padding: 0.4rem 0.7rem; background: #2a4a6b; color: #fff; text-decoration: none; border-radius: 3px; margin-right: 0.35rem; }
+.avail { font-family: var(--mono); font-size: 0.62rem; color: #3d6b3d; margin-top: 0.3rem; }
+.btn {
+  font-family: var(--mono); font-size: 0.65rem; padding: 0.35rem 0.65rem;
+  background: #2a4a6b; color: #fff; text-decoration: none; border-radius: 3px; margin-right: 0.3rem;
+}
 .btn.ghost { background: transparent; color: #2a4a6b; border: 1px solid #2a4a6b; }
-.foot { display: flex; justify-content: space-between; max-width: 520px; margin: 0 auto; padding: 0 1rem 2rem; font-family: var(--mono); font-size: 0.6rem; color: #6a6458; }
+
+.foot {
+  display: flex; justify-content: space-between; max-width: 520px; margin: 0 auto;
+  padding: 0 1rem 2rem; font-family: var(--mono); font-size: 0.6rem; color: #6a6458;
+}
 .foot a { color: #6a6458; text-decoration: none; }
+
+@media (max-width: 700px) {
+  :root { --step: 1.5rem; --overlap: 20vh; --scroll-tick: 24vh; }
+}
--- a/stack-folder/index.html
+++ b/stack-folder/index.html
@ -9,7 +9,7 @@
  <link rel="stylesheet" href="./folder.css" />
 </head>
 <body>
-  <nav class="nav"><a href="/">← options</a><a href="/stack/">cards</a><span class="depth" id="depth">L0</span></nav>
+  <nav class="nav"><a href="/">← options</a><a href="/stack/">cards</a><a href="/stack-trace/">trace</a><span class="depth" id="depth">L0</span></nav>
  <main class="mount">
    <div class="scroll-section" data-layer="0"><article class="folder f0"><div class="tab">L0 · foundation</div><div class="body"><h1>Levkin</h1><p>Software development · Canada · remote · 15+ yrs</p><p class="avail">Taking new engagements</p></div></article></div>
    <div class="scroll-section" data-layer="1"><article class="folder f1"><div class="tab">L1 · application</div><div class="body"><h2>Custom software</h2><p>Web apps, APIs, tools — TS · Python · .NET</p></div></article></div>
--- a/stack-paper/index.html
+++ b/stack-paper/index.html
@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Levkin — Stack Paper</title>
-  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-  <link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,600&family=IBM+Plex+Mono:wght@400&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="./paper.css" />
-</head>
-<body>
-  <nav class="nav"><a href="/">← options</a><a href="/stack/">cards</a><span id="depth">L0</span></nav>
-  <main class="mount">
-    <div class="scroll-section" data-layer="0"><article class="sheet s0"><span class="edge"></span><div class="inner"><h1>Levkin</h1><p class="sub">Software development · Canada</p><p>15+ years · 8h→2min releases · taking new work</p></div></article></div>
-    <div class="scroll-section" data-layer="1"><article class="sheet s1"><span class="edge"></span><div class="inner"><h2>Custom software</h2><p>Apps, APIs, internal tools</p></div></article></div>
-    <div class="scroll-section" data-layer="2"><article class="sheet s2"><span class="edge"></span><div class="inner"><h2>Automation</h2><p><a href="https://auto.levkin.ca">auto.levkin.ca</a> — n8n, CI/CD, LLMs</p></div></article></div>
-    <div class="scroll-section" data-layer="3"><article class="sheet s3"><span class="edge"></span><div class="inner"><h2>CaseWare</h2><p><a href="https://caseware.levkin.ca">caseware.levkin.ca</a> — MNP, JazzIt</p></div></article></div>
-    <div class="scroll-section" data-layer="4"><article class="sheet s4"><span class="edge"></span><div class="inner"><h2>Quality engineering</h2><p><a href="https://iliadobkin.com">iliadobkin.com</a> — Senior SDET portfolio</p></div></article></div>
-    <div class="scroll-section" data-layer="5"><article class="sheet s5"><span class="edge"></span><div class="inner"><h2>Operations</h2><p><a href="https://jobs.levkin.ca">jobs.levkin.ca</a></p></div></article></div>
-    <div class="scroll-section scroll-section--final" data-layer="6"><article class="sheet s6"><span class="edge"></span><div class="inner"><h2>Engage</h2><p><a href="https://cal.levkin.ca/ilia/consult">Book 15 min</a> · <a href="mailto:hello@levkine.ca">hello@levkine.ca</a></p></div></article></div>
-    <div class="stop"></div>
-  </main>
-  <footer class="foot">levkin.ca · <a href="https://git.levkin.ca">git</a></footer>
-  <script src="./paper.js" type="module"></script>
-</body>
-</html>
--- a/stack-paper/paper.css
+++ b/stack-paper/paper.css
@ -1,46 +0,0 @@
-:root {
-  --nav: 2.5rem; --stick: 0.85rem; --step: 0.95rem; --unit: 54vh;
-  --desk: #3d3832; --paper: #f6f3eb; --ink: #1a1814;
-}
-* { box-sizing: border-box; margin: 0; padding: 0; }
-body { font-family: 'Literata', Georgia, serif; background: var(--desk); color: var(--ink); }
-.nav {
-  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
-  display: flex; gap: 1rem; padding: 0.5rem 1rem;
-  font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem;
-  background: rgba(61,56,50,0.92); color: #c4b8a8;
-}
-.nav a { color: #9a9288; text-decoration: none; }
-#depth { margin-left: auto; color: #8b7355; font-weight: 600; }
-.mount { max-width: 480px; margin: 0 auto; padding: var(--nav) 1.25rem 0; }
-.scroll-section { height: var(--unit); }
-.scroll-section--final { height: calc(var(--unit) * 0.48); min-height: 220px; }
-.stop { height: 1px; margin-bottom: 3rem; }
-.sheet {
-  position: sticky;
-  background: var(--paper);
-  border: 1px solid #d4cfc4;
-  padding: 0;
-  box-shadow: 2px 3px 0 #e0dcd2, 4px 6px 0 #d8d4c8, 0 16px 32px rgba(0,0,0,0.2);
-}
-.edge {
-  display: block;
-  height: 6px;
-  background: linear-gradient(180deg, #ebe6dc, #f6f3eb);
-  border-bottom: 1px solid #e0dcd2;
-}
-.inner { padding: 1.15rem 1.35rem 1.25rem; }
-.inner h1 { font-size: 1.85rem; font-weight: 600; }
-.inner h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.3rem; }
-.sub { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #6a6458; margin-bottom: 0.5rem; }
-.inner p { font-size: 0.9rem; color: #4a4844; line-height: 1.55; }
-.inner a { color: #2a4a6b; }
-.s0 { top: calc(var(--nav) + var(--stick)); z-index: 1; transform: rotate(-0.4deg); margin-left: 0; }
-.s1 { top: calc(var(--nav) + var(--stick) + var(--step)); z-index: 2; transform: rotate(0.3deg); margin-left: 6px; }
-.s2 { top: calc(var(--nav) + var(--stick) + var(--step)*2); z-index: 3; transform: rotate(-0.2deg); margin-left: 12px; }
-.s3 { top: calc(var(--nav) + var(--stick) + var(--step)*3); z-index: 4; transform: rotate(0.5deg); margin-left: 8px; }
-.s4 { top: calc(var(--nav) + var(--stick) + var(--step)*4); z-index: 5; transform: rotate(-0.3deg); margin-left: 14px; }
-.s5 { top: calc(var(--nav) + var(--stick) + var(--step)*5); z-index: 6; transform: rotate(0.2deg); margin-left: 10px; }
-.s6 { top: calc(var(--nav) + var(--stick) + var(--step)*6); z-index: 7; transform: rotate(0deg); margin-left: 4px; }
-.foot { text-align: center; padding: 0 1rem 2.5rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #7a7468; }
-.foot a { color: #7a7468; }
--- a/stack-rack/index.html
+++ b/stack-rack/index.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Levkin — Stack Rack</title>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="./rack.css" />
+</head>
+<body>
+  <nav class="nav"><a href="/">← options</a><a href="/stack-trace/">trace</a><span id="depth">U0</span></nav>
+
+  <div class="rack-frame">
+    <div class="rack-label">LEV-RACK-01</div>
+    <main class="mount">
+      <div class="scroll-section" data-layer="0"><article class="unit u0"><header class="unit-head"><span class="led on"></span><span class="uid">U0</span><span class="svc">foundation</span></header><div class="unit-body"><strong>Levkin</strong><p>Software dev · CA · 15+ yrs · new work open</p></div></article></div>
+      <div class="scroll-section" data-layer="1"><article class="unit u1"><header class="unit-head"><span class="led on"></span><span class="uid">U1</span><span class="svc">application</span></header><div class="unit-body"><strong>custom_software</strong><p>TS · Python · .NET</p></div></article></div>
+      <div class="scroll-section" data-layer="2"><article class="unit u2"><header class="unit-head"><span class="led on"></span><span class="uid">U2</span><span class="svc">automation</span><a href="https://auto.levkin.ca">auto↗</a></header><div class="unit-body"><strong>pipeline_cluster</strong><p>n8n · CI/CD · LLM hooks</p></div></article></div>
+      <div class="scroll-section" data-layer="3"><article class="unit u3"><header class="unit-head"><span class="led on"></span><span class="uid">U3</span><span class="svc">enterprise</span><a href="https://caseware.levkin.ca">caseware↗</a></header><div class="unit-body"><strong>caseware_module</strong><p>MNP · JazzIt · 8h→2m</p></div></article></div>
+      <div class="scroll-section" data-layer="4"><article class="unit u4"><header class="unit-head"><span class="led blink"></span><span class="uid">U4</span><span class="svc">quality</span><a href="https://iliadobkin.com">iliadobkin↗</a></header><div class="unit-body"><strong>sdet_suite</strong><p>traces · Playwright · CI</p></div></article></div>
+      <div class="scroll-section" data-layer="5"><article class="unit u5"><header class="unit-head"><span class="led"></span><span class="uid">U5</span><span class="svc">ops</span><a href="https://jobs.levkin.ca">jobs↗</a></header><div class="unit-body"><strong>job_ops</strong><p>auth · internal</p></div></article></div>
+      <div class="scroll-section scroll-section--final" data-layer="6"><article class="unit u6"><header class="unit-head"><span class="led on"></span><span class="uid">U6</span><span class="svc">interface</span></header><div class="unit-body"><strong>engage()</strong><p><a href="https://cal.levkin.ca/ilia/consult">book_consult</a> · <a href="mailto:hello@levkine.ca">mail</a></p></div></article></div>
+      <div class="stop"></div>
+    </main>
+  </div>
+
+  <footer class="foot"><span>// rack EOT</span><a href="https://git.levkin.ca">git.levkin.ca</a></footer>
+  <script src="./rack.js" type="module"></script>
+</body>
+</html>
--- a/stack-rack/rack.css
+++ b/stack-rack/rack.css
@ -0,0 +1,128 @@
+:root {
+  --nav: 2.5rem;
+  --stick: 0.5rem;
+  --step: 1.7rem;
+  --scroll-tick: 26vh;
+  --overlap: 22vh;
+  --rack: #12141a;
+  --mono: 'IBM Plex Mono', monospace;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: var(--mono);
+  background: #08090c;
+  color: #9ca3af;
+  font-size: 0.75rem;
+}
+
+.nav {
+  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
+  display: flex; gap: 1rem; padding: 0.5rem 1rem; font-size: 0.62rem;
+  background: rgba(8,9,12,0.95); border-bottom: 1px solid #1e2430;
+}
+
+.nav a { color: #5a6478; text-decoration: none; }
+.nav a:hover { color: #4ade80; }
+#depth { margin-left: auto; color: #4ade80; font-weight: 600; }
+
+.rack-frame {
+  max-width: 540px;
+  margin: 0 auto;
+  padding: calc(var(--nav) + 0.75rem) 0.75rem 0;
+  border-left: 4px solid #2a3040;
+  border-right: 4px solid #2a3040;
+  background: linear-gradient(90deg, #0c0e14 0%, var(--rack) 8%, var(--rack) 92%, #0c0e14 100%);
+  min-height: 100vh;
+  box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
+}
+
+.rack-label {
+  font-size: 0.55rem;
+  letter-spacing: 0.2em;
+  color: #3a4458;
+  padding: 0 0.5rem 0.75rem;
+  border-bottom: 1px dashed #2a3040;
+  margin-bottom: 0.5rem;
+}
+
+.mount { padding: 0 0.35rem; }
+
+.scroll-section { height: var(--scroll-tick); position: relative; }
+.scroll-section--final { height: 16vh; min-height: 160px; }
+.stop { height: 1px; margin-bottom: 2rem; }
+
+.unit {
+  position: sticky;
+  margin-bottom: calc(-1 * var(--overlap));
+  border: 1px solid #2a3448;
+  background: #161a22;
+  border-radius: 2px;
+  overflow: hidden;
+  box-shadow: 0 4px 0 #0a0c10, inset 0 1px 0 rgba(255,255,255,0.04);
+}
+
+.unit-head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.35rem 0.65rem;
+  background: #1a2030;
+  border-bottom: 1px solid #2a3448;
+  font-size: 0.62rem;
+  position: relative;
+  z-index: 20;
+}
+
+.led {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #3a4458;
+  flex-shrink: 0;
+}
+
+.led.on { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
+.led.blink { background: #fbbf24; animation: blink 1.2s ease infinite; }
+
+@keyframes blink {
+  50% { opacity: 0.35; }
+}
+
+.uid { color: #6b7280; font-weight: 600; min-width: 1.5rem; }
+.svc { color: #9ca3af; text-transform: uppercase; letter-spacing: 0.08em; flex: 1; }
+.unit-head a {
+  color: #60a5fa;
+  text-decoration: none;
+  font-size: 0.58rem;
+}
+
+.unit-body {
+  padding: 0.55rem 0.65rem 0.65rem;
+  position: relative;
+  z-index: 1;
+}
+
+.unit-body strong { color: #e5e7eb; font-weight: 500; display: block; margin-bottom: 0.15rem; }
+.unit-body p { color: #6b7280; font-size: 0.68rem; }
+.unit-body a { color: #60a5fa; text-decoration: none; }
+.unit-body a:hover { text-decoration: underline; }
+
+.u0 { top: calc(var(--nav) + var(--stick)); z-index: 1; }
+.u1 { top: calc(var(--nav) + var(--stick) + var(--step)); z-index: 2; }
+.u2 { top: calc(var(--nav) + var(--stick) + var(--step) * 2); z-index: 3; }
+.u3 { top: calc(var(--nav) + var(--stick) + var(--step) * 3); z-index: 4; }
+.u4 { top: calc(var(--nav) + var(--stick) + var(--step) * 4); z-index: 5; }
+.u5 { top: calc(var(--nav) + var(--stick) + var(--step) * 5); z-index: 6; }
+.u6 {
+  top: calc(var(--nav) + var(--stick) + var(--step) * 6);
+  z-index: 7;
+  margin-bottom: 0;
+}
+
+.foot {
+  display: flex; justify-content: space-between; max-width: 540px; margin: 0 auto;
+  padding: 1rem 1.25rem 2rem; font-size: 0.58rem; color: #3a4458;
+}
+.foot a { color: #3a4458; text-decoration: none; }
--- a/stack-paper/paper.js
+++ b/stack-paper/paper.js
@ -1,10 +1,15 @@
 const sections = document.querySelectorAll('.scroll-section');
 const depthEl = document.getElementById('depth');
 const mid = () => window.innerHeight * 0.42;
+
 function tick() {
  let a = 0;
-  sections.forEach((s) => { const r = s.getBoundingClientRect(); if (r.top <= mid() && r.bottom > mid()) a = +s.dataset.layer; });
-  depthEl.textContent = `L${a}`;
+  sections.forEach((s) => {
+    const r = s.getBoundingClientRect();
+    if (r.top <= mid() && r.bottom > mid()) a = +s.dataset.layer;
+  });
+  depthEl.textContent = `U${a}`;
 }
+
 window.addEventListener('scroll', tick, { passive: true });
 tick();
--- a/stack-trace/index.html
+++ b/stack-trace/index.html
@ -9,7 +9,7 @@
  <link rel="stylesheet" href="./trace.css" />
 </head>
 <body>
-  <nav class="nav"><a href="/">← options</a><a href="/stack/">cards</a><span id="depth">#0</span></nav>
+  <nav class="nav"><a href="/">← options</a><a href="/stack/">cards</a><a href="/stack-folder/">folder</a><a href="/stack-rack/">rack</a><span id="depth">#0</span></nav>
  <main class="mount">
    <div class="scroll-section" data-layer="0"><article class="frame f0"><code>at Levkin.foundation (levkin.ca:0)</code><div class="frame-body"><strong>Levkin</strong><p>Canadian software practice · 15+ yrs · remote</p></div></article></div>
    <div class="scroll-section" data-layer="1"><article class="frame f1"><code>at Levkin.application (levkin.ca:1)</code><div class="frame-body"><strong>custom_software()</strong><p>TS · Python · .NET · APIs</p></div></article></div>
--- a/stack-trace/trace.css
+++ b/stack-trace/trace.css
@ -1,46 +1,66 @@
 :root {
-  --nav: 2.5rem; --stick: 0.9rem; --step: 1rem; --unit: 54vh;
-  --bg: #0d0d0f; --mono: 'IBM Plex Mono', monospace;
+  --nav: 2.5rem;
+  --stick: 0.5rem;
+  --step: 1.75rem;
+  --scroll-tick: 26vh;
+  --overlap: 22vh;
+  --mono: 'IBM Plex Mono', monospace;
 }
+
 * { box-sizing: border-box; margin: 0; padding: 0; }
-body { font-family: var(--mono); background: var(--bg); color: #b8b4af; font-size: 0.8rem; }
+
+body { font-family: var(--mono); background: #0d0d0f; color: #b8b4af; font-size: 0.8rem; }
+
 .nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; gap: 1rem; padding: 0.5rem 1rem; font-size: 0.62rem;
  background: rgba(13,13,15,0.95); border-bottom: 1px solid #2a2a30;
 }
+
 .nav a { color: #5a5854; text-decoration: none; }
 .nav a:hover { color: #7eb87a; }
-#depth { margin-left: auto; color: #7eb87a; }
+#depth { margin-left: auto; color: #7eb87a; font-weight: 600; }
+
 .mount { max-width: 560px; margin: 0 auto; padding-top: var(--nav); }
-.scroll-section { height: var(--unit); }
-.scroll-section--final { height: calc(var(--unit) * 0.5); min-height: 200px; }
+
+.scroll-section { height: var(--scroll-tick); position: relative; }
+.scroll-section--final { height: 16vh; min-height: 180px; }
 .stop { height: 1px; margin-bottom: 3rem; }
+
 .frame {
  position: sticky;
-  margin: 0 1rem;
+  margin: 0 0.75rem calc(-1 * var(--overlap)) 0.75rem;
  border-left: 3px solid #3a3a44;
  background: #141418;
-  padding: 0.65rem 0 0.65rem 1rem;
-  box-shadow: 0 4px 0 #0a0a0c, 0 8px 20px rgba(0,0,0,0.35);
+  padding: 0.6rem 0 0.6rem 0.9rem;
+  box-shadow: 0 6px 0 #0a0a0c, 0 12px 24px rgba(0,0,0,0.4);
 }
+
 .frame code {
  display: block;
-  font-size: 0.68rem;
+  font-size: 0.66rem;
  color: #6b9b6b;
-  margin-bottom: 0.45rem;
+  margin-bottom: 0.35rem;
 }
+
 .frame-body strong { color: #e8e6e3; font-weight: 500; }
-.frame-body p { color: #6b6966; font-size: 0.75rem; margin-top: 0.2rem; }
+.frame-body p { color: #6b6966; font-size: 0.72rem; margin-top: 0.15rem; }
 .frame-body a { color: #8b9cb3; text-decoration: none; }
 .frame-body a:hover { color: #7eb87a; }
+
 .f0 { top: calc(var(--nav) + var(--stick)); z-index: 1; border-color: #c4a574; }
 .f1 { top: calc(var(--nav) + var(--stick) + var(--step)); z-index: 2; }
-.f2 { top: calc(var(--nav) + var(--stick) + var(--step)*2); z-index: 3; }
-.f3 { top: calc(var(--nav) + var(--stick) + var(--step)*3); z-index: 4; }
-.f4 { top: calc(var(--nav) + var(--stick) + var(--step)*4); z-index: 5; border-color: #6b8b9b; }
-.f5 { top: calc(var(--nav) + var(--stick) + var(--step)*5); z-index: 6; }
-.f6 { top: calc(var(--nav) + var(--stick) + var(--step)*6); z-index: 7; border-color: #7eb87a; }
+.f2 { top: calc(var(--nav) + var(--stick) + var(--step) * 2); z-index: 3; }
+.f3 { top: calc(var(--nav) + var(--stick) + var(--step) * 3); z-index: 4; }
+.f4 { top: calc(var(--nav) + var(--stick) + var(--step) * 4); z-index: 5; border-color: #6b8b9b; }
+.f5 { top: calc(var(--nav) + var(--stick) + var(--step) * 5); z-index: 6; }
+.f6 {
+  top: calc(var(--nav) + var(--stick) + var(--step) * 6);
+  z-index: 7;
+  border-color: #7eb87a;
+  margin-bottom: 0;
+}
+
 .foot {
  display: flex; justify-content: space-between; max-width: 560px; margin: 0 auto;
  padding: 0 1.5rem 2.5rem; font-size: 0.6rem; color: #3a3a40;
--- a/stack/index.html
+++ b/stack/index.html
@ -14,7 +14,7 @@
 <body>
  <nav class="nav">
    <a href="/">← options</a>
-    <span class="variants"><a href="/stack-folder/">folder</a> · <a href="/stack-paper/">paper</a> · <a href="/stack-trace/">trace</a></span>
+    <span class="variants"><a href="/stack-folder/">folder</a> · <a href="/stack-trace/">trace</a> · <a href="/stack-rack/">rack</a></span>
    <span class="depth" id="depth">L0</span>
  </nav>

--- a/stack/stack.css
+++ b/stack/stack.css
@ -3,9 +3,9 @@
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --nav-h: 2.5rem;
-  --stick: 1.15rem;
-  --step: 1.25rem;
-  --scroll-unit: 58vh;
+  --step: 2rem;
+  --scroll-tick: 28vh;
+  --overlap: 24vh;
 }

 * { box-sizing: border-box; margin: 0; padding: 0; }
@ -44,53 +44,51 @@ body {
  padding: var(--nav-h) 1rem 0;
 }

-/* Each section = one scroll “tick”; sticky card stacks inside */
 .scroll-section {
-  height: var(--scroll-unit);
+  height: var(--scroll-tick);
  position: relative;
 }

 .scroll-section--final {
-  height: calc(var(--scroll-unit) * 0.55);
-  min-height: 280px;
+  height: 18vh;
+  min-height: 200px;
 }

-.stack-stop {
-  height: 1px;
-  margin-bottom: 4rem;
-}
+.stack-stop { height: 1px; margin-bottom: 3rem; }

 .layer {
  position: sticky;
-  top: calc(var(--nav-h) + var(--stick));
-  margin: 0 0.5rem;
-  border-radius: 6px 6px 4px 4px;
+  margin: 0 0.35rem calc(-1 * var(--overlap)) 0.35rem;
+  border-radius: 8px 8px 6px 6px;
  border: 1px solid rgba(255,255,255,0.08);
-  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+  box-shadow: 0 10px 32px rgba(0,0,0,0.45);
 }

-/* Visible stack lip — previous layers peek through */
 .layer-tab {
  position: absolute;
-  top: -5px;
-  left: 12px;
-  right: 12px;
-  height: 5px;
-  border-radius: 4px 4px 0 0;
+  top: -6px;
+  left: 10px;
+  right: 10px;
+  height: 6px;
+  border-radius: 5px 5px 0 0;
  background: inherit;
-  filter: brightness(1.15);
-  border: 1px solid rgba(255,255,255,0.06);
+  filter: brightness(1.12);
+  border: 1px solid rgba(255,255,255,0.07);
  border-bottom: none;
-  box-shadow: 0 -2px 6px rgba(0,0,0,0.2);
 }

-.layer-0 { z-index: 1; background: #1c1c20; top: calc(var(--nav-h) + var(--stick)); }
-.layer-1 { z-index: 2; background: #24242c; top: calc(var(--nav-h) + var(--stick) + var(--step)); }
-.layer-2 { z-index: 3; background: #2c2c36; top: calc(var(--nav-h) + var(--stick) + var(--step) * 2); }
-.layer-3 { z-index: 4; background: #343440; top: calc(var(--nav-h) + var(--stick) + var(--step) * 3); }
-.layer-4 { z-index: 5; background: #3c3c4a; top: calc(var(--nav-h) + var(--stick) + var(--step) * 4); }
-.layer-5 { z-index: 6; background: #444454; top: calc(var(--nav-h) + var(--stick) + var(--step) * 5); }
-.layer-6 { z-index: 7; background: #4c4c5e; top: calc(var(--nav-h) + var(--stick) + var(--step) * 6); }
+.layer-0 { z-index: 1; background: #1c1c20; top: calc(var(--nav-h) + 0.5rem); }
+.layer-1 { z-index: 2; background: #24242c; top: calc(var(--nav-h) + 0.5rem + var(--step)); }
+.layer-2 { z-index: 3; background: #2c2c36; top: calc(var(--nav-h) + 0.5rem + var(--step) * 2); }
+.layer-3 { z-index: 4; background: #343440; top: calc(var(--nav-h) + 0.5rem + var(--step) * 3); }
+.layer-4 { z-index: 5; background: #3c3c4a; top: calc(var(--nav-h) + 0.5rem + var(--step) * 4); }
+.layer-5 { z-index: 6; background: #444454; top: calc(var(--nav-h) + 0.5rem + var(--step) * 5); }
+.layer-6 {
+  z-index: 7;
+  background: #4c4c5e;
+  top: calc(var(--nav-h) + 0.5rem + var(--step) * 6);
+  margin-bottom: 0;
+}

 .layer-inner { padding: 1.1rem 1.25rem 1.2rem; }
 .layer-head {
@ -132,7 +130,8 @@ body {
  font-family: var(--mono); font-size: 0.48rem; color: #2a2a30; pointer-events: none;
 }
 .stack-ruler span.active { color: #c4a574; }
+
@media (max-width: 700px) {
  .stack-ruler, .variants { display: none; }
-  :root { --scroll-unit: 52vh; --step: 1rem; }
+  :root { --scroll-tick: 26vh; --overlap: 22vh; --step: 1.65rem; }
 }
--- a/vite.config.js
+++ b/vite.config.js
@ -12,8 +12,8 @@ export default defineConfig({
        vault: resolve(__dirname, 'vault/index.html'),
        stack: resolve(__dirname, 'stack/index.html'),
        stackFolder: resolve(__dirname, 'stack-folder/index.html'),
-        stackPaper: resolve(__dirname, 'stack-paper/index.html'),
        stackTrace: resolve(__dirname, 'stack-trace/index.html'),
+        stackRack: resolve(__dirname, 'stack-rack/index.html'),
      },
    },
  },