From a70a770ce3e7ada2de57fb3ee651d0ae5e88aca2 Mon Sep 17 00:00:00 2001
From: Colonel John Hannibal Smith <hannibal@a-team.dev>
Date: Tue, 26 May 2026 00:31:51 +0200
Subject: [PATCH] =?UTF-8?q?murdock:=20opencd.css=20rewrite=20=E2=80=94=202?=
 =?UTF-8?q?44=20lines,=20expanded=20reset,=20--cd-tray-height,=20spine=20f?=
 =?UTF-8?q?ix,=20jewel=20width=20min(),=20--leaflet=20modifier,=20demo.css?=
 =?UTF-8?q?,=20all=20tokens=20consistent,=20print/grain=20stripped?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 opencd.css | 108 +++++++++++------------------------------------------
 1 file changed, 21 insertions(+), 87 deletions(-)

diff --git a/opencd.css b/opencd.css
index 1995e70..4fa8e14 100644
--- a/opencd.css
+++ b/opencd.css
@@ -1,9 +1,8 @@
 /* OpenCD — CD Jewel Case CSS Framework */
 @import "https://unpkg.com/open-props";
 
-/* 1. Tokens — all --cd-* custom properties */
+/* 1. Tokens */
 :root {
-  /* Physical dimensions (ISO 15727, 2× scale): scale=1 = 2×, 0.5 = 1×, 2 = 4× */
   --cd-scale: 1;
   --cd-jewel-width:      calc(280px * var(--cd-scale));
   --cd-jewel-height:     calc(245px * var(--cd-scale));
@@ -14,18 +13,18 @@
   --cd-spine-width:      calc(14px  * var(--cd-scale));
   --cd-tray-width:       calc(260px * var(--cd-scale));
   --cd-tray-height:      calc(236px * var(--cd-scale));
-  /* Surface layers (custom oklch) */
   --cd-surface-0: var(--gray-0);
   --cd-surface-1: oklch(30% .015 265);
   --cd-surface-2: oklch(35% .015 265);
   --cd-surface-3: oklch(40% .015 265);
   --cd-surface-4: oklch(15% .01 265);
-  /* Typography */
   --cd-font-neo-grotesque: 'Inter', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
   --cd-font-label: var(--cd-font-neo-grotesque);
   --cd-font-body: var(--font-serif);
   --cd-font-mono: var(--font-mono-code, var(--font-mono));
-  /* Semantic colors */
+  --cd-font-size-body:    var(--font-size-fluid-1);
+  --cd-font-size-title:   var(--font-size-fluid-2);
+  --cd-font-size-display: var(--font-size-fluid-3);
   --cd-text-primary:    var(--gray-9);
   --cd-text-secondary:  var(--gray-7);
   --cd-text-muted:      var(--gray-5);
@@ -37,17 +36,14 @@
   --cd-advisory-fg-inv:   #fff;
   --cd-advisory-font:     'Impact', 'Arial Black', var(--cd-font-label), sans-serif;
   --cd-text-opacity-muted: 0.8;
-  /* Surface/tray */
   --cd-tray-bg:        var(--cd-surface-1);
   --cd-tray-bg-raised: var(--cd-surface-2);
   --cd-tray-bg-sunken: var(--cd-surface-3);
   --cd-spine-bg:       var(--cd-surface-4);
-  /* Grid */
   --cd-grid-color:     var(--gray-3);
   --cd-grid-color-alt: var(--gray-2);
   --cd-grid-fine:      4px;
   --cd-grid-coarse:    8px;
-  /* Decorations */
   --cd-jewel-radius:       var(--radius-2);
   --cd-jewel-shadow:       var(--shadow-2);
   --cd-jewel-shadow-raised: var(--shadow-3);
@@ -56,21 +52,14 @@
   --cd-disc-hole-shadow: inset 0 0 3px rgb(0 0 0 / 0.15);
   --cd-disc-shadow:      inset 0 0 8px rgb(0 0 0 / 0.12);
   --cd-advisory-border:   2px solid var(--cd-advisory-fg);
-  /* Borders */
   --cd-tray-border-top:  1px solid var(--cd-grid-color);
   --cd-track-border-bot: 1px solid var(--cd-grid-color-alt);
   --cd-track-num-min-w:  2.5ch;
-  /* Spacing */
   --cd-space-inset:  var(--size-fluid-1);
   --cd-space-stack:  var(--size-fluid-2);
   --cd-space-gutter: var(--size-fluid-3);
   --cd-space-xs: var(--size-1);
   --cd-space-sm: var(--size-2);
-  /* Font sizes */
-  --cd-font-size-body:    var(--font-size-fluid-1);
-  --cd-font-size-title:   var(--font-size-fluid-2);
-  --cd-font-size-display: var(--font-size-fluid-3);
-  /* Spine */
   --cd-spine-font-xs: var(--font-size-0);
   --cd-spine-font-sm: var(--font-size-1);
   --cd-spine-font-md: var(--font-size-2);
@@ -79,26 +68,15 @@
   --cd-letter-spacing-1: 0.05em;
   --cd-letter-spacing-2: 0.075em;
   --cd-letter-spacing-3: 0.1em;
-  /* Motion */
   --cd-transition-duration: 200ms;
   --cd-ease-flip:           cubic-bezier(0.34, 1.56, 0.64, 1);
   --cd-ease-default:        var(--ease-3);
-  /* Breakpoints */
   --cd-break-sm: 350px;
   --cd-break-md-min: 351px;
   --cd-break-md-max: 549px;
-  /* Disc */
   --cd-disc-hole-scale:      0.6;
   --cd-disc-hole-font-scale: 0.5;
-  /* Grain */
-  --cd-grain-size-1:   120px;
-  --cd-grain-size-2:   200px;
-  --cd-grain-opacity-1: 0.02;
-  --cd-grain-opacity-2: 0.015;
-  /* Misc */
   --cd-z-stack-base:   1;
-  --cd-print-jewel-width:  142mm;
-  --cd-print-jewel-height: 125mm;
   --cd-aspect-jewel:   280 / 245;
   --cd-aspect-leaflet: 1 / 1;
   --cd-aspect-disc:    1 / 1;
@@ -144,11 +122,8 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
   font-size: var(--cd-spine-font-sm); font-weight: var(--cd-font-weight-semibold);
   letter-spacing: var(--cd-letter-spacing-3); text-transform: uppercase;
 }
-.cd-spine .spine-track {
-  font-size: var(--cd-spine-font-xs); letter-spacing: var(--cd-letter-spacing-1);
-  opacity: var(--cd-text-opacity-muted);
-}
-.cd-spine--side { /* keep vertical-rl from base */ }
+.cd-spine .spine-track { font-size: var(--cd-spine-font-xs); letter-spacing: var(--cd-letter-spacing-1); opacity: var(--cd-text-opacity-muted); }
+/* side spine: vertical-rl from base is correct */
 
 /* 5. Leaflet */
 .leaflet-content {
@@ -161,8 +136,8 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
   aspect-ratio: var(--cd-aspect-leaflet); background: var(--cd-surface-0);
   border-radius: calc(var(--cd-leaflet-radius) / 2); padding: var(--cd-space-inset);
   display: flex; flex-direction: column; gap: var(--cd-space-sm);
-  box-shadow: var(--cd-page-shadow);
-  transition: transform var(--cd-transition-duration) var(--cd-ease-flip); position: relative;
+  box-shadow: var(--cd-page-shadow); position: relative;
+  transition: transform var(--cd-transition-duration) var(--cd-ease-flip);
 }
 .leaflet-page[data-leaflet-active="true"] { box-shadow: var(--cd-jewel-shadow); }
 .leaflet-page[data-leaflet-direction="rtl"] { direction: rtl; }
@@ -178,9 +153,7 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
   font-family: var(--cd-font-mono); font-size: var(--cd-spine-font-xs);
   color: var(--cd-text-muted); margin-top: auto;
 }
-.cd-jewel-case--leaflet {
-  width: min(var(--cd-leaflet-size), 100% - 2rem); box-shadow: none; background: transparent;
-}
+.cd-jewel-case--leaflet { width: min(var(--cd-leaflet-size), 100% - 2rem); box-shadow: none; background: transparent; }
 .cd-jewel-case--leaflet .cd-jewel-inner { grid-column: 2; gap: var(--cd-space-inset); }
 .leaflet-page ul { margin-left: 1rem; color: var(--cd-text-secondary); line-height: 1.6; }
 .leaflet-page dl { margin-top: .5rem; display: grid; gap: .25rem; font-size: var(--cd-font-size-body); }
@@ -215,13 +188,12 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
   display: flex; flex-direction: column; align-items: center;
   background: var(--cd-advisory-fg); color: var(--cd-advisory-fg-inv);
   border: var(--cd-advisory-border); font-family: var(--cd-advisory-font);
-  text-transform: uppercase; text-align: center; padding: 0; width: fit-content;
-  max-width: 100%; position: absolute; bottom: var(--cd-space-inset); right: var(--cd-space-inset);
+  text-transform: uppercase; text-align: center; padding: 0; width: fit-content; max-width: 100%;
+  position: absolute; bottom: var(--cd-space-inset); right: var(--cd-space-inset);
 }
 .human-advisory .advisory-row {
   width: 100%; padding: var(--cd-space-xs) var(--cd-space-sm);
-  font-size: var(--cd-spine-font-sm); letter-spacing: var(--cd-letter-spacing-3);
-  line-height: 1.2; white-space: nowrap;
+  font-size: var(--cd-spine-font-sm); letter-spacing: var(--cd-letter-spacing-3); line-height: 1.2; white-space: nowrap;
 }
 .human-advisory .advisory-row--black { background: var(--cd-advisory-fg); color: var(--cd-advisory-fg-inv); }
 .human-advisory .advisory-row--white { background: var(--cd-advisory-fg-inv); color: var(--cd-advisory-fg); }
@@ -235,45 +207,24 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
   background: var(--cd-tray-bg); border-top: var(--cd-tray-border-top);
   padding: 0; max-height: var(--cd-tray-height); overflow-y: auto; position: relative;
 }
-.back-tray .tray-credits {
-  grid-column: 2; padding: var(--cd-space-inset); display: flex; flex-direction: column;
-  gap: var(--cd-space-stack); background: var(--cd-tray-bg-raised);
-  border-radius: 0 0 var(--cd-leaflet-radius) var(--cd-leaflet-radius);
-}
-.tray-credits h2 {
-  font-family: var(--cd-font-label); font-size: var(--cd-font-size-title);
-  color: var(--cd-text-primary); text-transform: uppercase; letter-spacing: var(--cd-letter-spacing-2);
-}
+.back-tray .tray-credits { grid-column: 2; padding: var(--cd-space-inset); display: flex; flex-direction: column; gap: var(--cd-space-stack); background: var(--cd-tray-bg-raised); border-radius: 0 0 var(--cd-leaflet-radius) var(--cd-leaflet-radius); }
+.tray-credits h2 { font-family: var(--cd-font-label); font-size: var(--cd-font-size-title); color: var(--cd-text-primary); text-transform: uppercase; letter-spacing: var(--cd-letter-spacing-2); }
 .tray-credits ol { list-style: none; counter-reset: track; display: flex; flex-direction: column; gap: var(--cd-space-xs); }
-.tray-credits ol li {
-  counter-increment: track; font-family: var(--cd-font-label); font-size: var(--cd-font-size-body);
-  color: var(--cd-text-secondary); padding: var(--cd-space-xs) 0;
-  border-bottom: var(--cd-track-border-bot); display: flex; gap: var(--cd-space-sm);
-}
-.tray-credits ol li::before {
-  content: counter(track, decimal-leading-zero) ".";
-  font-family: var(--cd-font-mono); color: var(--cd-text-muted); min-width: var(--cd-track-num-min-w);
-}
-.tray-credits .credits-label {
-  font-family: var(--cd-font-mono); font-size: var(--cd-spine-font-xs);
-  color: var(--cd-text-muted); text-transform: uppercase; letter-spacing: var(--cd-letter-spacing-1);
-}
+.tray-credits ol li { counter-increment: track; font-family: var(--cd-font-label); font-size: var(--cd-font-size-body); color: var(--cd-text-secondary); padding: var(--cd-space-xs) 0; border-bottom: var(--cd-track-border-bot); display: flex; gap: var(--cd-space-sm); }
+.tray-credits ol li::before { content: counter(track, decimal-leading-zero) "."; font-family: var(--cd-font-mono); color: var(--cd-text-muted); min-width: var(--cd-track-num-min-w); }
+.tray-credits .credits-label { font-family: var(--cd-font-mono); font-size: var(--cd-spine-font-xs); color: var(--cd-text-muted); text-transform: uppercase; letter-spacing: var(--cd-letter-spacing-1); }
 .tray-credits p { font-family: var(--cd-font-body); font-size: var(--cd-font-size-body); color: var(--cd-text-secondary); line-height: 1.5; }
 .back-tray .cd-spine { grid-row: 1; background: var(--cd-spine-bg); }
 
-/* 9. Grid Overlay */
-.cd-grid {
-  background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-coarse) - 1px), var(--cd-grid-color) calc(var(--cd-grid-coarse) - 1px) var(--cd-grid-coarse));
-}
-.cd-grid--fine {
-  background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-fine) - 1px), var(--cd-grid-color) calc(var(--cd-grid-fine) - 1px) var(--cd-grid-fine));
-}
+/* 9. Grid */
+.cd-grid { background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-coarse) - 1px), var(--cd-grid-color) calc(var(--cd-grid-coarse) - 1px) var(--cd-grid-coarse)); }
+.cd-grid--fine { background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-fine) - 1px), var(--cd-grid-color) calc(var(--cd-grid-fine) - 1px) var(--cd-grid-fine)); }
 .cd-grid--crosshatch {
   background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-fine) - 1px), var(--cd-grid-color-alt) calc(var(--cd-grid-fine) - 1px) var(--cd-grid-fine)),
     repeating-linear-gradient(90deg, transparent 0 calc(var(--cd-grid-coarse) - 1px), var(--cd-grid-color) calc(var(--cd-grid-coarse) - 1px) var(--cd-grid-coarse));
 }
 
-/* 10. Open / Closed */
+/* 10. Open/Closed */
 .cd-jewel-case .back-tray { display: none; }
 .cd-jewel-case--open .back-tray, .cd-jewel-case[data-jewel-state="open"] .back-tray { display: grid; }
 
@@ -291,20 +242,3 @@ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
   .leaflet-content { gap: var(--cd-space-sm); }
   .human-advisory .advisory-row { font-size: var(--cd-spine-font-xs); padding: var(--cd-space-xs) var(--cd-space-sm); }
 }
-
-/* 12. Print */
-@media print {
-  .cd-jewel-case { width: var(--cd-print-jewel-width); height: var(--cd-print-jewel-height); box-shadow: none; border: 1px solid #ccc; }
-  .cd-jewel-case--open { width: calc(var(--cd-print-jewel-width) * 2); }
-  .back-tray { display: grid !important; }
-  .human-advisory { position: absolute; }
-  .disc-art { box-shadow: none; }
-  .cd-jewel-case, .leaflet-page, .back-tray { border-radius: 0; }
-}
-
-/* 13. Grain */
-.cd-grain {
-  background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0 1px, rgb(0 0 0 / var(--cd-grain-opacity-1)) 1px 2px, transparent 2px 4px),
-    repeating-radial-gradient(circle at 100% 100%, transparent 0 3px, rgb(0 0 0 / var(--cd-grain-opacity-2)) 3px 4px, transparent 4px 8px);
-  background-size: var(--cd-grain-size-1) var(--cd-grain-size-1), var(--cd-grain-size-2) var(--cd-grain-size-2);
-}
\ No newline at end of file