elvish-css 1.0.0

package/dist/elvish.css

@@ -0,0 +1,2194 @@
+/**
+ * Elvish CSS Layout-first System v1.0.0
+ * Intrinsic CSS layout primitives with Sindarin names
+ *
+ * https://github.com/star-this/elvish-css
+ * License: MIT
+ */
+
+/* === global/tokens.css === */
+/**
+ * Elvish - Design Tokens
+ * 
+ * Modular scale and design tokens for consistent spacing,
+ * typography, and colors throughout the system.
+ * 
+ * Uses modern CSS features:
+ * - light-dark() for automatic theme switching
+ * - Relative color syntax (oklch) for derived colors
+ * 
+ * RATIO MODES:
+ * - golden (φ = 1.618): Classical, dramatic, organic - best for CTAs & impact
+ * - silver (√2 = 1.414): Subtle, modern, ISO paper ratios - best for dense content
+ * - fifth (1.5): Musical, balanced middle-ground
+ * 
+ * To change: set --ratio-mode on :root or any container
+ *   :root { --ratio-mode: silver; }
+ *   .documentation { --ratio-mode: silver; }
+ */
+
+:root {
+  /* ===== COLOR SCHEME ===== */
+  color-scheme: light dark;
+  
+  /* ===== RATIO PRESETS ===== */
+  --ratio-golden: 1.618;      /* φ - Golden Ratio */
+  --ratio-silver: 1.414;      /* √2 - Silver/Lichtenberg Ratio */
+  --ratio-fifth: 1.5;         /* Perfect Fifth (musical) */
+  
+  /* ===== ACTIVE RATIO ===== */
+  /* Default: Perfect Fifth for balanced harmony */
+  --ratio: var(--ratio-fifth);
+  
+  /* ===== MODULAR SCALE ===== */
+  /* 
+   * Golden Ratio scale at 16px base:
+   * s-2: 6px   | s-1: 10px  | s0: 16px (base)
+   * s1: 26px   | s2: 42px   | s3: 68px
+   * s4: 110px  | s5: 178px
+   */
+  --s-5: calc(var(--s-4) / var(--ratio));
+  --s-4: calc(var(--s-3) / var(--ratio));
+  --s-3: calc(var(--s-2) / var(--ratio));
+  --s-2: calc(var(--s-1) / var(--ratio));
+  --s-1: calc(var(--s0) / var(--ratio));
+  --s0: 1rem;
+  --s1: calc(var(--s0) * var(--ratio));
+  --s2: calc(var(--s1) * var(--ratio));
+  --s3: calc(var(--s2) * var(--ratio));
+  --s4: calc(var(--s3) * var(--ratio));
+  --s5: calc(var(--s4) * var(--ratio));
+  
+  /* ===== MEASURE (Text) ===== */
+  /* Maximum line length for readable text - varies by ratio */
+  --measure: 70ch;  /* Default for Fifth; Golden=60ch, Silver=80ch */
+  
+  /* ===== LAYOUT THRESHOLDS ===== */
+  /* 
+   * These are for LAYOUT decisions, not text readability.
+   * Use rem (not ch) because layout is about physical space, not characters.
+   */
+  --layout-threshold-sm: 30rem;   /* ~480px - phone landscape */
+  --layout-threshold-md: 45rem;   /* ~720px - tablet portrait */
+  --layout-threshold-lg: 60rem;   /* ~960px - tablet landscape */
+  --layout-threshold-xl: 75rem;   /* ~1200px - small desktop */
+  
+  /* ===== BRAND COLOR (Single source of truth) ===== */
+  /* Teal: rgba(0, 233, 188, 1) converted to OKLCH */
+  --brand: oklch(83% 0.17 168);
+  
+  /* ===== DERIVED COLORS (Relative Color Syntax) ===== */
+  /* Lighten/darken by adjusting L (lightness) */
+  --brand-lighter: oklch(from var(--brand) calc(l + 0.3) c h);
+  --brand-light: oklch(from var(--brand) calc(l + 0.15) c h);
+  --brand-dark: oklch(from var(--brand) calc(l - 0.1) c h);
+  --brand-darker: oklch(from var(--brand) calc(l - 0.2) c h);
+  
+  /* Desaturate by reducing C (chroma) */
+  --brand-muted: oklch(from var(--brand) l calc(c * 0.5) h);
+  --brand-subtle: oklch(from var(--brand) l calc(c * 0.25) h);
+  
+  /* Transparency variants */
+  --brand-ghost: oklch(from var(--brand) l c h / 0.1);
+  --brand-overlay: oklch(from var(--brand) l c h / 0.85);
+  
+  /* Complementary/Analogous via hue shift */
+  --brand-complement: oklch(from var(--brand) l c calc(h + 180));
+  --brand-analogous-1: oklch(from var(--brand) l c calc(h + 30));
+  --brand-analogous-2: oklch(from var(--brand) l c calc(h - 30));
+  
+  /* ===== SEMANTIC COLORS (light-dark auto-switching) ===== */
+  --color-surface: light-dark(#ffffff, #1a1a2e);
+  --color-surface-raised: light-dark(#f8f9fa, #252538);
+  --color-surface-sunken: light-dark(#e9ecef, #12121c);
+  
+  --color-text: light-dark(#1a1a2e, #f0f0f5);
+  --color-text-muted: light-dark(#6c757d, #9ca3af);
+  --color-text-subtle: light-dark(#adb5bd, #6b7280);
+  
+  --color-border: light-dark(#dee2e6, #374151);
+  --color-border-strong: light-dark(#adb5bd, #4b5563);
+  
+  /* Accent adapts to theme */
+  --color-accent: light-dark(
+    oklch(from var(--brand) calc(l - 0.05) c h),
+    oklch(from var(--brand) calc(l + 0.1) c h)
+  );
+  --color-accent-hover: light-dark(
+    oklch(from var(--brand) calc(l - 0.15) c h),
+    oklch(from var(--brand) calc(l + 0.2) c h)
+  );
+  --color-accent-text: light-dark(#ffffff, #1a1a2e);
+  
+  /* Status colors */
+  --color-success: light-dark(oklch(55% 0.17 145), oklch(65% 0.17 145));
+  --color-warning: light-dark(oklch(70% 0.15 85), oklch(75% 0.15 85));
+  --color-danger: light-dark(oklch(55% 0.2 25), oklch(65% 0.2 25));
+  --color-info: light-dark(oklch(55% 0.15 230), oklch(65% 0.15 230));
+  
+  /* Legacy aliases for backward compatibility */
+  --color-dark: var(--color-text);
+  --color-light: var(--color-surface);
+  --color-mid: var(--color-text-muted);
+  
+  /* ===== BORDERS ===== */
+  --border-thin: 1px;
+  --border-thick: 3px;
+  
+  /* ===== FONTS ===== */
+  --font-plain: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
+  
+  /* ===== LINE HEIGHT ===== */
+  --line-height: 1.5;
+  --line-height-tight: 1.2;
+  --line-height-loose: 1.8;
+  
+  /* ===== TIMING ===== */
+  --duration-instant: 100ms;
+  --duration-fast: 200ms;
+  --duration-normal: 300ms;
+  --duration-slow: 500ms;
+  
+  /* ===== EASING ===== */
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  
+  /* Legacy transition shortcuts */
+  --transition-fast: var(--duration-fast) var(--ease-out);
+  --transition-medium: var(--duration-normal) var(--ease-out);
+  --transition-slow: var(--duration-slow) var(--ease-out);
+}
+
+
+/* === global/reset.css === */
+/**
+ * Elvish - Modern Reset & Axioms
+ * 
+ * A synthesis of Andy Bell's "More Modern CSS Reset" and Elvish's original reset.
+ * Optimized for Chrome/Edge with graceful degradation for Safari/Firefox.
+ * 
+ * Sources:
+ * - [AB] Andy Bell's "A (More) Modern CSS Reset"
+ * - [EL] Elvish original reset
+ * - [NEW] New additions for modern browsers
+ * 
+ * Debug Mode:
+ *   Add .mellon or .debug to <body> or any element to reveal layout structure.
+ *   "Mellon" is Sindarin for "friend" - the password to enter Moria.
+ */
+
+/* ==========================================================================
+   BOX SIZING [AB + EL]
+   Both resets agree. Universal consensus.
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* ==========================================================================
+   BORDER & BACKGROUND DEFAULTS [EL + NEW]
+   
+   Layout-focused philosophy: visual styling is opt-in, not opt-out.
+   - Borders: style is solid (for easy `border-width: 1px`), but width is 0
+   - Backgrounds: transparent by default
+   - This means elements are "invisible" until explicitly styled
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  /* Border: ready to use, but invisible by default */
+  border-style: solid;
+  border-width: 0;
+  
+  /* Background: transparent until explicitly set */
+  background-color: transparent;
+}
+
+/* Root elements get the actual background */
+html {
+  background-color: var(--color-surface);
+}
+
+/* ==========================================================================
+   MARGIN RESET [AB - expanded]
+   
+   DISCARDED from Elvish: `* { margin: 0 }` is too aggressive.
+   It breaks nested lists, fieldset legends, and third-party components.
+   
+   Andy Bell's surgical approach is safer - only reset elements that commonly
+   have problematic default margins. Expanded to include pre, h5, h6.
+   ========================================================================== */
+
+body,
+h1, h2, h3, h4, h5, h6,
+p,
+figure,
+blockquote,
+dl, dd,
+pre,
+fieldset {
+  margin: 0;
+}
+
+/* ==========================================================================
+   MEASURE AXIOM [EL]
+   
+   Not in Andy Bell's reset - this is Elvish's core philosophy.
+   
+   No line of text should exceed a comfortable reading length.
+   Exception-based: everything gets the constraint, then we remove it
+   from elements that need to contain multiple adjacent boxes.
+   ========================================================================== */
+
+* {
+  max-inline-size: var(--measure);
+}
+
+html,
+body,
+div,
+section,
+article,
+aside,
+header,
+footer,
+nav,
+main,
+form,
+fieldset,
+figure,
+figcaption,
+picture,
+video,
+canvas,
+iframe,
+details,
+summary,
+dialog,
+menu,
+hgroup,
+address,
+/* Custom elements - Elvish layout primitives (Sindarin names) */
+i-hath,          /* Stack */
+i-bau,           /* Box */
+i-enedh,         /* Center (horizontal) */
+i-tiniath,       /* Cluster */
+i-glan-veleg,    /* Sidebar */
+i-gwistindor,    /* Switcher */
+i-esgal,         /* Cover (vertical center) */
+i-vircantie,     /* Grid */
+i-gant-thala,    /* Frame (aspect) */
+i-glan-tholl,    /* Reel (side-scrolling) */
+i-fano,          /* Imposter (overlay) */
+i-thann,         /* Icon */
+i-adleithian,    /* Container */
+i-him,           /* Sticky */
+i-miriant,       /* Grid-placed */
+i-gonath {       /* Masonry */
+  max-inline-size: none;
+}
+
+/* ==========================================================================
+   ROOT DEFAULTS [AB + EL + NEW]
+   ========================================================================== */
+
+html {
+  /* [EL] Font settings via design tokens */
+  font-family: var(--font-plain);
+  font-size: 100%; /* Respects user preferences */
+  line-height: var(--line-height);
+  
+  /* [EL] Colors */
+  color: var(--color-text);
+  /* background-color set above in BORDER & BACKGROUND DEFAULTS */
+  
+  /* [NEW] Text rendering - prioritize legibility */
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  
+  /* [NEW] Prevent text size inflation on mobile */
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+/* [AB] Smooth scrolling ONLY when using keyboard navigation */
+@media (prefers-reduced-motion: no-preference) {
+  html:focus-within {
+    scroll-behavior: smooth;
+  }
+}
+
+/* ==========================================================================
+   BODY DEFAULTS [EL + NEW]
+   ========================================================================== */
+
+body {
+  /* [EL] Full viewport height - dvh accounts for mobile browser chrome */
+  min-block-size: 100vh;
+  min-block-size: 100dvh;
+  
+  /* [NEW] Prevent horizontal overflow from animations, etc. */
+  overflow-x: clip;
+  
+  /* Body gets the surface background */
+  background-color: var(--color-surface);
+}
+
+/* ==========================================================================
+   TYPOGRAPHY [EL + NEW]
+   ========================================================================== */
+
+h1, h2, h3, h4, h5, h6 {
+  /* [EL] Tighter line height for headings */
+  line-height: var(--line-height-tight);
+  
+  /* [NEW] Balanced wrapping for headings (Chrome 114+, Safari 17.5+) */
+  text-wrap: balance;
+}
+
+/* [EL] Modular scale sizing */
+h1 { font-size: var(--s4); }
+h2 { font-size: var(--s3); }
+h3 { font-size: var(--s2); }
+h4 { font-size: var(--s1); }
+h5 { font-size: var(--s0); }
+h6 { font-size: var(--s-1); }
+
+/* [NEW] Pretty wrapping for prose (Chrome 117+) */
+p {
+  text-wrap: pretty;
+}
+
+/* ==========================================================================
+   LINKS [AB + EL]
+   ========================================================================== */
+
+a {
+  /* [EL] Inherit color - style via classes or context */
+  color: currentColor;
+  
+  /* [AB] Better underline rendering - skips descenders (g, y, p) */
+  text-decoration-skip-ink: auto;
+  
+  /* [NEW] Modern underline offset for readability */
+  text-underline-offset: 0.2em;
+}
+
+/* [EL] Remove underline on hover */
+a:hover {
+  text-decoration: none;
+}
+
+/* [NEW] Focus styles for keyboard navigation */
+a:focus-visible {
+  outline: 2px solid var(--color-accent, currentColor);
+  outline-offset: 2px;
+}
+
+/* ==========================================================================
+   MEDIA [EL - expanded from AB]
+   ========================================================================== */
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-inline-size: 100%;
+}
+
+img,
+picture,
+video {
+  /* [EL] Maintain aspect ratio */
+  block-size: auto;
+}
+
+/* [NEW] Style for alt text when image fails to load */
+img {
+  font-style: italic;
+  vertical-align: middle;
+}
+
+/* ==========================================================================
+   FORM ELEMENTS [AB + EL]
+   ========================================================================== */
+
+input,
+button,
+textarea,
+select {
+  /* [AB + EL] Inherit font from parent */
+  font: inherit;
+  /* [EL] Inherit color too */
+  color: inherit;
+}
+
+/* [EL] Indicate buttons are clickable */
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/* [NEW] Textarea should not resize horizontally */
+textarea {
+  resize: vertical;
+}
+
+/* ==========================================================================
+   LISTS [EL - modified]
+   ========================================================================== */
+
+ul,
+ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* [NEW] Restore list styles when explicitly marked for semantics */
+ul[role="list"],
+ol[role="list"],
+ul.list,
+ol.list {
+  list-style: revert;
+  padding-inline-start: 1em;
+}
+
+/* ==========================================================================
+   TABLES [EL]
+   ========================================================================== */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* [NEW] Inherit text alignment */
+th {
+  text-align: inherit;
+  font-weight: inherit;
+}
+
+/* ==========================================================================
+   CODE [EL]
+   ========================================================================== */
+
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--font-mono);
+}
+
+pre {
+  overflow-x: auto;
+  white-space: pre;
+}
+
+/* ==========================================================================
+   MISC ELEMENTS [EL + NEW]
+   ========================================================================== */
+
+/* [EL] Horizontal rule */
+hr {
+  border-width: var(--border-thin, 1px) 0 0 0;
+  color: inherit;
+  block-size: 0;
+}
+
+/* [NEW] Abbreviations with title should indicate expandability */
+abbr[title] {
+  text-decoration: underline dotted;
+  cursor: help;
+}
+
+/* [NEW] Summary cursor */
+summary {
+  cursor: pointer;
+}
+
+/* ==========================================================================
+   SELECTION [NEW]
+   ========================================================================== */
+
+::selection {
+  background-color: var(--color-accent, highlight);
+  color: var(--color-accent-text, highlighttext);
+}
+
+/* ==========================================================================
+   FOCUS STATES [NEW]
+   ========================================================================== */
+
+/* Remove default focus outline */
+:focus {
+  outline: none;
+}
+
+/* Visible focus for keyboard navigation only */
+:focus-visible {
+  outline: 2px solid var(--color-accent, currentColor);
+  outline-offset: 2px;
+}
+
+/* ==========================================================================
+   REDUCED MOTION [AB - expanded]
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    /* [AB] Kill all animations */
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    
+    /* [AB] Kill all transitions */
+    transition-duration: 0.01ms !important;
+    
+    /* [AB] Kill smooth scrolling */
+    scroll-behavior: auto !important;
+  }
+  
+  /* [NEW] Also target View Transitions */
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}
+
+/* ==========================================================================
+   DEBUG MODE - "MELLON" [NEW]
+   
+   Add .mellon or .debug to <body> or any element to reveal layout structure.
+   "Mellon" is Sindarin for "friend" - the password to enter Moria.
+   
+   Features:
+   - Dashed outlines show element boundaries (uses outline, not border)
+   - Each nesting level gets a different hue (rainbow effect)
+   - Optional .tint modifier adds subtle background colors
+   - Zero specificity via :where() - easily overridden by real styles
+   
+   Usage:
+     <body class="mellon">         - Debug entire page
+     <body class="mellon tint">    - Debug with background tints
+     <div class="debug">           - Debug specific section
+   ========================================================================== */
+
+/* Debug color tokens */
+:root {
+  --debug-stroke: 1px;
+  --debug-style: dashed;
+  --debug-saturation: 0.25;
+  --debug-lightness: 55%;
+}
+
+/* Calculate hue based on depth (golden angle ≈ 137.5° for optimal distribution) */
+:where(.mellon, .debug),
+:where(.mellon, .debug) :where(*) {
+  --debug-hue: 0;
+}
+
+:where(.mellon, .debug) > :where(*) { --debug-hue: 137; }
+:where(.mellon, .debug) > :where(*) > :where(*) { --debug-hue: 275; }
+:where(.mellon, .debug) > :where(*) > :where(*) > :where(*) { --debug-hue: 52; }
+:where(.mellon, .debug) > :where(*) > :where(*) > :where(*) > :where(*) { --debug-hue: 190; }
+:where(.mellon, .debug) > :where(*) > :where(*) > :where(*) > :where(*) > :where(*) { --debug-hue: 327; }
+:where(.mellon, .debug) > :where(*) > :where(*) > :where(*) > :where(*) > :where(*) > :where(*) { --debug-hue: 105; }
+
+/* Show outlines in debug mode */
+:where(.mellon, .debug),
+:where(.mellon, .debug) :where(*) {
+  outline: var(--debug-stroke) var(--debug-style) 
+    oklch(var(--debug-lightness) var(--debug-saturation) var(--debug-hue, 0)) !important;
+  outline-offset: -1px;
+}
+
+/* Highlight Elvish primitives more prominently */
+:where(.mellon, .debug) :where(
+  i-hath, i-bau, i-enedh, i-tiniath, i-glan-veleg, i-gwistindor,
+  i-esgal, i-vircantie, i-gant-thala, i-glan-tholl, i-fano, i-thann,
+  i-adleithian, i-him, i-miriant, i-gonath
+) {
+  --debug-stroke: 2px;
+  --debug-style: solid;
+  --debug-saturation: 0.4;
+}
+
+/* Optional: Background tint mode */
+:where(.mellon.tint, .debug.tint),
+:where(.mellon.tint, .debug.tint) :where(*) {
+  background-color: oklch(
+    var(--debug-lightness) 
+    calc(var(--debug-saturation) * 0.4) 
+    var(--debug-hue, 0) 
+    / 0.1
+  ) !important;
+}
+
+/* ==========================================================================
+   UTILITIES [EL + NEW]
+   ========================================================================== */
+
+/* [EL] Hidden but accessible to screen readers */
+.visually-hidden,
+.sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* [NEW] Skip link pattern for accessibility */
+.skip-link {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  padding: var(--s-1, 0.5rem) var(--s0, 1rem);
+  background: var(--color-accent, highlight);
+  color: var(--color-accent-text, highlighttext);
+  transform: translateY(-100%);
+  z-index: 9999;
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+}
+
+
+/* === global/utilities.css === */
+/**
+ * Elvish - Utilities
+ * 
+ * Final adjustments. Use sparingly.
+ * Naming convention: property\:value
+ * 
+ * !important is intentional - utilities are for overrides.
+ */
+
+/* ===== TEXT ALIGNMENT ===== */
+.text-align\:start { text-align: start !important; }
+.text-align\:center { text-align: center !important; }
+.text-align\:end { text-align: end !important; }
+
+/* ===== FONT SIZES ===== */
+.font-size\:s-2 { font-size: var(--s-2) !important; }
+.font-size\:s-1 { font-size: var(--s-1) !important; }
+.font-size\:s0 { font-size: var(--s0) !important; }
+.font-size\:s1 { font-size: var(--s1) !important; }
+.font-size\:s2 { font-size: var(--s2) !important; }
+.font-size\:s3 { font-size: var(--s3) !important; }
+.font-size\:s4 { font-size: var(--s4) !important; }
+
+/* ===== FONT WEIGHT ===== */
+.font-weight\:normal { font-weight: normal !important; }
+.font-weight\:bold { font-weight: bold !important; }
+
+/* ===== COLORS ===== */
+.color\:dark { color: var(--color-dark) !important; }
+.color\:light { color: var(--color-light) !important; }
+.color\:accent { color: var(--color-accent) !important; }
+
+.bg\:dark { background-color: var(--color-dark) !important; }
+.bg\:light { background-color: var(--color-light) !important; }
+.bg\:accent { background-color: var(--color-accent) !important; }
+
+/* ===== MEASURE ===== */
+.max-inline-size\:measure { max-inline-size: var(--measure) !important; }
+.max-inline-size\:measure\/2 { max-inline-size: calc(var(--measure) / 2) !important; }
+.max-inline-size\:measure\/3 { max-inline-size: calc(var(--measure) / 3) !important; }
+.max-inline-size\:none { max-inline-size: none !important; }
+
+/* ===== WIDTH ===== */
+.inline-size\:100 { inline-size: 100% !important; }
+.inline-size\:auto { inline-size: auto !important; }
+
+/* ===== HEIGHT ===== */
+.block-size\:100 { block-size: 100% !important; }
+.block-size\:100vh { block-size: 100vh !important; }
+.block-size\:auto { block-size: auto !important; }
+
+/* ===== MARGIN ===== */
+.margin\:0 { margin: 0 !important; }
+.margin-block\:0 { margin-block: 0 !important; }
+.margin-inline\:0 { margin-inline: 0 !important; }
+.margin-inline\:auto { margin-inline: auto !important; }
+
+/* ===== PADDING ===== */
+.padding\:s-1 { padding: var(--s-1) !important; }
+.padding\:s0 { padding: var(--s0) !important; }
+.padding\:s1 { padding: var(--s1) !important; }
+.padding\:s2 { padding: var(--s2) !important; }
+
+/* ===== GAP ===== */
+.gap\:s-1 { gap: var(--s-1) !important; }
+.gap\:s0 { gap: var(--s0) !important; }
+.gap\:s1 { gap: var(--s1) !important; }
+.gap\:s2 { gap: var(--s2) !important; }
+
+/* ===== FLEX ===== */
+.flex-grow\:1 { flex-grow: 1 !important; }
+.flex-shrink\:0 { flex-shrink: 0 !important; }
+
+/* ===== OVERFLOW ===== */
+.overflow\:hidden { overflow: hidden !important; }
+.overflow\:auto { overflow: auto !important; }
+
+/* ===== POSITION ===== */
+.position\:relative { position: relative !important; }
+.position\:absolute { position: absolute !important; }
+.position\:fixed { position: fixed !important; }
+.position\:sticky { position: sticky !important; }
+
+/* ===== DISPLAY ===== */
+.display\:none { display: none !important; }
+.display\:block { display: block !important; }
+.display\:inline { display: inline !important; }
+.display\:inline-block { display: inline-block !important; }
+.display\:flex { display: flex !important; }
+.display\:grid { display: grid !important; }
+
+/* ===== BORDERS ===== */
+.border\:thin { border-width: var(--border-thin) !important; }
+.border\:thick { border-width: var(--border-thick) !important; }
+.border-radius\:s-2 { border-radius: var(--s-2) !important; }
+.border-radius\:s-1 { border-radius: var(--s-1) !important; }
+.border-radius\:s0 { border-radius: var(--s0) !important; }
+
+/* ===== SHADOWS ===== */
+.shadow\:small {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
+}
+.shadow\:medium {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12) !important;
+}
+.shadow\:large {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10) !important;
+}
+
+/* ===== Z-INDEX ===== */
+/* Use sparingly! Prefer source order. */
+.z\:0 { z-index: 0 !important; }
+.z\:1 { z-index: 1 !important; }
+.z\:10 { z-index: 10 !important; }
+.z\:100 { z-index: 100 !important; }
+
+/* ===== LISTS ===== */
+.list-style\:disc { list-style: disc !important; padding-inline-start: 1em !important; }
+.list-style\:decimal { list-style: decimal !important; padding-inline-start: 1em !important; }
+
+/* ===== CURSOR ===== */
+.cursor\:pointer { cursor: pointer !important; }
+.cursor\:not-allowed { cursor: not-allowed !important; }
+
+/* ===== USER SELECT ===== */
+.user-select\:none { user-select: none !important; }
+.user-select\:all { user-select: all !important; }
+
+/* ===== RATIO MODES ===== */
+/* 
+ * Switch the modular scale ratio for a container and all descendants.
+ * Golden (φ): Dramatic, high-impact - ideal for marketing, CTAs
+ * Silver (√2): Subtle, refined - ideal for documentation, dense content
+ * Fifth (1.5): Balanced middle-ground
+ * 
+ * Also adjusts --measure (line length) to complement each ratio:
+ * Golden: 60ch (tighter), Fifth: 70ch (balanced), Silver: 80ch (looser)
+ */
+.ratio\:golden { --ratio: var(--ratio-golden) !important; --measure: 60ch !important; }
+.ratio\:silver { --ratio: var(--ratio-silver) !important; --measure: 80ch !important; }
+.ratio\:fifth { --ratio: var(--ratio-fifth) !important; --measure: 70ch !important; }
+
+/* Aliases for convenience */
+.ratio\:dramatic { --ratio: var(--ratio-golden) !important; --measure: 60ch !important; }
+.ratio\:subtle { --ratio: var(--ratio-silver) !important; --measure: 80ch !important; }
+.ratio\:balanced { --ratio: var(--ratio-fifth) !important; --measure: 70ch !important; }
+
+/* Data attribute alternative (for JS toggling) */
+[data-ratio="golden"] { --ratio: var(--ratio-golden); --measure: 60ch; }
+[data-ratio="silver"] { --ratio: var(--ratio-silver); --measure: 80ch; }
+[data-ratio="fifth"] { --ratio: var(--ratio-fifth); --measure: 70ch; }
+
+
+/* === global/modern.css === */
+/**
+ * Elvish Modern - CSS Functions & Advanced Features
+ * 
+ * Features requiring Chrome 133+ / Edge 133+ (progressive enhancement)
+ * Firefox and Safari fallbacks provided where possible.
+ * 
+ * BROWSER SUPPORT (as of Jan 2026):
+ * - if()                 : Chrome 137+, Edge 137+
+ * - @function            : Chrome 139+, Edge 139+  
+ * - sibling-index/count  : Chrome 138+, Edge 138+
+ * - typed attr()         : Chrome 133+, Edge 133+
+ * - light-dark()         : All modern browsers ✓
+ * - Relative colors      : All modern browsers ✓
+ */
+
+/* ============================================================================
+ * CUSTOM FUNCTIONS (@function)
+ * ============================================================================
+ * Reusable logic defined once, used everywhere.
+ * Chrome 139+ / Edge 139+
+ */
+
+/* Negate a value */
+@function --negate(--value) {
+  result: calc(-1 * var(--value));
+}
+
+/* Linear interpolation between two values */
+@function --lerp(--a, --b, --t) {
+  result: calc(var(--a) + (var(--b) - var(--a)) * var(--t));
+}
+
+/* Fluid value between min and max based on viewport */
+@function --fluid(--min, --max, --min-vw: 20rem, --max-vw: 75rem) {
+  result: clamp(
+    var(--min),
+    calc(var(--min) + (var(--max) - var(--min)) * ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),
+    var(--max)
+  );
+}
+
+/* Add transparency to a color */
+@function --alpha(--color, --opacity) {
+  result: oklch(from var(--color) l c h / var(--opacity));
+}
+
+/* Lighten a color */
+@function --lighten(--color, --amount: 0.1) {
+  result: oklch(from var(--color) calc(l + var(--amount)) c h);
+}
+
+/* Darken a color */
+@function --darken(--color, --amount: 0.1) {
+  result: oklch(from var(--color) calc(l - var(--amount)) c h);
+}
+
+/* Spacing multiplier */
+@function --space(--multiplier: 1) {
+  result: calc(var(--s0) * var(--multiplier));
+}
+
+/* Conditional border-radius (0 when near edge, normal otherwise) */
+@function --safe-radius(--radius, --threshold: 8px) {
+  /* Use container query units if available */
+  result: clamp(0px, calc((100cqi - var(--threshold)) * 999), var(--radius));
+}
+
+
+/* ============================================================================
+ * STAGGER ANIMATIONS (sibling-index)
+ * ============================================================================
+ * Automatic stagger delays without JavaScript!
+ * Chrome 138+ / Edge 138+
+ */
+
+/* Stagger children entrance animations */
+.stagger-enter > * {
+  animation: elvish-fade-in-up var(--duration-normal, 300ms) var(--ease-out, ease-out) both;
+  animation-delay: calc((sibling-index() - 1) * var(--stagger-delay, 50ms));
+}
+
+/* Stagger with @starting-style for appear animations */
+.stagger-appear > * {
+  opacity: 1;
+  transform: translateY(0);
+  transition: 
+    opacity var(--duration-normal, 300ms) var(--ease-out, ease-out),
+    transform var(--duration-normal, 300ms) var(--ease-out, ease-out);
+  transition-delay: calc((sibling-index() - 1) * var(--stagger-delay, 50ms));
+  
+  @starting-style {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+/* Cascade opacity based on position */
+.fade-cascade > * {
+  opacity: calc(1 - (sibling-index() - 1) * 0.08);
+}
+
+/* Rainbow children using sibling-index for hue */
+.rainbow > * {
+  --hue: calc(sibling-index() * (360 / sibling-count()));
+  background: oklch(85% 0.2 var(--hue));
+}
+
+/* Auto-numbered list items */
+.auto-number > *::before {
+  content: counter(sibling-index) ". ";
+  counter-increment: none; /* We don't need CSS counters anymore! */
+}
+
+
+/* ============================================================================
+ * CONDITIONAL STYLES (if() function)  
+ * ============================================================================
+ * Inline conditionals in CSS values.
+ * Chrome 137+ / Edge 137+
+ */
+
+/* Theme-aware component using if() */
+.theme-aware {
+  --is-dark: false;
+  
+  background: if(
+    style(--is-dark: true): var(--color-surface-dark, #1a1a2e);
+    else: var(--color-surface-light, #ffffff)
+  );
+  
+  color: if(
+    style(--is-dark: true): var(--color-text-dark, #f0f0f5);
+    else: var(--color-text-light, #1a1a2e)
+  );
+}
+
+/* Responsive without media queries using if() */
+.responsive-grid {
+  display: grid;
+  grid-template-columns: if(
+    media(width >= 900px): repeat(4, 1fr);
+    media(width >= 600px): repeat(3, 1fr);
+    media(width >= 400px): repeat(2, 1fr);
+    else: 1fr
+  );
+}
+
+/* Compact variant using style query in if() */
+.adaptive-card {
+  --variant: default;
+  
+  padding: if(
+    style(--variant: compact): var(--s-1);
+    style(--variant: spacious): var(--s2);
+    else: var(--s1)
+  );
+  
+  font-size: if(
+    style(--variant: compact): var(--s-1);
+    else: var(--s0)
+  );
+}
+
+
+/* ============================================================================
+ * TYPED ATTR() - HTML to CSS Bridge
+ * ============================================================================
+ * Use HTML attributes as typed CSS values.
+ * Chrome 133+ / Edge 133+
+ */
+
+/* Grid columns from data attribute */
+[data-columns] {
+  --columns: attr(data-columns type(<number>), 1);
+  display: grid;
+  grid-template-columns: repeat(var(--columns), 1fr);
+}
+
+/* Color from data attribute */
+[data-color] {
+  color: attr(data-color type(<color>), currentColor);
+}
+
+/* Background color from data attribute */
+[data-bg] {
+  background-color: attr(data-bg type(<color>), transparent);
+}
+
+/* Spacing from data attribute */
+[data-space] {
+  --space-value: attr(data-space type(<length>), var(--s1));
+  gap: var(--space-value);
+  padding: var(--space-value);
+}
+
+/* Progress bar using attr() */
+[data-progress] {
+  --progress: attr(data-progress type(<percentage>), 0%);
+  background: linear-gradient(
+    to right,
+    var(--color-accent) var(--progress),
+    var(--color-surface-sunken) var(--progress)
+  );
+}
+
+/* Aspect ratio from attribute */
+[data-ratio] {
+  aspect-ratio: attr(data-ratio type(<ratio>), 1);
+}
+
+/* Dynamic view-transition-name from id */
+[data-transition] {
+  view-transition-name: attr(data-transition type(<custom-ident>), none);
+}
+
+
+/* ============================================================================
+ * KEYFRAMES
+ * ============================================================================
+ */
+
+@keyframes elvish-fade-in {
+  from { opacity: 0; }
+}
+
+@keyframes elvish-fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(var(--distance, 20px));
+  }
+}
+
+@keyframes elvish-fade-in-down {
+  from {
+    opacity: 0;
+    transform: translateY(calc(var(--distance, 20px) * -1));
+  }
+}
+
+@keyframes elvish-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+@keyframes elvish-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes elvish-slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
+
+/* ============================================================================
+ * FEATURE DETECTION
+ * ============================================================================
+ * Fallbacks for browsers without support.
+ */
+
+/* Fallback for sibling-index() - requires JS to set --i custom property */
+@supports not (animation-delay: calc(sibling-index() * 1ms)) {
+  .stagger-enter > * {
+    /* Fallback: use nth-child or JS-set custom property */
+    animation-delay: calc(var(--i, 0) * var(--stagger-delay, 50ms));
+  }
+  
+  .stagger-enter > :nth-child(1) { --i: 0; }
+  .stagger-enter > :nth-child(2) { --i: 1; }
+  .stagger-enter > :nth-child(3) { --i: 2; }
+  .stagger-enter > :nth-child(4) { --i: 3; }
+  .stagger-enter > :nth-child(5) { --i: 4; }
+  .stagger-enter > :nth-child(6) { --i: 5; }
+  .stagger-enter > :nth-child(7) { --i: 6; }
+  .stagger-enter > :nth-child(8) { --i: 7; }
+  .stagger-enter > :nth-child(9) { --i: 8; }
+  .stagger-enter > :nth-child(10) { --i: 9; }
+}
+
+/* Fallback for if() - use custom properties toggled by classes */
+@supports not (color: if(style(--x: y): red; else: blue)) {
+  .theme-aware {
+    background: var(--color-surface-light, #ffffff);
+    color: var(--color-text-light, #1a1a2e);
+  }
+  
+  .theme-aware.is-dark {
+    background: var(--color-surface-dark, #1a1a2e);
+    color: var(--color-text-dark, #f0f0f5);
+  }
+}
+
+/* Fallback for typed attr() */
+@supports not (color: attr(data-x type(<color>), red)) {
+  [data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
+  [data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
+  [data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
+  [data-columns="5"] { grid-template-columns: repeat(5, 1fr); }
+  [data-columns="6"] { grid-template-columns: repeat(6, 1fr); }
+}
+
+
+/* === global/transitions.css === */
+/**
+ * Elvish - View Transitions
+ * 
+ * Smooth, buttery transitions between layout states using the View Transitions API.
+ * 
+ * Browser Support (Jan 2026) - Baseline Newly Available since Oct 2025:
+ * - Chrome/Edge: ✅ 111+
+ * - Safari: ✅ 18+
+ * - Firefox: ✅ 144+
+ * 
+ * New features available:
+ * - view-transition-name: match-element (auto-naming)
+ * - view-transition-class (group styling)
+ * - :active-view-transition pseudo-class
+ * 
+ * Usage:
+ * 1. Add view-transition-name to elements that should animate independently
+ * 2. Use startTransition() helper to wrap DOM changes
+ * 3. Customize timing with CSS custom properties
+ */
+
+/* ===== ENABLE VIEW TRANSITIONS ===== */
+@view-transition {
+  navigation: auto; /* Enable for same-document navigations */
+}
+
+/* ===== TRANSITION TIMING TOKENS ===== */
+:root {
+  --transition-duration: 300ms;
+  --transition-duration-fast: 150ms;
+  --transition-duration-slow: 500ms;
+  
+  /* Easing curves */
+  --transition-ease: cubic-bezier(0.25, 0.1, 0.25, 1);      /* Smooth default */
+  --transition-ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* Quick start, gentle end */
+  --transition-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Symmetric */
+  --transition-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Slight overshoot */
+}
+
+/* ===== DEFAULT TRANSITION BEHAVIOR ===== */
+/* Old state fades/scales out */
+::view-transition-old(root) {
+  animation: var(--transition-duration) var(--transition-ease) both fade-out;
+}
+
+/* New state fades/scales in */
+::view-transition-new(root) {
+  animation: var(--transition-duration) var(--transition-ease) both fade-in;
+}
+
+@keyframes fade-out {
+  to { opacity: 0; }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+}
+
+/* ===== NAMED TRANSITION GROUPS ===== */
+
+/* 
+ * Assign view-transition-name to elements for independent animation.
+ * Each named element animates separately from the root transition.
+ */
+
+/* Layout primitives can opt-in to independent transitions */
+[data-transition] {
+  view-transition-name: var(--transition-name, auto);
+}
+
+/* Auto-naming for list/grid items - each gets unique name automatically */
+[data-transition="auto"] > * {
+  view-transition-name: match-element;
+}
+
+/* Group styling with view-transition-class */
+.transition-card-group > * {
+  view-transition-name: match-element;
+  view-transition-class: card;
+}
+
+/* Style all cards at once using the class */
+::view-transition-group(.card) {
+  animation-duration: var(--transition-duration);
+  animation-timing-function: var(--transition-ease-spring);
+}
+
+/* Utility classes for common transition names */
+.transition-hero { view-transition-name: hero; }
+.transition-header { view-transition-name: header; }
+.transition-sidebar { view-transition-name: sidebar; }
+.transition-main { view-transition-name: main; }
+.transition-card { view-transition-name: card; }
+.transition-modal { view-transition-name: modal; }
+
+/* ===== TRANSITION ANIMATIONS ===== */
+
+/* Morph (default for named elements) - smooth position/size interpolation */
+::view-transition-old(*),
+::view-transition-new(*) {
+  animation-duration: var(--transition-duration);
+  animation-timing-function: var(--transition-ease-out);
+}
+
+/* Slide transitions */
+::view-transition-old(slide-left) {
+  animation: var(--transition-duration) var(--transition-ease-out) both slide-out-left;
+}
+::view-transition-new(slide-left) {
+  animation: var(--transition-duration) var(--transition-ease-out) both slide-in-left;
+}
+
+::view-transition-old(slide-right) {
+  animation: var(--transition-duration) var(--transition-ease-out) both slide-out-right;
+}
+::view-transition-new(slide-right) {
+  animation: var(--transition-duration) var(--transition-ease-out) both slide-in-right;
+}
+
+::view-transition-old(slide-up) {
+  animation: var(--transition-duration) var(--transition-ease-out) both slide-out-up;
+}
+::view-transition-new(slide-up) {
+  animation: var(--transition-duration) var(--transition-ease-out) both slide-in-up;
+}
+
+::view-transition-old(slide-down) {
+  animation: var(--transition-duration) var(--transition-ease-out) both slide-out-down;
+}
+::view-transition-new(slide-down) {
+  animation: var(--transition-duration) var(--transition-ease-out) both slide-in-down;
+}
+
+@keyframes slide-out-left {
+  to { transform: translateX(-100%); opacity: 0; }
+}
+@keyframes slide-in-left {
+  from { transform: translateX(100%); opacity: 0; }
+}
+@keyframes slide-out-right {
+  to { transform: translateX(100%); opacity: 0; }
+}
+@keyframes slide-in-right {
+  from { transform: translateX(-100%); opacity: 0; }
+}
+@keyframes slide-out-up {
+  to { transform: translateY(-100%); opacity: 0; }
+}
+@keyframes slide-in-up {
+  from { transform: translateY(100%); opacity: 0; }
+}
+@keyframes slide-out-down {
+  to { transform: translateY(100%); opacity: 0; }
+}
+@keyframes slide-in-down {
+  from { transform: translateY(-100%); opacity: 0; }
+}
+
+/* Scale transitions */
+::view-transition-old(scale) {
+  animation: var(--transition-duration) var(--transition-ease-out) both scale-out;
+}
+::view-transition-new(scale) {
+  animation: var(--transition-duration) var(--transition-ease-spring) both scale-in;
+}
+
+@keyframes scale-out {
+  to { transform: scale(0.9); opacity: 0; }
+}
+@keyframes scale-in {
+  from { transform: scale(1.1); opacity: 0; }
+}
+
+/* Flip transitions */
+::view-transition-old(flip) {
+  animation: var(--transition-duration-slow) var(--transition-ease) both flip-out;
+}
+::view-transition-new(flip) {
+  animation: var(--transition-duration-slow) var(--transition-ease) both flip-in;
+}
+
+@keyframes flip-out {
+  to { transform: rotateY(90deg); opacity: 0; }
+}
+@keyframes flip-in {
+  from { transform: rotateY(-90deg); opacity: 0; }
+}
+
+/* ===== LAYOUT-SPECIFIC TRANSITIONS ===== */
+
+/* Sidebar collapse/expand */
+.transition-glan-veleg { view-transition-name: glan-veleg; }
+
+::view-transition-old(glan-veleg),
+::view-transition-new(glan-veleg) {
+  animation-duration: var(--transition-duration);
+  animation-timing-function: var(--transition-ease-out);
+  /* Height and width interpolate automatically */
+}
+
+/* Switcher horizontal ↔ vertical */
+.transition-gwistindor { view-transition-name: gwistindor; }
+
+/* Grid reflow */
+.transition-vircantie { view-transition-name: vircantie; }
+
+/* Aspect ratio changes */
+.transition-gant-thala { view-transition-name: gant-thala; }
+
+::view-transition-old(gant-thala),
+::view-transition-new(gant-thala) {
+  animation-duration: var(--transition-duration);
+  animation-timing-function: var(--transition-ease-out);
+  /* Aspect ratio morphs smoothly */
+}
+
+/* ===== THEME TRANSITIONS ===== */
+.transition-theme { view-transition-name: theme; }
+
+/* Cross-fade for theme changes */
+::view-transition-old(theme),
+::view-transition-new(theme) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(theme) {
+  animation: var(--transition-duration-slow) var(--transition-ease) both fade-out;
+}
+
+::view-transition-new(theme) {
+  animation: var(--transition-duration-slow) var(--transition-ease) both fade-in;
+}
+
+/* ===== REDUCED MOTION ===== */
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+  
+  :root {
+    --transition-duration: 0ms;
+    --transition-duration-fast: 0ms;
+    --transition-duration-slow: 0ms;
+  }
+}
+
+/* ===== ACTIVE TRANSITION STATES ===== */
+/* Style the page during an active view transition */
+:root:active-view-transition {
+  /* Prevent interaction during transition */
+  pointer-events: none;
+}
+
+:root:active-view-transition-type(theme) {
+  /* Special handling for theme transitions */
+}
+
+:root:active-view-transition-type(layout) {
+  /* Special handling for layout transitions */
+}
+
+/* ===== FALLBACK FOR UNSUPPORTED BROWSERS ===== */
+/* 
+ * When View Transitions aren't supported, these CSS transitions
+ * provide a graceful fallback for common properties.
+ */
+@supports not (view-transition-name: none) {
+  /* Elvish primitives get CSS transition fallbacks */
+  i-glan-veleg,
+  i-gwistindor,
+  i-vircantie,
+  i-gant-thala,
+  i-enedh,
+  i-hath {
+    transition: 
+      width var(--transition-duration, 300ms) var(--transition-ease, ease),
+      height var(--transition-duration, 300ms) var(--transition-ease, ease),
+      flex-basis var(--transition-duration, 300ms) var(--transition-ease, ease),
+      gap var(--transition-duration, 300ms) var(--transition-ease, ease);
+  }
+  
+  i-gant-thala {
+    transition: aspect-ratio var(--transition-duration, 300ms) var(--transition-ease, ease);
+  }
+}
+
+
+/* === primitives/hath/hath.css === */
+/**
+ * Stack Layout
+ * 
+ * Injects vertical margin between successive child elements.
+ * The foundation of vertical rhythm.
+ */
+
+i-hath {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+i-hath > * {
+  /* Remove any existing vertical margins */
+  margin-block: 0;
+}
+
+i-hath > * + * {
+  /* Apply margin only between successive elements */
+  margin-block-start: var(--hath-space, var(--s1));
+}
+
+/* Recursive variant - applies to all descendants */
+i-hath[recursive] * + * {
+  margin-block-start: var(--hath-space, var(--s1));
+}
+
+/* Split variant - pushes element and siblings after it to the bottom */
+i-hath[split-after="1"] > :nth-child(1) { margin-block-end: auto; }
+i-hath[split-after="2"] > :nth-child(2) { margin-block-end: auto; }
+i-hath[split-after="3"] > :nth-child(3) { margin-block-end: auto; }
+i-hath[split-after="4"] > :nth-child(4) { margin-block-end: auto; }
+i-hath[split-after="5"] > :nth-child(5) { margin-block-end: auto; }
+
+/* When Stack needs to fill its parent */
+i-hath:only-child {
+  block-size: 100%;
+}
+
+
+/* === primitives/bau/bau.css === */
+/**
+ * Box Layout (i-bau)
+ * 
+ * A container primitive focused on padding/structure.
+ * Visual styling (borders, backgrounds) is opt-in via attributes.
+ * 
+ * Layout-first philosophy: invisible by default, styled explicitly.
+ * 
+ * Attributes:
+ *   padding="..."     - Override padding (default: var(--s1))
+ *   border            - Add border
+ *   border-width="..."- Custom border width
+ *   bg                - Add background color
+ *   invert            - Invert colors (dark bg, light text)
+ *   compact           - Remove padding
+ *   borderless        - Explicitly remove border (for overriding)
+ */
+
+i-bau {
+  display: block;
+  padding: var(--bau-padding, var(--s1));
+  
+  /* Color tokens - can be overridden per-instance */
+  --bau-color-light: var(--color-surface-raised, var(--color-light));
+  --bau-color-dark: var(--color-text, var(--color-dark));
+  --bau-border-color: var(--color-border, currentColor);
+  
+  /* Layout-first: no visual styling by default */
+  /* Border width and background are 0/transparent from reset.css */
+}
+
+/* ===== VISUAL STYLING (Opt-in) ===== */
+
+/* Add border - use [border] attribute */
+i-bau[border] {
+  border-width: var(--bau-border-width, var(--border-thin, 1px));
+  border-color: var(--bau-border-color);
+}
+
+/* Custom border width */
+i-bau[border-width] {
+  border-width: var(--bau-border-width, var(--border-thin, 1px));
+  border-color: var(--bau-border-color);
+}
+
+/* Add background - use [bg] attribute */
+i-bau[bg] {
+  background-color: var(--bau-color-light);
+  color: var(--bau-color-dark);
+}
+
+/* Inverted color scheme (implies bg) */
+i-bau[invert] {
+  background-color: var(--bau-color-dark);
+  color: var(--bau-color-light);
+}
+
+/* Combined: border + background */
+i-bau[border][bg],
+i-bau[border][invert] {
+  border-width: var(--bau-border-width, var(--border-thin, 1px));
+  border-color: var(--bau-border-color);
+}
+
+/* ===== LAYOUT VARIANTS ===== */
+
+/* No padding */
+i-bau[compact] {
+  padding: 0;
+}
+
+/* Explicitly no border (for overriding inherited styles) */
+i-bau[borderless] {
+  border-width: 0;
+}
+
+/* ===== HIGH CONTRAST MODE ===== */
+/* Transparent outline for Windows High Contrast Mode */
+@media (forced-colors: active) {
+  i-bau[border],
+  i-bau[bg],
+  i-bau[invert] {
+    outline: var(--bau-border-width, 1px) solid transparent;
+    outline-offset: calc(var(--bau-border-width, 1px) * -1);
+  }
+}
+
+
+/* === primitives/enedh/enedh.css === */
+/**
+ * Center Layout
+ * 
+ * Horizontally centers content with a maximum width.
+ * Preserves gutters (minimum space on sides) in narrow contexts.
+ */
+
+i-enedh {
+  display: block;
+  
+  /* Use content-box so padding adds to the max-width, not subtracts */
+  box-sizing: content-box;
+  
+  /* Center with auto margins */
+  margin-inline: auto;
+  
+  /* 
+   * Maximum width - JS sets --enedh-max from the max attribute.
+   * Fallback chain: attribute value → 100% (full width until JS runs)
+   * This ensures layouts work even if JS fails to load.
+   */
+  max-inline-size: var(--enedh-max, 100%);
+  
+  /* Gutters - minimum space on either side */
+  padding-inline: var(--enedh-gutters, 0);
+}
+
+/* Intrinsic centering - center children based on their content width */
+i-enedh[intrinsic] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* Also center the text */
+i-enedh[and-text] {
+  text-align: center;
+}
+
+
+/* === primitives/tiniath/tiniath.css === */
+/**
+ * Cluster Layout
+ * 
+ * Groups elements that differ in length and wrap naturally.
+ * Perfect for tags, buttons, navigation items.
+ */
+
+i-tiniath {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--tiniath-space, var(--s1));
+  
+  /* Default justification and alignment */
+  justify-content: var(--tiniath-justify, flex-start);
+  align-items: var(--tiniath-align, center);
+}
+
+
+/* === primitives/glan-veleg/glan-veleg.css === */
+/**
+ * GlanVeleg Layout
+ * 
+ * A two-element layout where one has a fixed width (sidebar)
+ * and the other fills remaining space. Switches to vertical
+ * when the non-sidebar would be less than a threshold.
+ */
+
+i-glan-veleg {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--glan-veleg-space, var(--s1));
+}
+
+/* Default: sidebar is the first child (left side) */
+i-glan-veleg > * {
+  flex-grow: 1;
+}
+
+i-glan-veleg > :first-child {
+  flex-basis: var(--glan-veleg-width, 20rem);
+}
+
+i-glan-veleg > :last-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: var(--glan-veleg-content-min, 50%);
+}
+
+/* When sidebar is on the right */
+i-glan-veleg[side="right"] > :first-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: var(--glan-veleg-content-min, 50%);
+}
+
+i-glan-veleg[side="right"] > :last-child {
+  flex-basis: var(--glan-veleg-width, 20rem);
+  flex-grow: 1;
+}
+
+/* Disable equal height stretching */
+i-glan-veleg[no-stretch] {
+  align-items: flex-start;
+}
+
+
+/* === primitives/gwistindor/gwistindor.css === */
+/**
+ * Switcher Layout
+ * 
+ * Switches directly between horizontal and vertical layouts
+ * at a container-based threshold. No intermediary states.
+ * 
+ * Uses the "Holy Albatross" technique.
+ */
+
+i-gwistindor {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gwistindor-space, var(--s1));
+}
+
+i-gwistindor > * {
+  flex-grow: 1;
+  /* 
+   * The magic: produces huge positive (vertical) or negative (horizontal) values.
+   * Default: --layout-threshold-md (45rem ≈ 720px) - switches at tablet width.
+   * NOTE: This is a *layout* threshold, not a text measure!
+   */
+  flex-basis: calc((var(--gwistindor-threshold, var(--layout-threshold-md, 45rem)) - 100%) * 999);
+}
+
+/* Quantity query: force vertical if more than threshold items */
+i-gwistindor[limit="2"] > :nth-last-child(n+3),
+i-gwistindor[limit="2"] > :nth-last-child(n+3) ~ * {
+  flex-basis: 100%;
+}
+
+i-gwistindor[limit="3"] > :nth-last-child(n+4),
+i-gwistindor[limit="3"] > :nth-last-child(n+4) ~ * {
+  flex-basis: 100%;
+}
+
+i-gwistindor:not([limit]) > :nth-last-child(n+5),
+i-gwistindor:not([limit]) > :nth-last-child(n+5) ~ *,
+i-gwistindor[limit="4"] > :nth-last-child(n+5),
+i-gwistindor[limit="4"] > :nth-last-child(n+5) ~ * {
+  flex-basis: 100%;
+}
+
+i-gwistindor[limit="5"] > :nth-last-child(n+6),
+i-gwistindor[limit="5"] > :nth-last-child(n+6) ~ * {
+  flex-basis: 100%;
+}
+
+i-gwistindor[limit="6"] > :nth-last-child(n+7),
+i-gwistindor[limit="6"] > :nth-last-child(n+7) ~ * {
+  flex-basis: 100%;
+}
+
+
+/* === primitives/esgal/esgal.css === */
+/**
+ * Cover Layout
+ * 
+ * Vertically centers a principal element with optional
+ * header and footer elements. Perfect for hero sections.
+ */
+
+i-esgal {
+  display: flex;
+  flex-direction: column;
+  min-block-size: var(--esgal-min-height, 100vh);
+  padding: var(--esgal-space, var(--s1));
+}
+
+i-esgal > * {
+  margin-block: var(--esgal-space, var(--s1));
+}
+
+/* The centered element - default is h1 */
+i-esgal > :first-child:not(h1, h2, h3, [data-centered]) {
+  margin-block-start: 0;
+}
+
+i-esgal > :last-child:not(h1, h2, h3, [data-centered]) {
+  margin-block-end: 0;
+}
+
+/* Elements that should be centered */
+i-esgal > h1,
+i-esgal > h2,
+i-esgal > h3,
+i-esgal > [data-centered] {
+  margin-block: auto;
+}
+
+/* No padding variant */
+i-esgal[no-pad] {
+  padding: 0;
+}
+
+
+/* === primitives/vircantie/vircantie.css === */
+/**
+ * Vircantie Layout (Grid)
+ * 
+ * Auto-flowing grid with responsive columns based on minimum width.
+ * Uses CSS Grid's auto-fit with min() for robust responsiveness.
+ */
+
+i-vircantie {
+  display: grid;
+  gap: var(--vircantie-space, var(--s1));
+}
+
+/* 
+ * Using min() prevents overflow when container is narrower than minimum.
+ * The 100% value kicks in when min would cause overflow.
+ */
+@supports (width: min(var(--vircantie-min, 250px), 100%)) {
+  i-vircantie {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(var(--vircantie-min, 250px), 100%), 1fr)
+    );
+  }
+}
+
+
+/* === primitives/gant-thala/gant-thala.css === */
+/**
+ * Frame Layout
+ * 
+ * Constrains content to a specific aspect ratio.
+ * Perfect for images, videos, and embedded content.
+ */
+
+i-gant-thala {
+  display: block;
+  overflow: hidden;
+  
+  /* Default 16:9 ratio */
+  gant-thala-ratio: var(--gant-thala-n, 16) / var(--gant-thala-d, 9);
+}
+
+/* For images and videos, cover the frame */
+i-gant-thala > img,
+i-gant-thala > video {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  /* Default: center the crop */
+  object-position: center;
+}
+
+/* Non-media content gets centered */
+i-gant-thala > :not(img):not(video) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: 100%;
+}
+
+
+/* === primitives/glan-tholl/glan-tholl.css === */
+/**
+ * Reel Layout
+ * 
+ * Horizontal scrolling container for overflow content.
+ * A robust alternative to JavaScript carousels.
+ */
+
+i-glan-tholl {
+  display: flex;
+  block-size: var(--glan-tholl-height, auto);
+  
+  overflow-x: auto;
+  overflow-y: hidden;
+  
+  /* Smooth scrolling where supported and preferred */
+  scroll-behavior: smooth;
+  
+  /* Scroll snap for better UX */
+  scroll-snap-type: x mandatory;
+  
+  /* Firefox scrollbar styling */
+  scrollbar-color: var(--color-dark) var(--color-light);
+}
+
+i-glan-tholl > * {
+  flex: 0 0 var(--glan-tholl-item-width, auto);
+  scroll-snap-align: start;
+}
+
+i-glan-tholl > * + * {
+  margin-inline-start: var(--glan-tholl-space, var(--s1));
+}
+
+/* Images should maintain aspect ratio */
+i-glan-tholl > img {
+  block-size: 100%;
+  inline-size: auto;
+  flex-basis: auto;
+}
+
+/* Webkit scrollbar styling */
+i-glan-tholl::-webkit-scrollbar {
+  block-size: 0.75rem;
+}
+
+i-glan-tholl::-webkit-scrollbar-track {
+  background-color: var(--color-light);
+}
+
+i-glan-tholl::-webkit-scrollbar-thumb {
+  background-color: var(--color-mid);
+  border-radius: var(--s-2);
+}
+
+/* Hide scrollbar variant */
+i-glan-tholl[no-bar] {
+  scrollbar-width: none;
+}
+
+i-glan-tholl[no-bar]::-webkit-scrollbar {
+  display: none;
+}
+
+/* Overflowing state (added via JS) */
+i-glan-tholl.overflowing {
+  padding-block-end: var(--glan-tholl-space, var(--s1));
+}
+
+i-glan-tholl.overflowing.no-bar {
+  padding-block-end: 0;
+}
+
+
+/* === primitives/fano/fano.css === */
+/**
+ * Imposter Layout
+ * 
+ * Positions an element over content, centered within a
+ * positioning container. Perfect for modals and overlays.
+ */
+
+i-fano {
+  /* Default: absolute positioning relative to nearest positioned ancestor */
+  position: var(--fano-position, absolute);
+  
+  /* Center the element */
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* Fixed positioning variant (relative to viewport) */
+i-fano[fixed] {
+  --fano-position: fixed;
+}
+
+/* Contain within positioning container */
+i-fano[contain] {
+  overflow: auto;
+  max-inline-size: calc(100% - (var(--fano-margin, 0px) * 2));
+  max-block-size: calc(100% - (var(--fano-margin, 0px) * 2));
+}
+
+
+/* === primitives/thann/thann.css === */
+/**
+ * Thann Layout (Icon)
+ * 
+ * Aligns an SVG icon with accompanying text.
+ * Uses relative units for automatic scaling.
+ * 
+ * Attributes:
+ * - echuiol: "active" state styling
+ * - dhoren: "hidden" state (visually hidden but accessible)
+ */
+
+i-thann {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--thann-space, 0);
+}
+
+i-thann svg {
+  /* Match uppercase letter height */
+  block-size: 0.75em;
+  block-size: 1cap; /* Where supported */
+  
+  inline-size: 0.75em;
+  inline-size: 1cap; /* Where supported */
+  
+  /* Inherit text color */
+  fill: currentColor;
+  stroke: currentColor;
+}
+
+/* When using natural word spacing (no explicit space) */
+i-thann:not([space]) {
+  display: inline;
+}
+
+i-thann:not([space]) svg {
+  display: inline;
+  vertical-align: -0.125em; /* Fine-tune baseline alignment */
+}
+
+/* Echuiol = Active state */
+i-thann[echuiol] {
+  color: var(--color-accent, currentColor);
+}
+
+/* Dhoren = Hidden (visually hidden but accessible) */
+i-thann[dhoren] {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+
+/* === primitives/adleithian/adleithian.css === */
+/**
+ * Adleithian Layout
+ * 
+ * Establishes a container query context.
+ * The escape hatch for when intrinsic layouts need manual intervention.
+ */
+
+i-adleithian {
+  display: block;
+  adleithian-type: inline-size;
+}
+
+/* Named containers use the name attribute */
+i-adleithian[name] {
+  adleithian-name: attr(name);
+}
+
+
+/* === primitives/him/him.css === */
+/**
+ * Him Layout (NEW)
+ * 
+ * Creates sticky positioning with configurable offset.
+ * Solves the common pattern of sticky headers/sidebars.
+ * 
+ * IMPORTANT: The parent must have defined height or be
+ * in a scroll context for sticky to work properly.
+ */
+
+i-him {
+  display: block;
+  position: sticky;
+  
+  /* Default: stick to top */
+  inset-block-start: var(--him-offset, 0);
+  
+  /* Ensure it stays above sibling content when stuck */
+  z-index: var(--him-z, 1);
+}
+
+/* Stick to bottom instead */
+i-him[to="bottom"] {
+  inset-block-start: auto;
+  inset-block-end: var(--him-offset, 0);
+}
+
+/* Stick to left (in horizontal scroll context) */
+i-him[to="left"] {
+  inset-block-start: auto;
+  inset-inline-start: var(--him-offset, 0);
+}
+
+/* Stick to right (in horizontal scroll context) */
+i-him[to="right"] {
+  inset-block-start: auto;
+  inset-inline-end: var(--him-offset, 0);
+}
+
+/* Sentinel for detecting stuck state (JavaScript enhancement) */
+i-him[data-stuck="true"] {
+  /* Add styles here or use this selector in your own CSS */
+}
+
+
+/* === primitives/miriant/miriant.css === */
+/**
+ * Grid-Placed Layout (NEW)
+ * 
+ * A CSS Grid with explicit control over columns, rows, and item placement.
+ * For when the auto-flow Grid primitive isn't enough.
+ * 
+ * This is the "escape hatch" for complex grid layouts like:
+ * - Magazine-style layouts with spanning items
+ * - Dashboard widgets of varying sizes
+ * - Bento box layouts
+ */
+
+i-miriant {
+  display: grid;
+  gap: var(--miriant-space, var(--s1));
+  
+  /* Default: 12-column grid (common baseline) */
+  grid-template-columns: repeat(var(--miriant-columns, 12), 1fr);
+  
+  /* Rows auto-size by default */
+  grid-auto-rows: var(--miriant-row-height, minmax(0, auto));
+}
+
+/* Child placement utilities using data attributes */
+/* Columns */
+i-miriant > [data-col-span="1"] { grid-column: span 1; }
+i-miriant > [data-col-span="2"] { grid-column: span 2; }
+i-miriant > [data-col-span="3"] { grid-column: span 3; }
+i-miriant > [data-col-span="4"] { grid-column: span 4; }
+i-miriant > [data-col-span="5"] { grid-column: span 5; }
+i-miriant > [data-col-span="6"] { grid-column: span 6; }
+i-miriant > [data-col-span="7"] { grid-column: span 7; }
+i-miriant > [data-col-span="8"] { grid-column: span 8; }
+i-miriant > [data-col-span="9"] { grid-column: span 9; }
+i-miriant > [data-col-span="10"] { grid-column: span 10; }
+i-miriant > [data-col-span="11"] { grid-column: span 11; }
+i-miriant > [data-col-span="12"] { grid-column: span 12; }
+i-miriant > [data-col-span="full"] { grid-column: 1 / -1; }
+
+/* Rows */
+i-miriant > [data-row-span="1"] { grid-row: span 1; }
+i-miriant > [data-row-span="2"] { grid-row: span 2; }
+i-miriant > [data-row-span="3"] { grid-row: span 3; }
+i-miriant > [data-row-span="4"] { grid-row: span 4; }
+i-miriant > [data-row-span="5"] { grid-row: span 5; }
+i-miriant > [data-row-span="6"] { grid-row: span 6; }
+
+/* Dense packing - fill holes */
+i-miriant[dense] {
+  grid-auto-flow: dense;
+}
+
+/* Responsive: collapse to single column below threshold */
+@container (width < 600px) {
+  i-miriant {
+    grid-template-columns: 1fr;
+  }
+  
+  i-miriant > [data-col-span] {
+    grid-column: span 1;
+  }
+}
+
+/* Alternative: use media query fallback for browsers without container queries */
+@supports not (container-type: inline-size) {
+  @media (max-width: 600px) {
+    i-miriant {
+      grid-template-columns: 1fr;
+    }
+    
+    i-miriant > [data-col-span] {
+      grid-column: span 1;
+    }
+  }
+}
+
+
+/* === primitives/gonath/gonath.css === */
+/**
+ * Gonath Layout (NEW)
+ * 
+ * Pinterest-style layout where items pack efficiently into columns.
+ * Uses CSS columns as the primary method (widely supported).
+ * Progressively enhances to CSS Grid masonry where supported.
+ * 
+ * CAVEATS:
+ * - CSS columns: items flow top-to-bottom, then left-to-right
+ *   (not strictly "visual order" like true masonry)
+ * - CSS Grid masonry: experimental, limited browser support
+ */
+
+i-gonath {
+  display: block;
+  
+  /* CSS Columns approach (fallback) */
+  column-count: var(--gonath-columns, 3);
+  column-gap: var(--gonath-space, var(--s1));
+}
+
+i-gonath > * {
+  /* Prevent items from breaking across columns */
+  break-inside: avoid;
+  
+  /* Add vertical spacing between items */
+  margin-block-end: var(--gonath-space, var(--s1));
+}
+
+/* Progressive enhancement: CSS Grid masonry where supported */
+@supports (grid-template-rows: masonry) {
+  i-gonath {
+    display: grid;
+    column-count: unset;
+    grid-template-columns: repeat(var(--gonath-columns, 3), 1fr);
+    grid-template-rows: masonry;
+    gap: var(--gonath-space, var(--s1));
+  }
+  
+  i-gonath > * {
+    margin-block-end: 0;
+    break-inside: unset;
+  }
+}
+
+/* Responsive column counts */
+@media (max-width: 800px) {
+  i-gonath {
+    --gonath-columns: 2;
+  }
+}
+
+@media (max-width: 500px) {
+  i-gonath {
+    --gonath-columns: 1;
+  }
+}
+
+