@jant/core 0.3.36 → 0.3.37

package/src/styles/ui.css

@@ -90,7 +90,7 @@
     align-items: center;
     gap: 8px;
     font-size: 1.125rem;
-    font-weight: 800;
+    font-weight: var(--fw-extrabold);
     font-family: var(--font-heading);
     color: var(--site-text-primary);
     text-decoration: none;
@@ -153,10 +153,19 @@
     background-color: var(--site-nav-hover-bg);
   }
 
+  .site-header-more-btn-active {
+    color: var(--site-text-primary);
+  }
+
   .site-header-more [data-popover] {
     min-width: 170px;
   }
 
+  .site-header-menuitem-active {
+    color: var(--site-text-primary);
+    font-weight: 500;
+  }
+
   /* --- Browse filter tabs ------------------------------------------------- */
 
   .site-browse-nav {
@@ -175,7 +184,7 @@
 
   .site-browse-link {
     font-size: var(--text-base);
-    font-weight: 400;
+    font-weight: var(--fw-regular);
     color: var(--site-text-primary);
     text-decoration: none;
     opacity: 0.28;
@@ -188,7 +197,7 @@
 
   .site-browse-link-active {
     opacity: 1;
-    font-weight: 500;
+    font-weight: var(--fw-medium);
   }
 
   /* --- Home header wrapper (compose-prompt + browse-nav) ------------------ */
@@ -261,285 +270,1524 @@
    * Timeline & Post Components
    * ========================================================================= */
 
-  /* Post divider */
   .site-content hr.feed-divider {
     border: none;
-    height: 10px;
-    width: 32px;
+    width: 30px;
+    height: 9px;
     margin: 2.5rem auto;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 13'%3E%3Cpath fill='%23ccc' transform='translate(0,0) rotate(90 6 6.5)' d='M6.765.5.177 6.093l2.61 5.966 8.39-3.17L6.765.5Z'/%3E%3Cpath fill='%23ccc' transform='translate(16,0) rotate(100 6 6.5)' d='M6.765.5.177 6.093l2.61 5.966 8.39-3.17L6.765.5Z'/%3E%3Cpath fill='%23ccc' transform='translate(32,0) rotate(80 6 6.5)' d='M6.765.5.177 6.093l2.61 5.966 8.39-3.17L6.765.5Z'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: center;
+    color: var(--site-feed-divider-color);
+    background-color: currentColor;
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 13'%3E%3Cpath fill='black' transform='translate(0,0) rotate(90 6 6.5)' d='M6.765.5.177 6.093l2.61 5.966 8.39-3.17L6.765.5Z'/%3E%3Cpath fill='black' transform='translate(16,0) rotate(100 6 6.5)' d='M6.765.5.177 6.093l2.61 5.966 8.39-3.17L6.765.5Z'/%3E%3Cpath fill='black' transform='translate(32,0) rotate(80 6 6.5)' d='M6.765.5.177 6.093l2.61 5.966 8.39-3.17L6.765.5Z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 13'%3E%3Cpath fill='black' transform='translate(0,0) rotate(90 6 6.5)' d='M6.765.5.177 6.093l2.61 5.966 8.39-3.17L6.765.5Z'/%3E%3Cpath fill='black' transform='translate(16,0) rotate(100 6 6.5)' d='M6.765.5.177 6.093l2.61 5.966 8.39-3.17L6.765.5Z'/%3E%3Cpath fill='black' transform='translate(32,0) rotate(80 6 6.5)' d='M6.765.5.177 6.093l2.61 5.966 8.39-3.17L6.765.5Z'/%3E%3C/svg%3E");
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+
+  .feed-card {
+    position: relative;
+    padding: 1rem 1.1rem 0.95rem;
+    border: 1px solid var(--site-feed-card-border);
+    border-radius: 18px;
+    background:
+      linear-gradient(
+        180deg,
+        var(--site-feed-card-tint, transparent),
+        transparent 58%
+      ),
+      var(--site-feed-card-bg);
+    box-shadow: 0 20px 40px -36px var(--site-feed-card-shadow);
+    transition:
+      border-color 0.18s ease,
+      box-shadow 0.18s ease,
+      background-color 0.18s ease;
+  }
+
+  .feed-card:hover {
+    border-color: color-mix(
+      in srgb,
+      var(--site-accent) 20%,
+      var(--site-divider)
+    );
+    box-shadow: 0 24px 48px -38px var(--site-feed-card-shadow);
+  }
+
+  .feed-card-link {
+    --site-feed-card-tint: transparent;
+    --feed-link-domain-size: 0.625rem;
+    --feed-link-title-size: 0.93rem;
+    --feed-link-title-leading: 1.22;
+    --feed-link-summary-size: 0.875rem;
+    --feed-link-summary-leading: 1.55;
+    --feed-link-summary-gap: 0.48rem;
+    background: color-mix(
+      in srgb,
+      var(--site-page-bg) 88%,
+      var(--site-nav-hover-bg) 12%
+    );
+    border-color: color-mix(
+      in srgb,
+      var(--site-divider) 82%,
+      var(--site-nav-hover-bg)
+    );
+    border-radius: 14px;
+    box-shadow:
+      0 14px 28px -40px var(--site-feed-card-shadow),
+      inset 0 1px 0 color-mix(in srgb, var(--site-page-bg) 78%, transparent);
   }
 
-  /* Thread reply container with vertical connector line */
-  .feed-replies {
-    position: relative;
-    margin-left: 16px;
-    padding-left: 16px;
-    margin-top: 8px;
+  .feed-card-link:hover {
+    border-color: color-mix(
+      in srgb,
+      var(--site-divider) 70%,
+      var(--site-nav-hover-bg) 30%
+    );
   }
 
-  .feed-replies::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 2px;
-    background-color: var(--site-threadline);
+  .feed-link-domain {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    max-width: 100%;
+    margin-bottom: 0.65rem;
+    padding: 0;
+    border-radius: 0;
+    background: none;
+    color: var(--site-text-secondary);
+    font-size: 0.6875rem;
+    font-weight: var(--fw-medium);
+    line-height: 1;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    text-decoration: none;
+    transition: color 0.18s ease;
   }
 
-  /* Individual reply in thread */
-  .feed-reply {
-    padding: 12px 0;
+  .feed-link-domain:hover {
+    color: var(--site-text-primary);
   }
 
-  .feed-reply + .feed-reply {
-    border-top: var(--card-border-width) solid var(--site-divider);
+  .feed-link-domain-icon {
+    width: 0.72rem;
+    height: 0.72rem;
+    flex-shrink: 0;
   }
 
-  /* Compact text for thread replies */
-  .feed-compact {
-    @apply text-sm;
+  .feed-link-title {
+    font-size: 0.98rem;
+    line-height: 1.26;
+    letter-spacing: -0.015em;
   }
 
-  /* Quote block styling */
-  .feed-quote {
-    padding-left: 12px;
-    border-left: 2px solid var(--site-text-secondary);
+  .feed-link-title-link {
+    text-decoration: none;
   }
 
-  /* =========================================================================
-   * Compose Prompt Bar ("What's new?" at top of content)
-   * ========================================================================= */
+  .feed-link-title-link:hover {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
 
-  .compose-prompt {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 16px 0;
-    margin: 10px 0;
-    border-bottom: 0.5px solid oklch(from var(--site-divider) l c h / 0.5);
-    transition: border-color 0.15s;
+  .feed-link-summary {
+    margin-top: 0.75rem;
   }
 
-  .compose-prompt:hover {
-    border-bottom-color: var(--site-divider);
+  .feed-card-link .feed-link-domain {
+    margin-bottom: 0.55rem;
+    font-size: var(--feed-link-domain-size);
   }
 
-  .compose-prompt-trigger {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex: 1;
-    min-width: 0;
-    padding: 0;
-    border: none;
-    outline: none;
-    background: none;
-    cursor: pointer;
-    text-align: left;
-    color: var(--site-text-primary);
-    opacity: 0.5;
-    transition: opacity 0.15s;
+  .feed-card-link .feed-link-title {
+    margin-bottom: 0;
+    font-size: var(--feed-link-title-size);
+    line-height: var(--feed-link-title-leading);
   }
 
-  .compose-prompt-trigger:hover {
-    opacity: 0.7;
+  .feed-card-link .feed-link-summary.prose {
+    max-width: 35rem;
+    margin-top: 0.55rem;
+    font-size: var(--feed-link-summary-size);
+    line-height: var(--feed-link-summary-leading);
   }
 
-  .compose-prompt-avatar {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
+  .feed-card-link .feed-link-summary.prose > :first-child {
+    margin-top: 0;
   }
 
-  .compose-prompt-text {
-    font-size: var(--text-base);
+  .feed-card-link .feed-link-summary.prose > :last-child {
+    margin-bottom: 0;
   }
 
-  .compose-prompt-post-btn {
-    flex-shrink: 0;
-    padding: 6px 16px;
-    border-radius: 10px;
-    border: 1px solid var(--site-column-outline);
-    background: none;
-    color: var(--site-text-secondary);
-    font-size: 0.875rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition:
-      border-color 0.15s,
-      color 0.15s;
+  article.feed-card-link .feed-link-summary.prose p,
+  article.feed-card-link .feed-link-summary.prose ul,
+  article.feed-card-link .feed-link-summary.prose ol,
+  article.feed-card-link .feed-link-summary.prose blockquote,
+  article.feed-card-link .feed-link-summary.prose pre {
+    font-size: var(--feed-link-summary-size);
+    line-height: var(--feed-link-summary-leading);
   }
 
-  .compose-prompt-post-btn:hover {
-    color: var(--site-text-primary);
-    border-color: var(--site-text-secondary);
+  .feed-card-link .feed-link-summary.prose p {
+    margin: 0;
   }
 
-  /* =========================================================================
-   * Compose Dialog
-   * ========================================================================= */
+  .feed-card-link .feed-link-summary.prose p + p,
+  .feed-card-link .feed-link-summary.prose ul,
+  .feed-card-link .feed-link-summary.prose ol,
+  .feed-card-link .feed-link-summary.prose blockquote,
+  .feed-card-link .feed-link-summary.prose pre {
+    margin-top: var(--feed-link-summary-gap);
+  }
 
-  @keyframes compose-fade-up {
-    from {
-      opacity: 0;
-      transform: translateY(6px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+  .feed-card-link .feed-link-summary.prose ul,
+  .feed-card-link .feed-link-summary.prose ol {
+    padding-left: 1.15rem;
   }
 
-  @keyframes compose-modal-in {
-    from {
-      opacity: 0;
-      transform: scale(0.97) translateY(8px);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1) translateY(0);
-    }
+  .feed-card-link .feed-link-summary.prose li {
+    margin: 0.18rem 0;
   }
 
-  /* --- Dialog shell ------------------------------------------------------- */
+  .feed-card-link .feed-link-summary.prose blockquote {
+    padding-left: 0.85rem;
+    border-left: 2px solid
+      color-mix(in srgb, var(--site-divider) 75%, transparent);
+    color: var(--site-text-secondary);
+  }
 
-  /* Prevent body scroll when any compose dialog is open */
-  body:has(.compose-dialog[open]),
-  body:has(.compose-fullscreen-dialog[open]) {
-    overflow: hidden;
+  .feed-card-link .feed-link-summary.prose :is(h1, h2, h3, h4) {
+    margin: 0.7rem 0 0.2rem;
+    font-size: 0.92em;
+    line-height: 1.35;
   }
 
-  .compose-dialog {
-    --compose-margin-top: max(80px, 10vh);
+  /* Thread group: timeline layout — vertical line with dot markers */
+  .thread-group {
+    position: relative;
+    padding-left: 24px;
+  }
 
-    padding: 0;
-    outline: none;
-    border: none;
-    border-radius: 10px;
-    width: calc(100% - 20px);
-    max-width: calc(var(--site-width) - var(--site-padding) * 2 - 20px);
-    max-height: calc(100dvh - var(--compose-margin-top) - 20px);
-    margin: var(--compose-margin-top) auto auto;
-    background-color: var(--site-elevated-bg);
-    color: var(--site-text-primary);
-    box-shadow:
-      0 8px 40px rgba(0, 0, 0, 0.08),
-      0 1px 3px rgba(0, 0, 0, 0.04);
-    border: 1px solid var(--site-column-outline);
-    overflow: visible;
+  /* Continuous vertical line through dot centers */
+  .thread-group::before {
+    content: "";
+    position: absolute;
+    left: 5px;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background-color: var(--site-threadline);
   }
 
-  .compose-dialog[open] {
-    animation: compose-modal-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
+  /* Individual post in a thread group */
+  .thread-item {
+    position: relative;
+    padding: 8px 0;
   }
 
-  .compose-dialog::backdrop {
-    background-color: rgba(0, 0, 0, 0.3);
+  .thread-item:first-child {
+    padding-top: 0;
   }
 
-  .compose-dialog-inner {
-    display: flex;
-    flex-direction: column;
-    max-height: calc(100dvh - var(--compose-margin-top) - 20px);
-    position: relative;
-    border-radius: inherit;
-    overflow: hidden;
+  .thread-item:last-child {
+    padding-bottom: 0;
   }
 
-  .compose-dialog-inner > jant-compose-editor {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    position: relative;
+  /* Dot marker at each post position */
+  .thread-item::before {
+    content: "";
+    position: absolute;
+    left: -24px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: var(--site-threadline);
+    z-index: 1;
   }
 
-  /* --- Header ------------------------------------------------------------- */
+  .thread-group-preview,
+  .thread-group-detail {
+    padding-left: 30px;
+  }
 
-  .compose-dialog-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 12px;
-    position: relative;
+  .thread-group-preview::before,
+  .thread-group-detail::before {
+    left: 10px;
+    width: 1px;
+    background: linear-gradient(
+      180deg,
+      transparent 0,
+      color-mix(in srgb, var(--site-threadline) 85%, transparent) 8%,
+      color-mix(in srgb, var(--site-threadline) 55%, transparent) 100%
+    );
   }
 
-  @media (min-width: 700px) {
-    .compose-dialog-header {
-      padding: 12px 16px;
-    }
+  .thread-group-preview .thread-item,
+  .thread-group-detail .thread-item {
+    padding: var(--site-thread-item-spacing) 0;
   }
 
-  .compose-dialog-cancel {
-    padding: 4px 8px;
-    border: none;
-    background: none;
-    border-radius: 6px;
-    color: var(--site-text-secondary);
-    font-size: var(--text-sm);
-    cursor: pointer;
-    transition: color 0.15s ease-out;
-    flex-shrink: 0;
-    min-width: 60px;
-    text-align: left;
+  .thread-group-preview .thread-item::before,
+  .thread-group-detail .thread-item::before {
+    left: -20px;
+    width: 10px;
+    height: 10px;
+    border: 2px solid var(--site-page-bg);
+    background-color: var(--site-threadline);
+    box-shadow: 0 0 0 2px var(--site-thread-dot-ring);
   }
 
-  .compose-dialog-cancel:hover {
-    color: var(--site-text-primary);
+  .thread-context-shell {
+    position: relative;
+    display: grid;
+    gap: 0.7rem;
+    padding-bottom: 0.35rem;
   }
 
-  .compose-dialog-header-center {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
+  .thread-item-gap {
+    padding-top: 0.15rem;
+    padding-bottom: 0.35rem;
   }
 
-  .compose-dialog-header-btn {
-    display: flex;
+  .thread-gap-link {
+    display: inline-flex;
     align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: 8px;
-    border: none;
-    background: none;
+    gap: 0.35rem;
+    padding: 0.38rem 0.78rem;
+    border: 1px dashed var(--site-thread-context-border);
+    border-radius: 999px;
+    background: var(--site-thread-gap-bg);
     color: var(--site-text-secondary);
-    cursor: pointer;
+    font-size: 0.78rem;
+    line-height: 1.15;
+    text-decoration: none;
     transition:
-      background-color 0.15s ease-out,
-      color 0.15s ease-out;
+      border-color 0.18s ease,
+      color 0.18s ease,
+      background-color 0.18s ease;
   }
 
-  .compose-dialog-header-btn:hover {
+  .thread-gap-link:hover {
+    border-color: color-mix(
+      in srgb,
+      var(--site-accent) 22%,
+      var(--site-divider)
+    );
     color: var(--site-text-primary);
-    background-color: var(--site-nav-hover-bg);
   }
 
-  .compose-dialog-header-btn:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
+  .thread-item-hero {
+    padding-top: 0.95rem;
   }
 
-  /* --- Format switcher with animated pill --------------------------------- */
+  .thread-group-preview .thread-item-hero::before {
+    left: -22px;
+    width: 14px;
+    height: 14px;
+    border: 3px solid var(--site-page-bg);
+    background-color: var(--site-accent);
+    box-shadow: 0 0 0 2px var(--site-thread-dot-ring);
+  }
 
-  .compose-segmented {
-    display: inline-flex;
-    background-color: var(--site-nav-hover-bg);
-    border-radius: 10px;
-    padding: 3px;
+  /* Compact text for thread replies */
+  .feed-compact {
+    @apply text-sm;
+  }
+
+  /* Faded thread ancestor context */
+  .thread-context-collapsed {
     position: relative;
+    max-height: var(--site-thread-context-max-height);
+    overflow: hidden;
+    transition: max-height 0.3s ease;
   }
 
-  .compose-format-pill {
-    position: absolute;
-    top: 3px;
-    left: 3px;
+  .thread-context-collapsed.expanded {
+    max-height: none;
+    overflow: visible;
+  }
+
+  .thread-context-fade {
+    display: none;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 52px;
+    background: linear-gradient(
+      transparent,
+      color-mix(in srgb, var(--site-page-bg) 76%, var(--site-feed-card-bg))
+    );
+    pointer-events: none;
+  }
+
+  .thread-context-faded .thread-context-fade {
+    display: block;
+  }
+
+  .thread-context-collapsed.expanded .thread-context-fade {
+    display: none;
+  }
+
+  .thread-context-toggle {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.35rem 0.78rem;
+    margin-bottom: 4px;
+    cursor: pointer;
+    background: var(--site-thread-gap-bg);
+    border: 1px solid var(--site-thread-context-border);
+    border-radius: 999px;
+    line-height: 1.1;
+    transition:
+      border-color 0.18s ease,
+      color 0.18s ease,
+      background-color 0.18s ease;
+  }
+
+  .thread-context-toggle.hidden {
+    display: none;
+  }
+
+  .thread-context-toggle:hover {
+    border-color: color-mix(
+      in srgb,
+      var(--site-accent) 22%,
+      var(--site-divider)
+    );
+  }
+
+  /* Thread detail: current post anchor + dot-only highlight */
+  .thread-detail-item {
+    scroll-margin-top: 80px;
+  }
+
+  .thread-group-detail .thread-item-current::before {
+    background-color: var(--site-accent);
+    box-shadow:
+      0 0 0 2px var(--site-page-bg),
+      0 0 0 4px color-mix(in srgb, var(--site-accent) 18%, var(--site-page-bg));
+  }
+
+  /* Quote block styling */
+  .feed-quote {
+    margin: 0;
+    padding-left: 12px;
+    border-left: 2px solid var(--site-text-secondary);
+  }
+
+  .feed-quote-post {
+    position: relative;
+    padding: 0.45rem 0 0.35rem;
+  }
+
+  .feed-quote-post .post-status-badges {
+    margin-bottom: 0.8rem;
+  }
+
+  .feed-quote-card {
+    padding-left: 0;
+    border-left: none;
+  }
+
+  .feed-quote-card::before {
+    content: none;
+  }
+
+  .feed-quote-content {
+    position: relative;
+    padding-left: 0;
+    font-family: var(--font-serif);
+    color: var(--site-text-primary);
+    font-size: clamp(1.3rem, 1.2rem + 0.42vw, 1.52rem);
+    line-height: 1.36;
+    letter-spacing: -0.02em;
+    text-wrap: pretty;
+  }
+
+  .feed-quote-post .feed-quote {
+    padding-left: 0;
+    border-left: none;
+  }
+
+  .feed-quote-post .feed-quote-card {
+    position: relative;
+    padding-top: 0.85rem;
+  }
+
+  .feed-quote-post .feed-quote-card::after {
+    content: "\201C";
+    position: absolute;
+    top: -0.16em;
+    left: -0.04em;
+    color: color-mix(in srgb, var(--site-accent) 14%, var(--site-divider));
+    font-family: var(--font-serif);
+    font-size: clamp(2.9rem, 2.7rem + 0.9vw, 3.8rem);
+    line-height: 1;
+    pointer-events: none;
+    opacity: 0.95;
+  }
+
+  .feed-quote-attribution {
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    flex-wrap: wrap;
+    margin-top: 0.95rem;
+    color: var(--site-text-secondary);
+    font-size: 0.68rem;
+    letter-spacing: 0.08em;
+    line-height: 1.4;
+    text-transform: uppercase;
+  }
+
+  .feed-quote-attribution::before {
+    content: "";
+    width: 0.9rem;
+    height: 1px;
+    background: color-mix(in srgb, var(--site-divider) 86%, transparent);
+  }
+
+  .feed-quote-source {
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-color: color-mix(
+      in srgb,
+      var(--site-text-secondary) 55%,
+      transparent
+    );
+    text-underline-offset: 3px;
+  }
+
+  .feed-quote-source:hover {
+    color: var(--site-text-primary);
+    text-decoration-color: currentColor;
+  }
+
+  .feed-quote-commentary {
+    position: relative;
+    max-width: 34rem;
+    margin-top: 1.1rem;
+    padding-top: 0.95rem;
+    color: color-mix(
+      in srgb,
+      var(--site-text-secondary) 84%,
+      var(--site-text-primary)
+    );
+    text-wrap: pretty;
+  }
+
+  .feed-quote-commentary::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 1px;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      color-mix(in srgb, var(--site-divider) 48%, transparent) 16%,
+      color-mix(in srgb, var(--site-divider) 78%, transparent) 50%,
+      color-mix(in srgb, var(--site-divider) 48%, transparent) 84%,
+      transparent 100%
+    );
+  }
+
+  .feed-quote-post .feed-quote-commentary {
+    font-size: 0.94rem;
+    line-height: 1.68;
+  }
+
+  .feed-quote-commentary.prose > :first-child {
+    margin-top: 0;
+  }
+
+  .feed-quote-commentary.prose > :last-child {
+    margin-bottom: 0;
+  }
+
+  .feed-quote-commentary.prose p {
+    margin: 0;
+  }
+
+  .feed-quote-commentary.prose p + p,
+  .feed-quote-commentary.prose ul,
+  .feed-quote-commentary.prose ol,
+  .feed-quote-commentary.prose blockquote,
+  .feed-quote-commentary.prose pre {
+    margin-top: 0.55rem;
+  }
+
+  .feed-quote-commentary.prose :is(h1, h2, h3, h4) {
+    margin-top: 0.85rem;
+    margin-bottom: 0.2rem;
+    font-size: 0.92em;
+    line-height: 1.4;
+  }
+
+  .feed-quote-post [data-post-meta] {
+    margin-top: 0.9rem;
+    opacity: 0.72;
+  }
+
+  .feed-quote-post [data-post-meta] .post-footer-meta,
+  .feed-quote-post [data-post-meta] a,
+  .feed-quote-post [data-post-meta] time {
+    color: var(--site-text-secondary);
+  }
+
+  .feed-quote-post [data-post-meta] .post-menu-actions {
+    opacity: 0.65;
+  }
+
+  @media (max-width: 640px) {
+    .feed-quote-content {
+      font-size: clamp(1.24rem, 1.16rem + 0.7vw, 1.46rem);
+      line-height: 1.42;
+    }
+
+    .feed-quote-post .feed-quote-card::after {
+      left: -0.03em;
+      font-size: clamp(2.45rem, 2.28rem + 0.8vw, 3.05rem);
+    }
+  }
+
+  /* =========================================================================
+   * Post Menu (More button + dropdown)
+   * ========================================================================= */
+
+  .post-menu-target {
+    position: relative;
+  }
+
+  /* --- Post status badges (pinned / featured) ----------------------------- */
+  /* Visibility driven by parent article's data attributes so the post menu
+     can toggle badges instantly without a page reload. */
+
+  .post-status-badges {
+    display: none;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 4px;
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--site-text-placeholder);
+  }
+
+  /* Show the container when at least one status is active */
+  article[data-post-pinned] .post-status-badges,
+  article[data-post-featured] .post-status-badges,
+  article[data-post-visibility="private"] .post-status-badges {
+    display: flex;
+  }
+
+  .post-status-badge {
+    display: none;
+    align-items: center;
+    gap: 4px;
+  }
+
+  article[data-post-pinned] .post-status-pinned {
+    display: inline-flex;
+  }
+
+  article[data-post-featured] .post-status-featured {
+    display: inline-flex;
+  }
+
+  article[data-post-visibility="private"] .post-status-private {
+    display: inline-flex;
+  }
+
+  .post-status-badge svg {
+    width: 12px;
+    height: 12px;
+    flex-shrink: 0;
+  }
+
+  /* Dot separator — only visible when pinned AND (featured or private) */
+  .post-status-separator {
+    display: none;
+    user-select: none;
+  }
+
+  article[data-post-pinned][data-post-featured] .post-status-separator {
+    display: inline;
+  }
+
+  article[data-post-pinned][data-post-visibility="private"]
+    .post-status-separator {
+    display: inline;
+  }
+
+  .post-menu-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 4px;
+  }
+
+  .post-footer-detail {
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid var(--site-divider);
+    font-size: 14px;
+    color: var(--site-text-secondary);
+  }
+
+  .post-footer-meta {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-wrap: wrap;
+    min-width: 0;
+  }
+
+  .post-footer-external-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 0.9rem;
+    height: 0.9rem;
+    color: var(--site-text-secondary);
+    text-decoration: none;
+    transition: color 0.18s ease;
+  }
+
+  .post-footer-external-link:hover {
+    color: var(--site-text-primary);
+  }
+
+  .post-footer-external-link svg {
+    width: 0.82rem;
+    height: 0.82rem;
+  }
+
+  .post-collection-tags {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    position: relative;
+  }
+
+  .post-footer-detail .post-collection-tags {
+    font-size: 14px;
+  }
+
+  .post-collection-sep {
+    color: var(--site-text-secondary);
+    user-select: none;
+  }
+
+  .post-collection-icon {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+  }
+
+  .post-collection-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    color: var(--site-text-secondary);
+    text-decoration: none;
+  }
+
+  .post-collection-tag:hover {
+    color: var(--site-text-primary);
+  }
+
+  .post-collection-more-wrap {
+    position: relative;
+  }
+
+  .post-collection-more {
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    font-size: inherit;
+    color: var(--site-text-secondary);
+    text-decoration: underline dotted;
+    text-underline-offset: 2px;
+    cursor: pointer;
+  }
+
+  .post-collection-more:hover {
+    color: var(--site-text-primary);
+  }
+
+  .post-collection-popover {
+    display: none;
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    z-index: 50;
+    flex-direction: column;
+    min-width: 160px;
+    padding: 4px;
+    border-radius: 6px;
+    background: var(--site-elevated-bg);
+    border: 1px solid var(--site-divider);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  }
+
+  .post-collection-popover.open {
+    display: flex;
+  }
+
+  .post-collection-popover-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    color: var(--site-text-secondary);
+    text-decoration: none;
+  }
+
+  .post-collection-popover-item:hover {
+    background: var(--site-nav-hover-bg);
+    color: var(--site-text-primary);
+  }
+
+  /* --- Post star rating (read-only) -------------------------------------- */
+
+  .post-rating {
+    display: flex;
+    gap: 1px;
+    margin-top: 6px;
+    font-size: 14px;
+    line-height: 1;
+  }
+
+  .post-star-filled {
+    color: oklch(0.75 0.15 70);
+  }
+
+  .post-star-empty {
+    color: var(--site-divider);
+  }
+
+  .post-menu-trigger {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--site-text-secondary);
+    cursor: pointer;
+    transition:
+      background-color 0.12s,
+      color 0.12s;
+    flex-shrink: 0;
+  }
+
+  .post-menu-trigger:hover {
+    background-color: var(--site-nav-hover-bg);
+    color: var(--site-text-primary);
+  }
+
+  /* Always visible for authenticated users */
+  body[data-authenticated] .post-menu-trigger {
+    display: flex;
+  }
+
+  .post-menu-actions {
+    display: flex;
+    align-items: center;
+    gap: 0;
+  }
+
+  .reply-trigger {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--site-text-secondary);
+    cursor: pointer;
+    transition:
+      background-color 0.12s,
+      color 0.12s;
+    flex-shrink: 0;
+    opacity: 0.6;
+  }
+
+  .reply-trigger:hover {
+    background-color: var(--site-nav-hover-bg);
+    color: var(--site-text-primary);
+    opacity: 1;
+  }
+
+  body[data-authenticated] .reply-trigger {
+    display: flex;
+  }
+
+  .post-menu-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 99;
+  }
+
+  /* --- Collection Picker (replaces menu when "Add to collection" is clicked) --- */
+
+  .post-menu-collection-picker {
+    min-width: 220px;
+    max-width: 280px;
+  }
+
+  .post-menu-picker-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 10px 12px 6px;
+    font-size: var(--text-sm);
+    font-weight: var(--fw-medium);
+    color: var(--site-text-primary);
+  }
+
+  .post-menu-picker-search {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0 8px 4px;
+    padding: 6px 8px;
+    border-radius: 6px;
+    background-color: var(--site-nav-hover-bg);
+    color: var(--site-text-secondary);
+  }
+
+  .post-menu-picker-search input {
+    flex: 1;
+    border: none;
+    background: transparent;
+    outline: none;
+    font-size: var(--text-sm);
+    color: var(--site-text-primary);
+    min-width: 0;
+  }
+
+  .post-menu-picker-search input::placeholder {
+    color: var(--site-text-secondary);
+  }
+
+  .post-menu-picker-list {
+    max-height: 240px;
+    overflow-y: auto;
+    padding: 2px 0;
+  }
+
+  .post-menu-picker-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 12px;
+    cursor: pointer;
+    font-size: var(--text-sm);
+    color: var(--site-text-primary);
+    transition: background-color 0.12s ease;
+  }
+
+  .post-menu-picker-option:hover {
+    background-color: var(--site-nav-hover-bg);
+  }
+
+  .post-menu-picker-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+
+  .post-menu-picker-title {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .post-menu-picker-check {
+    flex-shrink: 0;
+    color: var(--site-text-primary);
+  }
+
+  .post-menu-picker-empty {
+    padding: 12px;
+    text-align: center;
+    font-size: var(--text-sm);
+    color: var(--site-text-secondary);
+  }
+
+  .post-menu-picker-add {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-top: 1px solid var(--site-border-light);
+    cursor: pointer;
+    font-size: var(--text-sm);
+    color: var(--site-text-secondary);
+    transition: color 0.15s ease;
+  }
+
+  .post-menu-picker-add:hover {
+    color: var(--site-text-primary);
+  }
+
+  /* --- Add Collection Panel (replaces picker when creating new collection) --- */
+
+  .post-menu-add-collection-panel {
+    min-width: 300px;
+  }
+
+  .post-menu-panel-back {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    padding: 2px;
+    cursor: pointer;
+    color: var(--site-text-secondary);
+    border-radius: 4px;
+    transition: color 0.15s ease;
+  }
+
+  .post-menu-panel-back:hover {
+    color: var(--site-text-primary);
+  }
+
+  .post-menu-panel-done {
+    margin-left: auto;
+    font-size: var(--text-sm);
+    font-weight: var(--fw-medium);
+    color: var(--site-text-primary);
+    border: none;
+    background: transparent;
+    padding: 4px 8px;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: background-color 0.15s ease;
+  }
+
+  .post-menu-panel-done:hover {
+    background-color: var(--site-nav-hover-bg);
+  }
+
+  .post-menu-panel-body {
+    max-height: 420px;
+    overflow-y: auto;
+  }
+
+  .post-menu-collection-form form {
+    padding: 8px 12px;
+  }
+
+  /* Hide the form's built-in submit/cancel row — header has Done button */
+  .post-menu-collection-form form > :last-child:not(.field) {
+    display: none !important;
+  }
+
+  /* =========================================================================
+   * Compose Prompt Bar ("What's new?" at top of content)
+   * ========================================================================= */
+
+  .compose-prompt {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 0;
+    margin: 10px 0;
+    border-bottom: 0.5px solid oklch(from var(--site-divider) l c h / 0.5);
+    transition: border-color 0.15s;
+  }
+
+  .compose-prompt:hover {
+    border-bottom-color: var(--site-divider);
+  }
+
+  .compose-prompt-trigger {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 1;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    outline: none;
+    background: none;
+    cursor: pointer;
+    text-align: left;
+    color: var(--site-text-primary);
+    opacity: 0.5;
+    transition: opacity 0.15s;
+  }
+
+  .compose-prompt-trigger:hover {
+    opacity: 0.7;
+  }
+
+  .compose-prompt-avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .compose-prompt-text {
+    font-size: var(--text-base);
+  }
+
+  .compose-prompt-post-btn {
+    flex-shrink: 0;
+    padding: 6px 16px;
+    border-radius: 10px;
+    border: 1px solid var(--site-column-outline);
+    background: none;
+    color: var(--site-text-secondary);
+    font-size: 0.875rem;
+    font-weight: var(--fw-semibold);
+    cursor: pointer;
+    transition:
+      border-color 0.15s,
+      color 0.15s;
+  }
+
+  .compose-prompt-post-btn:hover {
+    color: var(--site-text-primary);
+    border-color: var(--site-text-secondary);
+  }
+
+  /* =========================================================================
+   * Compose Dialog
+   * ========================================================================= */
+
+  @keyframes compose-fade-up {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes compose-modal-in {
+    from {
+      opacity: 0;
+      transform: scale(0.97) translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  .compose-page {
+    margin-inline: calc(var(--site-padding) * -1);
+    margin-bottom: calc(var(--space-xl) * -1);
+    min-height: 100dvh;
+  }
+
+  .compose-page-shell {
+    --compose-margin-top: 0px;
+
+    width: 100%;
+    background-color: var(--site-elevated-bg);
+  }
+
+  .compose-page-intro {
+    display: none;
+  }
+
+  .compose-page-title {
+    margin: 0;
+    font-family: var(--font-heading);
+    font-size: clamp(1.75rem, 3vw, 2.4rem);
+    font-weight: var(--fw-regular);
+    letter-spacing: -0.03em;
+    line-height: 1.05;
+    color: var(--site-text-primary);
+  }
+
+  .compose-page-intro-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: flex-start;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+
+  .compose-page-back-link {
+    display: inline-flex;
+    align-items: center;
+    border: none;
+    background: none;
+    padding: 0;
+    margin-inline-start: 8px;
+    color: var(--site-text-secondary);
+    font-size: var(--text-sm);
+    line-height: 1;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.18em;
+    cursor: pointer;
+    transition: color 0.18s ease;
+    flex-shrink: 0;
+  }
+
+  .compose-page-back-link:hover {
+    color: var(--site-text-primary);
+  }
+
+  .compose-page-shell > jant-compose-dialog {
+    display: block;
+  }
+
+  .compose-page-shell .compose-dialog-inner {
+    min-height: 0;
+    max-height: none;
+    border-radius: inherit;
+  }
+
+  .compose-page-shell .compose-dialog-inner > jant-compose-editor,
+  .compose-page-shell .compose-thread-layout,
+  .compose-page-shell .compose-editor-row,
+  .compose-page-shell .compose-editor-row > jant-compose-editor {
+    flex: 0 1 auto;
+    min-height: 0;
+  }
+
+  .compose-page-shell .compose-body {
+    flex: 0 1 auto;
+    min-height: clamp(8rem, 22vh, 12rem);
+  }
+
+  @media (min-width: 701px) and (min-height: 761px) {
+    .compose-page {
+      margin-inline: 0;
+      margin-bottom: 0;
+      padding: 32px 0 44px;
+    }
+
+    .compose-page-shell {
+      max-width: min(760px, calc(100vw - var(--site-padding) * 2));
+      margin: 0 auto;
+      background: transparent;
+    }
+
+    .compose-page-intro {
+      display: block;
+      margin-bottom: 20px;
+      padding-inline: 4px;
+    }
+
+    .compose-page-shell .compose-dialog-inner-page {
+      padding: 20px 24px 16px;
+      background-color: color-mix(
+        in srgb,
+        var(--site-elevated-bg) 96%,
+        var(--site-page-bg) 4%
+      );
+      border: 1px solid
+        color-mix(in srgb, var(--site-column-outline) 48%, transparent);
+      border-radius: 12px;
+      box-shadow:
+        0 10px 28px oklch(0 0 0 / 0.028),
+        0 1px 2px oklch(0 0 0 / 0.018);
+      overflow: visible;
+    }
+
+    .compose-page-shell .compose-dialog-inner-page .compose-dialog-header {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      align-items: center;
+      gap: 12px;
+      padding: 0 0 16px;
+    }
+
+    .compose-page-shell
+      .compose-dialog-inner-page
+      .compose-dialog-header-center {
+      position: static;
+      transform: none;
+      justify-self: start;
+      min-width: 0;
+    }
+
+    .compose-page-shell .compose-dialog-inner-page .compose-dialog-cancel {
+      display: none;
+    }
+
+    .compose-page-shell .compose-dialog-inner-page .compose-body {
+      padding: 22px 0 12px;
+      min-height: clamp(16rem, 36vh, 24rem);
+    }
+
+    .compose-page-shell .compose-dialog-inner-page .compose-tools-row {
+      padding-inline: 0;
+      background: transparent;
+    }
+
+    .compose-page-shell .compose-dialog-inner-page .compose-action-row {
+      position: sticky;
+      bottom: 0;
+      z-index: 5;
+      margin-inline: 0;
+      padding: 14px 0 0;
+      background-color: inherit;
+    }
+
+    .compose-page-shell .compose-dialog-inner-page .compose-thread-layout,
+    .compose-page-shell .compose-dialog-inner-page .compose-editor-row,
+    .compose-page-shell .compose-dialog-inner-page .compose-reply-row,
+    .compose-page-shell .compose-dialog-inner-page .compose-reply-meta {
+      padding-inline: 0;
+    }
+
+    .compose-page-shell
+      .compose-dialog-inner-page
+      .compose-add-collection-panel,
+    .compose-page-shell .compose-dialog-inner-page .compose-confirm-panel {
+      border-radius: 12px;
+    }
+  }
+
+  /* --- Dialog shell ------------------------------------------------------- */
+
+  /* Prevent body scroll when any compose dialog is open */
+  body:has(.compose-dialog[open]),
+  body:has(.compose-fullscreen-dialog[open]) {
+    overflow: hidden;
+  }
+
+  .compose-dialog {
+    --compose-margin-top: max(80px, 10vh);
+
+    padding: 0;
+    outline: none;
+    border: none;
+    border-radius: 10px;
+    width: calc(100% - 20px);
+    max-width: calc(var(--site-width) - var(--site-padding) * 2 - 20px);
+    max-height: calc(100dvh - var(--compose-margin-top) - 20px);
+    margin: var(--compose-margin-top) auto auto;
+    background-color: var(--site-elevated-bg);
+    color: var(--site-text-primary);
+    box-shadow:
+      0 8px 40px rgba(0, 0, 0, 0.08),
+      0 1px 3px rgba(0, 0, 0, 0.04);
+    border: 1px solid var(--site-column-outline);
+    overflow: visible;
+  }
+
+  .compose-dialog[open] {
+    animation: compose-modal-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+
+  .compose-dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  .compose-dialog jant-compose-dialog {
+    display: block;
+    position: relative;
+  }
+
+  .compose-dialog-inner {
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100dvh - var(--compose-margin-top) - 20px);
+    position: relative;
+    border-radius: inherit;
+    overflow: hidden;
+  }
+
+  .compose-dialog-inner > jant-compose-editor {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+  }
+
+  /* --- Header ------------------------------------------------------------- */
+
+  .compose-dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px;
+    position: relative;
+  }
+
+  @media (min-width: 700px) {
+    .compose-dialog-header {
+      padding: 12px 16px;
+    }
+  }
+
+  .compose-dialog-cancel {
+    padding: 4px 8px;
+    border: none;
+    background: none;
+    border-radius: 6px;
+    color: var(--site-text-secondary);
+    font-size: var(--text-sm);
+    cursor: pointer;
+    transition: color 0.15s ease-out;
+    flex-shrink: 0;
+    min-width: 60px;
+    text-align: left;
+  }
+
+  .compose-dialog-cancel:hover {
+    color: var(--site-text-primary);
+  }
+
+  .compose-dialog-header-center {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .compose-dialog-title {
+    font-weight: var(--fw-semibold);
+    font-size: var(--text-base);
+  }
+
+  .compose-dialog-header-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    border: none;
+    background: none;
+    color: var(--site-text-secondary);
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease-out,
+      color 0.15s ease-out;
+  }
+
+  .compose-dialog-header-btn:hover {
+    color: var(--site-text-primary);
+    background-color: var(--site-nav-hover-bg);
+  }
+
+  .compose-dialog-header-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  @media (max-width: 700px), (max-height: 760px) {
+    .compose-dialog {
+      --compose-margin-top: 0px;
+
+      width: 100vw;
+      max-width: 100vw;
+      height: 100dvh;
+      max-height: 100dvh;
+      margin: 0;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    .compose-dialog-inner {
+      min-height: 100dvh;
+      max-height: 100dvh;
+      border-radius: 0;
+    }
+
+    .compose-dialog-inner > jant-compose-editor,
+    .compose-thread-layout,
+    .compose-editor-row,
+    .compose-editor-row > jant-compose-editor {
+      flex: 0 1 auto;
+    }
+
+    .compose-dialog-inner > jant-compose-editor,
+    .compose-editor-row > jant-compose-editor {
+      max-height: calc(
+        100dvh - 13rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)
+      );
+    }
+
+    .compose-dialog-header {
+      padding-top: calc(10px + env(safe-area-inset-top));
+      padding-right: calc(12px + env(safe-area-inset-right));
+      padding-left: calc(12px + env(safe-area-inset-left));
+    }
+
+    .compose-body {
+      flex: 0 1 auto;
+      min-height: clamp(8rem, 22vh, 12rem);
+      padding-right: calc(20px + env(safe-area-inset-right));
+      padding-left: calc(20px + env(safe-area-inset-left));
+    }
+
+    .compose-reply-row,
+    .compose-editor-row {
+      padding-right: calc(16px + env(safe-area-inset-right));
+      padding-left: calc(16px + env(safe-area-inset-left));
+    }
+
+    .compose-action-row {
+      padding-right: calc(10px + env(safe-area-inset-right));
+      padding-bottom: calc(12px + env(safe-area-inset-bottom));
+      padding-left: calc(10px + env(safe-area-inset-left));
+    }
+
+    .compose-add-collection-panel,
+    .compose-confirm-panel {
+      border-radius: 0;
+    }
+
+    .compose-add-collection-panel {
+      max-height: 100dvh;
+    }
+  }
+
+  /* --- Format switcher with animated pill --------------------------------- */
+
+  .compose-segmented {
+    display: inline-flex;
+    background-color: var(--site-nav-hover-bg);
+    border-radius: 10px;
+    padding: 3px;
+    position: relative;
+  }
+
+  .compose-format-pill {
+    position: absolute;
+    top: 3px;
+    left: 3px;
     width: calc((100% - 6px) / 3);
     height: calc(100% - 6px);
     background-color: var(--site-elevated-bg);
@@ -567,7 +1815,7 @@
     background: transparent;
     color: var(--site-text-secondary);
     font-size: var(--text-sm);
-    font-weight: 400;
+    font-weight: var(--fw-regular);
     cursor: pointer;
     transition: color 0.2s ease;
     letter-spacing: 0.01em;
@@ -575,7 +1823,7 @@
 
   .compose-segmented-item-active {
     color: var(--site-text-primary);
-    font-weight: 500;
+    font-weight: var(--fw-medium);
   }
 
   /* --- Body --------------------------------------------------------------- */
@@ -639,7 +1887,7 @@
     flex: 1;
     font-family: var(--font-heading);
     font-size: 1.125rem;
-    font-weight: 400;
+    font-weight: var(--fw-regular);
     letter-spacing: -0.01em;
     line-height: 1.3;
   }
@@ -701,7 +1949,7 @@
   .compose-link-title {
     font-family: var(--font-heading);
     font-size: 1.03rem;
-    font-weight: 400;
+    font-weight: var(--fw-regular);
     letter-spacing: -0.005em;
     margin-bottom: 14px;
     padding-left: 2px;
@@ -772,7 +2020,7 @@
 
   .compose-quote-author {
     font-size: var(--text-sm);
-    font-weight: 500;
+    font-weight: var(--fw-medium);
     letter-spacing: 0.01em;
   }
 
@@ -834,41 +2082,6 @@
     margin-left: 4px;
   }
 
-  /* --- Attached text badge ------------------------------------------------ */
-
-  .compose-attached-badge {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: 14px;
-    background-color: var(--site-nav-hover-bg);
-    border-radius: 10px;
-    padding: 8px 12px;
-    cursor: pointer;
-    animation: compose-fade-up 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
-    transition: opacity 0.15s ease;
-  }
-
-  .compose-attached-badge:hover {
-    opacity: 0.85;
-  }
-
-  .compose-attached-badge-dismiss {
-    border: none;
-    background: transparent;
-    color: var(--site-text-secondary);
-    cursor: pointer;
-    font-size: 0.75rem;
-    padding: 0 2px;
-    line-height: 1;
-    opacity: 0.6;
-    transition: opacity 0.15s ease;
-  }
-
-  .compose-attached-badge-dismiss:hover {
-    opacity: 1;
-  }
-
   /* --- Attached text overlay panel ---------------------------------------- */
 
   .compose-attached-panel {
@@ -882,47 +2095,32 @@
     animation: compose-fade-up 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
   }
 
-  .compose-attached-charcount {
-    position: absolute;
-    right: 12px;
-  }
-
-  @media (min-width: 700px) {
-    .compose-attached-charcount {
-      right: 16px;
-    }
-  }
-
-  .compose-attached-panel-back {
+  .compose-attached-cancel {
     border: none;
     background: transparent;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: 8px;
     cursor: pointer;
+    font-size: var(--text-sm);
+    font-weight: var(--fw-medium);
     color: var(--site-text-secondary);
+    padding: 4px 8px;
+    border-radius: 6px;
     transition: color 0.15s ease;
   }
 
-  .compose-attached-panel-back:hover {
+  .compose-attached-cancel:hover {
     color: var(--site-text-primary);
   }
 
-  .compose-attached-textarea {
+  .compose-attached-tiptap {
     flex: 1;
-    font-size: 0.84rem;
-    line-height: 1.65;
-    letter-spacing: 0.005em;
+    min-height: 0;
     overflow-y: auto;
   }
 
-  .compose-attached-textarea::-webkit-scrollbar {
+  .compose-attached-tiptap::-webkit-scrollbar {
     width: 3px;
   }
-  .compose-attached-textarea::-webkit-scrollbar-thumb {
+  .compose-attached-tiptap::-webkit-scrollbar-thumb {
     background-color: var(--site-divider);
     border-radius: 4px;
   }
@@ -977,7 +2175,7 @@
 
   .compose-tool-label {
     font-size: 0.8125rem;
-    font-weight: 500;
+    font-weight: var(--fw-medium);
     white-space: nowrap;
   }
 
@@ -1040,12 +2238,11 @@
     background-color: var(--site-nav-hover-bg);
   }
 
-  .compose-collection-badge {
-    font-size: 0.6875rem;
-    min-width: 1.125rem;
-    height: 1.125rem;
-    padding: 0 4px;
-    line-height: 1.125rem;
+  .compose-collection-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 160px;
   }
 
   .compose-collection-select [data-popover] {
@@ -1059,9 +2256,57 @@
     overflow-y: auto;
   }
 
+  .compose-collection-select [data-popover] [role="option"] {
+    cursor: pointer;
+  }
+
+  .compose-collection-select [data-popover] [role="option"]:hover {
+    background-color: var(--site-nav-hover-bg);
+  }
+
+  .compose-collection-add-action {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-top: 1px solid var(--site-border-light);
+    cursor: pointer;
+    font-size: var(--text-sm);
+    color: var(--site-text-secondary);
+    transition: color 0.15s ease;
+  }
+
+  .compose-collection-add-action:hover {
+    color: var(--site-text-primary);
+  }
+
+  .compose-add-collection-panel {
+    position: absolute;
+    inset: 0;
+    z-index: 50;
+    background-color: var(--site-elevated-bg);
+    display: flex;
+    flex-direction: column;
+    border-radius: 10px;
+    animation: compose-fade-up 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
+    /* Size to fit the collection form — not constrained by compose-dialog-inner */
+    min-height: 480px;
+    max-height: calc(100dvh - var(--compose-margin-top) - 20px);
+  }
+
+  .compose-add-collection-form form {
+    padding: 16px;
+  }
+
+  /* Hide the form's built-in submit/cancel row — header has Done button.
+     !important needed to override Tailwind utility-layer `flex` on the element. */
+  .compose-add-collection-form form > :last-child:not(.field) {
+    display: none !important;
+  }
+
   .compose-post-btn {
     font-size: 0.84rem;
-    font-weight: 500;
+    font-weight: var(--fw-medium);
     letter-spacing: 0.02em;
     color: var(--site-elevated-bg);
     background-color: var(--site-text-primary);
@@ -1082,11 +2327,76 @@
   .compose-post-btn:hover {
     opacity: 0.85;
   }
-  .compose-post-btn:disabled {
+  .compose-post-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .compose-publish-group {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .compose-publish-main {
+    font-size: 0.84rem;
+    font-weight: var(--fw-medium);
+    letter-spacing: 0.02em;
+    color: var(--site-elevated-bg);
+    background-color: var(--site-text-primary);
+    border: none;
+    border-radius: 10px 0 0 10px;
+    padding: 8px 16px;
+    cursor: pointer;
+    transition: opacity 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  @media (min-width: 700px) {
+    .compose-publish-main {
+      padding: 8px 20px;
+    }
+  }
+
+  .compose-publish-main:hover {
+    opacity: 0.85;
+  }
+  .compose-publish-main:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .compose-publish-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--site-elevated-bg);
+    background-color: var(--site-text-primary);
+    border: none;
+    border-left: 1px solid
+      color-mix(in srgb, var(--site-elevated-bg) 20%, transparent);
+    border-radius: 0 10px 10px 0;
+    padding: 8px 6px;
+    cursor: pointer;
+    transition: opacity 0.2s ease;
+  }
+
+  .compose-publish-toggle:hover {
+    opacity: 0.85;
+  }
+  .compose-publish-toggle:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
 
+  .compose-publish-group .compose-dropdown {
+    bottom: calc(100% + 6px);
+    top: auto;
+    right: 0;
+  }
+
   /* --- Dropdowns ---------------------------------------------------------- */
 
   .compose-dropdown-backdrop {
@@ -1161,6 +2471,11 @@
     animation: compose-fade-up 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
   }
 
+  .compose-attachments[data-dragging="true"] {
+    scroll-snap-type: none;
+    cursor: grabbing;
+  }
+
   .compose-attachments::-webkit-scrollbar {
     display: none;
   }
@@ -1187,6 +2502,35 @@
     background-color: var(--site-nav-hover-bg);
   }
 
+  .compose-attachment-sortable {
+    display: block;
+    cursor: grab;
+    user-select: none;
+    -webkit-user-drag: none;
+  }
+
+  .compose-attachment-sortable:active {
+    cursor: grabbing;
+  }
+
+  .compose-attachment-sortable:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 3px;
+  }
+
+  .compose-attachment-chosen {
+    z-index: 2;
+  }
+
+  .compose-attachment-ghost {
+    opacity: 0.32;
+  }
+
+  .compose-attachment-drag {
+    opacity: 0.98;
+    transform: scale(1.02);
+  }
+
   .compose-attachment-img {
     display: block;
     border-radius: var(--media-radius, 0.5rem);
@@ -1194,162 +2538,434 @@
     object-fit: contain;
   }
 
-  /* Single image: constrain to container width */
-  .compose-attachment:only-child .compose-attachment-img {
-    max-width: 100%;
-    max-height: 384px;
+  .compose-attachment-processing {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 120px;
+    height: 120px;
+    color: var(--site-text-secondary);
+  }
+
+  /* Single image: constrain to container width */
+  .compose-attachment:only-child .compose-attachment-img {
+    max-width: 100%;
+    max-height: 384px;
+  }
+
+  /* Multiple images: fixed height, cover */
+  .compose-attachment:not(:only-child) .compose-attachment-img {
+    height: 200px;
+    width: auto;
+    min-width: 120px;
+    object-fit: cover;
+  }
+
+  .compose-attachment-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.35);
+    color: white;
+    border-radius: var(--media-radius, 0.5rem);
+  }
+
+  .compose-attachment-retry {
+    background-color: rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+    border: none;
+    padding: 8px;
+    transition: background-color 0.15s;
+  }
+
+  .compose-attachment-retry:hover {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+
+  .compose-retry-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .compose-retry-content svg {
+    opacity: 0.85;
+    transition: opacity 0.15s;
+  }
+
+  .compose-attachment-retry:hover .compose-retry-content svg {
+    opacity: 1;
+  }
+
+  .compose-retry-label {
+    font-size: 11px;
+    line-height: 1.3;
+    text-align: center;
+    opacity: 0.9;
+  }
+
+  .compose-attachment-remove {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: none;
+    background-color: rgba(0, 0, 0, 0.55);
+    color: white;
+    font-size: 11px;
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .compose-attachment-thumb:hover .compose-attachment-remove {
+    opacity: 1;
+  }
+
+  /* Always show on touch devices */
+  @media (hover: none) {
+    .compose-attachment-remove {
+      opacity: 1;
+    }
+  }
+
+  .compose-attachment-alt {
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 0.625rem;
+    font-weight: var(--fw-semibold);
+    letter-spacing: 0.04em;
+    color: var(--site-text-secondary);
+    padding: 2px 4px;
+    border-radius: 4px;
+    transition: color 0.15s ease;
+  }
+
+  .compose-attachment-alt:hover {
+    color: var(--site-text-primary);
+  }
+
+  .compose-attachment-alt-set {
+    color: oklch(0.6 0.15 155);
+  }
+
+  .compose-attachment-alt-set:hover {
+    color: oklch(0.6 0.15 155);
+    opacity: 0.8;
+  }
+
+  /* --- Video play icon overlay (compose) ----------------------------------- */
+
+  .compose-attachment-play-icon {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  .compose-attachment-play-icon svg {
+    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
+    opacity: 0.85;
+  }
+
+  /* --- File card (compose: audio + PDF) ----------------------------------- */
+
+  .compose-attachment-file-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 120px;
+    height: 160px;
+    padding: 16px 12px;
+    background-color: var(--site-nav-hover-bg);
+    border: 1px solid var(--site-divider);
+    border-radius: var(--media-radius, 0.5rem);
+    text-align: center;
+  }
+
+  .compose-attachment:not(:only-child) .compose-attachment-file-card {
+    width: 150px;
+    height: 200px;
+  }
+
+  .compose-attachment-file-icon {
+    color: var(--site-text-secondary);
+    opacity: 0.6;
+  }
+
+  .compose-attachment-file-name {
+    font-size: 0.6875rem;
+    font-weight: var(--fw-medium);
+    color: var(--site-text-primary);
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .compose-attachment-file-size {
+    font-size: 0.625rem;
+    color: var(--site-text-secondary);
+  }
+
+  /* --- Attached text card (compose: inline text attachment) ----------------- */
+
+  .compose-attachment-text-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 120px;
+    height: 160px;
+    padding: 12px;
+    background-color: var(--site-nav-hover-bg);
+    border: 1px solid var(--site-divider);
+    border-radius: var(--media-radius, 0.5rem);
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .compose-attachment:not(:only-child) .compose-attachment-text-card {
+    width: 150px;
+    height: 200px;
+  }
+
+  .compose-attachment-text-summary {
+    font-size: 0.6875rem;
+    line-height: 1.45;
+    color: var(--site-text-secondary);
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-word;
+  }
+
+  /* --- Close confirmation action sheet (Threads-style) -------------------- */
+
+  .compose-confirm-panel {
+    position: absolute;
+    inset: 0;
+    z-index: 60;
+    background-color: oklch(from var(--site-text-primary) l c h / 0.25);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    animation: compose-fade-up 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+
+  .compose-confirm-sheet {
+    width: min(300px, calc(100% - 48px));
+    background-color: var(--site-elevated-bg);
+    border-radius: 14px;
+    overflow: hidden;
+    box-shadow: 0 8px 32px oklch(0 0 0 / 0.12);
+  }
+
+  .compose-confirm-header {
+    padding: 24px 20px 16px;
+    text-align: center;
+  }
+
+  .compose-confirm-title {
+    font-size: var(--text-base);
+    font-weight: var(--fw-bold);
+    color: var(--site-text-primary);
+    letter-spacing: -0.01em;
+  }
+
+  .compose-confirm-subtitle {
+    margin-top: 8px;
+    font-size: var(--text-sm);
+    color: var(--site-text-secondary);
+    line-height: var(--leading);
+  }
+
+  .compose-confirm-action {
+    display: block;
+    width: 100%;
+    padding: 14px 20px;
+    border: none;
+    border-top: 1px solid var(--site-divider);
+    background: transparent;
+    font-size: var(--text-base);
+    font-family: inherit;
+    text-align: center;
+    cursor: pointer;
+    transition: background-color 0.12s;
+  }
+
+  .compose-confirm-action:hover {
+    background-color: var(--site-nav-hover-bg);
+  }
+
+  .compose-confirm-save {
+    font-weight: var(--fw-semibold);
+    color: var(--site-text-primary);
+  }
+
+  .compose-confirm-discard {
+    color: var(--color-destructive, #ef4444);
   }
 
-  /* Multiple images: fixed height, cover */
-  .compose-attachment:not(:only-child) .compose-attachment-img {
-    height: 200px;
-    width: auto;
-    min-width: 120px;
-    object-fit: cover;
+  .compose-confirm-cancel {
+    color: var(--site-text-secondary);
   }
 
-  .compose-attachment-overlay {
-    position: absolute;
-    inset: 0;
+  /* --- Reply context in compose dialog ----------------------------------- */
+
+  /* Thread layout: wraps reply context + editor with a continuous thread line */
+  .compose-thread-layout {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(0, 0, 0, 0.35);
-    color: white;
-    border-radius: var(--media-radius, 0.5rem);
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    position: relative;
   }
 
-  .compose-attachment-retry {
-    background-color: rgba(0, 0, 0, 0.5);
-    cursor: pointer;
-    border: none;
-    padding: 0;
-    transition: background-color 0.15s;
+  /* Continuous vertical line through the rail */
+  .compose-thread-layout::before {
+    content: "";
+    position: absolute;
+    left: 21px; /* 16px padding + 5px to center in 12px dot */
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background-color: var(--site-threadline);
+    z-index: 0;
   }
 
-  .compose-attachment-retry:hover {
-    background-color: rgba(0, 0, 0, 0.6);
+  /* Row containing dot + reply context */
+  .compose-reply-row {
+    display: flex;
+    gap: 12px;
+    padding: 0 16px;
   }
 
-  .compose-attachment-retry svg {
-    opacity: 0.85;
-    transition: opacity 0.15s;
+  /* Row containing dot + editor */
+  .compose-editor-row {
+    display: flex;
+    gap: 12px;
+    padding: 0 16px;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
   }
 
-  .compose-attachment-retry:hover svg {
-    opacity: 1;
+  .compose-editor-row > jant-compose-editor {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
   }
 
-  .compose-attachment-remove {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    width: 24px;
-    height: 24px;
+  /* Reduce editor body left padding — the thread rail already provides indent */
+  .compose-editor-row .compose-body {
+    padding-left: 0;
+  }
+
+  /* Dot marker for thread positions */
+  .compose-thread-dot {
+    width: 12px;
+    height: 12px;
     border-radius: 50%;
-    border: none;
-    background-color: rgba(0, 0, 0, 0.55);
-    color: white;
-    font-size: 11px;
-    line-height: 1;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: opacity 0.15s ease;
+    background-color: var(--site-threadline);
+    flex-shrink: 0;
+    align-self: center;
+    z-index: 1;
   }
 
-  .compose-attachment-thumb:hover .compose-attachment-remove {
-    opacity: 1;
+  .compose-reply-context {
+    flex: 1;
+    min-width: 0;
+    max-height: 140px;
+    overflow: hidden;
+    position: relative;
+    transition: max-height 0.3s ease;
   }
 
-  /* Always show on touch devices */
-  @media (hover: none) {
-    .compose-attachment-remove {
-      opacity: 1;
-    }
+  .compose-reply-context.expanded {
+    max-height: 400px;
+    overflow-y: auto;
   }
 
-  .compose-attachment-alt {
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    font-size: 0.625rem;
-    font-weight: 600;
-    letter-spacing: 0.04em;
+  .compose-reply-context-body {
+    font-size: var(--text-xs);
     color: var(--site-text-secondary);
-    padding: 2px 4px;
-    border-radius: 4px;
-    transition: color 0.15s ease;
+    line-height: 1.5;
   }
 
-  .compose-attachment-alt:hover {
-    color: var(--site-text-primary);
+  /* Scale down cloned card content to be smaller than the compose editor */
+  .compose-reply-context-body h2 {
+    font-size: var(--text-sm);
+    margin-bottom: 2px;
   }
 
-  .compose-attachment-alt-set {
-    color: oklch(0.6 0.15 155);
+  .compose-reply-context-body .prose,
+  .compose-reply-context-body .e-content {
+    font-size: inherit;
   }
 
-  .compose-attachment-alt-set:hover {
-    color: oklch(0.6 0.15 155);
-    opacity: 0.8;
+  .compose-reply-context-body .feed-quote {
+    font-size: inherit;
   }
 
-  /* --- Video play icon overlay (compose) ----------------------------------- */
+  .compose-reply-context-body img,
+  .compose-reply-context-body video {
+    max-height: 120px;
+    border-radius: 6px;
+  }
 
-  .compose-attachment-play-icon {
+  .compose-reply-fade {
     position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 32px;
+    background: linear-gradient(transparent, var(--site-elevated-bg));
     pointer-events: none;
   }
 
-  .compose-attachment-play-icon svg {
-    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
-    opacity: 0.85;
-  }
-
-  /* --- File card (compose: audio + PDF) ----------------------------------- */
-
-  .compose-attachment-file-card {
+  .compose-reply-meta {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    justify-content: center;
-    gap: 6px;
-    min-width: 120px;
-    min-height: 100px;
-    padding: 16px 12px;
-    background-color: var(--site-nav-hover-bg);
-    border-radius: var(--media-radius, 0.5rem);
-    text-align: center;
-  }
-
-  .compose-attachment:not(:only-child) .compose-attachment-file-card {
-    min-height: 200px;
+    gap: 8px;
+    padding: 4px 16px 0 40px;
+    font-size: var(--text-xs);
+    color: var(--site-text-secondary);
   }
 
-  .compose-attachment-file-icon {
+  .compose-reply-toggle {
+    border: none;
+    background: transparent;
     color: var(--site-text-secondary);
+    cursor: pointer;
+    font-size: var(--text-xs);
+    padding: 0;
+    font-family: inherit;
   }
 
-  .compose-attachment-file-name {
-    font-size: 0.6875rem;
-    font-weight: 500;
+  .compose-reply-toggle:hover {
     color: var(--site-text-primary);
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .compose-attachment-file-size {
-    font-size: 0.625rem;
-    color: var(--site-text-secondary);
   }
 
   /* --- Alt text overlay panel (Threads-style, covers entire dialog) ------- */
@@ -1385,7 +3001,7 @@
     left: 50%;
     transform: translateX(-50%);
     font-size: var(--text-sm);
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     letter-spacing: -0.005em;
     white-space: nowrap;
   }
@@ -1432,10 +3048,138 @@
     border-top: 1px solid var(--site-divider);
   }
 
-  @media (min-width: 700px) {
-    .compose-alt-footer {
-      padding: 8px 16px 12px;
-    }
+  @media (min-width: 700px) {
+    .compose-alt-footer {
+      padding: 8px 16px 12px;
+    }
+  }
+
+  /* --- Drafts panel (browse saved drafts) --------------------------------- */
+
+  .compose-drafts-panel {
+    position: absolute;
+    inset: 0;
+    z-index: 50;
+    background-color: var(--site-elevated-bg);
+    display: flex;
+    flex-direction: column;
+    border-radius: 10px;
+    animation: compose-fade-up 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+
+  .compose-drafts-list {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .compose-drafts-list::-webkit-scrollbar {
+    width: 3px;
+  }
+
+  .compose-drafts-list::-webkit-scrollbar-thumb {
+    background-color: var(--site-divider);
+    border-radius: 3px;
+  }
+
+  .compose-drafts-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 16px;
+    color: var(--site-text-secondary);
+  }
+
+  .compose-drafts-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 16px;
+    color: var(--site-text-secondary);
+    font-size: var(--text-sm);
+    text-align: center;
+  }
+
+  .compose-drafts-divider {
+    height: 1px;
+    background-color: var(--site-divider);
+    margin: 0 16px;
+  }
+
+  .compose-draft-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    cursor: pointer;
+    transition: background-color 0.12s;
+  }
+
+  .compose-draft-item:hover {
+    background-color: var(--site-nav-hover-bg);
+  }
+
+  .compose-draft-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .compose-draft-preview {
+    font-size: var(--text-sm);
+    color: var(--site-text-primary);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-word;
+  }
+
+  .compose-draft-preview-empty {
+    font-style: italic;
+    color: var(--site-text-secondary);
+  }
+
+  .compose-draft-meta {
+    font-size: var(--text-xs);
+    color: var(--site-text-secondary);
+    margin-top: 4px;
+  }
+
+  .compose-draft-more {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    border-radius: 9999px;
+    color: var(--site-text-secondary);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background-color 0.12s;
+  }
+
+  .compose-draft-more:hover {
+    background-color: var(--site-nav-hover-bg);
+  }
+
+  .compose-attached-panel-back {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    border-radius: 9999px;
+    color: var(--site-text-secondary);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background-color 0.12s;
+  }
+
+  .compose-attached-panel-back:hover {
+    background-color: var(--site-nav-hover-bg);
   }
 
   /* =========================================================================
@@ -1635,85 +3379,292 @@
     opacity: 0.85;
   }
 
-  /* --- Audio card (feed) -------------------------------------------------- */
+  /* --- Audio card (Apple Music mini-player in 3:4 gallery card) ---------- */
+  /* Compound selector overrides .media-gallery-card { display: block } */
+
+  .media-gallery-card.media-audio-card {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Hidden audio element */
+  .media-audio-card .media-audio-el {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
 
-  .media-audio-card {
+  /* Artwork area — fills most of the card */
+  .media-audio-card .media-audio-artwork {
+    flex: 1;
+    width: 100%;
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 12px 16px;
-    background-color: var(--site-nav-hover-bg);
-    border-radius: var(--media-radius, 0.5rem);
-    margin-top: 0.75rem;
+    justify-content: center;
+    background: linear-gradient(
+      160deg,
+      rgba(128, 128, 128, 0.12) 0%,
+      rgba(128, 128, 128, 0.03) 100%
+    );
+    min-height: 0;
   }
 
-  .media-audio-icon {
-    flex-shrink: 0;
+  .media-audio-card .media-audio-artwork svg {
+    width: 32px;
+    height: 32px;
     color: var(--site-text-secondary);
+    opacity: 0.3;
   }
 
-  .media-audio-name {
-    font-size: var(--text-sm);
-    font-weight: 500;
-    color: var(--site-text-primary);
-    min-width: 0;
+  /* Waveform canvas — replaces range slider in controls area */
+  .media-audio-card .media-audio-waveform {
+    display: none;
+    width: 100%;
+    height: 24px;
+    cursor: pointer;
+    touch-action: none;
+  }
+
+  .media-audio-card.has-waveform .media-audio-waveform {
+    display: block;
+  }
+
+  /* Hide range slider when waveform is active (keep for screen readers) */
+  .media-audio-card.has-waveform .media-audio-range {
+    position: absolute;
+    width: 1px;
+    height: 1px;
     overflow: hidden;
-    text-overflow: ellipsis;
+    clip: rect(0, 0, 0, 0);
     white-space: nowrap;
+    border: 0;
+    padding: 0;
+    margin: -1px;
+  }
+
+  /* Bottom control strip — compact, Apple Music style */
+  .media-audio-card .media-audio-controls {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 0 0 6px;
+  }
+
+  /* Progress — native range input styled as thin track */
+  .media-audio-card .media-audio-range {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 20px;
+    background: transparent;
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+    touch-action: none;
+  }
+
+  /* Track (WebKit / Blink) */
+  .media-audio-card .media-audio-range::-webkit-slider-runnable-track {
+    height: 3px;
+    border-radius: 1.5px;
+    background: rgba(128, 128, 128, 0.15);
+  }
+
+  /* Track (Firefox) */
+  .media-audio-card .media-audio-range::-moz-range-track {
+    height: 3px;
+    border-radius: 1.5px;
+    background: rgba(128, 128, 128, 0.15);
+    border: none;
+  }
+
+  /* Filled portion (Firefox only — WebKit uses JS) */
+  .media-audio-card .media-audio-range::-moz-range-progress {
+    height: 3px;
+    border-radius: 1.5px;
+    background: var(--site-text-primary);
+  }
+
+  /* Thumb (WebKit / Blink) */
+  .media-audio-card .media-audio-range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--site-text-primary);
+    margin-top: -3.5px;
+    border: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+
+  .media-audio-card .media-audio-range:hover::-webkit-slider-thumb,
+  .media-audio-card.is-playing .media-audio-range::-webkit-slider-thumb {
+    opacity: 1;
+  }
+
+  /* Thumb (Firefox) */
+  .media-audio-card .media-audio-range::-moz-range-thumb {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--site-text-primary);
+    border: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+
+  .media-audio-card .media-audio-range:hover::-moz-range-thumb,
+  .media-audio-card.is-playing .media-audio-range::-moz-range-thumb {
+    opacity: 1;
+  }
+
+  /* Focus ring */
+  .media-audio-card .media-audio-range:focus-visible {
+    outline: 2px solid var(--site-text-primary);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  /* Title + play button row */
+  .media-audio-card .media-audio-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px 0;
+    min-width: 0;
   }
 
-  .media-audio-player {
+  /* Left side: title + time stacked */
+  .media-audio-card .media-audio-info {
     flex: 1;
     min-width: 0;
-    height: 32px;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
   }
 
-  .media-audio-player audio {
-    width: 100%;
-    height: 32px;
+  .media-audio-card .media-audio-title {
+    font-size: 0.625rem;
+    font-weight: var(--fw-medium, 500);
+    color: var(--site-text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 1.3;
   }
 
-  /* --- PDF card (feed) ---------------------------------------------------- */
+  .media-audio-card .media-audio-time {
+    font-size: 0.5625rem;
+    color: var(--site-text-secondary);
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+  }
 
-  .media-pdf-card {
+  /* Play / Pause — circular button on the right */
+  .media-audio-card .media-audio-play-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: none;
+    cursor: pointer;
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 12px 16px;
-    background-color: var(--site-nav-hover-bg);
-    border-radius: var(--media-radius, 0.5rem);
-    margin-top: 0.75rem;
+    justify-content: center;
+    background: var(--site-text-primary);
+    color: var(--background, #fff);
+    flex-shrink: 0;
+    transition: transform 0.12s ease;
+  }
+
+  .media-audio-card .media-audio-play-btn:hover {
+    transform: scale(1.1);
+  }
+
+  .media-audio-card .media-audio-play-btn:active {
+    transform: scale(0.92);
+  }
+
+  .media-audio-card .media-audio-play-btn svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* Nudge play triangle right for optical centering */
+  .media-audio-card .media-audio-icon-play {
+    margin-left: 2px;
+  }
+
+  /* Toggle: show play, hide pause by default */
+  .media-audio-card .media-audio-icon-pause {
+    display: none;
+  }
+
+  .media-audio-card.is-playing .media-audio-icon-play {
+    display: none;
+  }
+
+  .media-audio-card.is-playing .media-audio-icon-pause {
+    display: block;
+  }
+
+  /* --- Gallery card tile (documents + texts in unified row) --------------- */
+
+  .media-gallery-card {
+    display: block;
     text-decoration: none;
     color: var(--site-text-primary);
-    transition:
-      background-color 0.15s,
-      border-color 0.15s;
-    border: 1px solid transparent;
+    border-radius: var(--media-radius, 0.5rem);
+    overflow: hidden;
+    background-color: var(--site-nav-hover-bg);
+    border: 1px solid var(--site-divider);
+    transition: background-color 0.15s;
   }
 
-  .media-pdf-card:hover {
-    border-color: var(--site-divider);
+  a.media-gallery-card:hover,
+  button.media-gallery-card:hover {
+    background-color: var(--site-divider);
   }
 
-  .media-pdf-icon {
-    flex-shrink: 0;
+  button.media-gallery-card {
+    cursor: pointer;
+    font: inherit;
+    text-align: inherit;
+  }
+
+  .media-gallery-card-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    height: 100%;
+    padding: 16px 12px;
+    text-align: center;
+  }
+
+  .media-gallery-card-icon {
     color: var(--site-text-secondary);
+    opacity: 0.6;
   }
 
-  .media-pdf-name {
-    font-size: var(--text-sm);
-    font-weight: 500;
-    min-width: 0;
+  .media-gallery-card-summary {
+    font-size: 0.6875rem;
+    line-height: 1.4;
+    color: var(--site-text-secondary);
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
   }
 
-  .media-pdf-size {
+  .media-gallery-card-meta {
     font-size: 0.6875rem;
     color: var(--site-text-secondary);
-    flex-shrink: 0;
-    margin-left: auto;
   }
 
   /* --- Lightbox video ----------------------------------------------------- */
@@ -1734,6 +3685,115 @@
     }
   }
 
+  /* --- Text preview dialog ------------------------------------------------ */
+
+  .text-preview-dialog {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .text-preview-dialog[open] {
+    animation: lightbox-fade-in 0.2s ease-out both;
+  }
+
+  .text-preview-dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+
+  .text-preview-content {
+    position: relative;
+    background-color: var(--color-background);
+    border-radius: var(--radius-lg);
+    width: min(560px, 88vw);
+    aspect-ratio: 3 / 4;
+    max-height: 80vh;
+    overflow-y: auto;
+    padding: var(--space-xl);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .text-preview-toolbar {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 4px;
+    padding-bottom: var(--space-sm);
+  }
+
+  .text-preview-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-full);
+    background-color: var(--color-muted);
+    color: var(--color-muted-foreground);
+    border: none;
+    cursor: pointer;
+    transition:
+      background-color 0.15s,
+      color 0.15s;
+  }
+
+  .text-preview-btn:hover {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .text-preview-btn:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  .text-preview-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-xl) 0;
+    color: var(--color-muted-foreground);
+  }
+
+  .text-preview-body {
+    padding-top: var(--space-sm);
+    line-height: 1.7;
+    color: var(--color-foreground);
+  }
+
+  @media (max-width: 640px) {
+    .text-preview-content {
+      width: 100vw;
+      aspect-ratio: auto;
+      max-height: 85vh;
+      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+      margin-top: auto;
+    }
+
+    .text-preview-dialog {
+      align-items: flex-end;
+    }
+  }
+
+  /* --- Blurhash placeholder: loaded image covers background -------------- */
+
+  [data-post-media] img {
+    background: transparent;
+  }
+
   /* =========================================================================
    * Site Footer
    * ========================================================================= */
@@ -1788,7 +3848,7 @@
   .compose-tiptap-body .tiptap h1 {
     font-family: var(--font-heading);
     font-size: 1.5rem;
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     line-height: 1.3;
     margin: 0.75em 0 0.25em;
   }
@@ -1796,7 +3856,7 @@
   .compose-tiptap-body .tiptap h2 {
     font-family: var(--font-heading);
     font-size: 1.25rem;
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     line-height: 1.35;
     margin: 0.75em 0 0.25em;
   }
@@ -1804,7 +3864,7 @@
   .compose-tiptap-body .tiptap h3 {
     font-family: var(--font-heading);
     font-size: 1.1rem;
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     line-height: 1.4;
     margin: 0.75em 0 0.25em;
   }
@@ -1884,7 +3944,7 @@
   }
 
   .compose-tiptap-body .tiptap th {
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     background: var(--site-elevated-bg);
   }
 
@@ -1906,8 +3966,10 @@
     --_img-toolbar-sep: oklch(1 0 0 / 0.15);
   }
 
-  :is(.dark, [data-theme="dark"]) .tiptap-image-figure {
-    --_img-toolbar-bg: oklch(0.32 0.01 260 / 0.88);
+  @media (prefers-color-scheme: dark) {
+    .tiptap-image-figure {
+      --_img-toolbar-bg: oklch(0.32 0.01 260 / 0.88);
+    }
   }
 
   .tiptap-image-container {
@@ -2049,7 +4111,7 @@
 
   .tiptap-image-alt-btn {
     font-size: 0.7rem;
-    font-weight: 600;
+    font-weight: var(--fw-semibold);
     padding: 2px 6px;
     border-radius: 4px;
     border: 1px solid var(--site-divider);
@@ -2118,16 +4180,17 @@
     border-radius: 8px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
     padding: 4px;
-    min-width: 200px;
+    min-width: 220px;
     max-height: 320px;
     overflow-y: auto;
+    overscroll-behavior: contain;
   }
 
   .tiptap-slash-item {
     display: flex;
     align-items: center;
     gap: 10px;
-    padding: 8px 12px;
+    padding: 6px 10px;
     border-radius: 6px;
     cursor: pointer;
     font-size: 0.875rem;
@@ -2144,13 +4207,25 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 24px;
-    height: 24px;
-    font-size: 0.8rem;
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    background: var(--site-nav-hover-bg);
     color: var(--site-text-secondary);
     flex-shrink: 0;
   }
 
+  .tiptap-slash-item-icon svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .tiptap-slash-item.is-selected .tiptap-slash-item-icon,
+  .tiptap-slash-item:hover .tiptap-slash-item-icon {
+    background: var(--site-divider);
+    color: var(--site-text-primary);
+  }
+
   .tiptap-slash-item-label {
     flex: 1;
   }
@@ -2397,7 +4472,7 @@
     width: 100%;
     font-family: var(--font-heading);
     font-size: 1.5rem;
-    font-weight: 500;
+    font-weight: var(--fw-medium);
     color: var(--site-text-primary);
     line-height: 1.3;
   }
@@ -2409,16 +4484,448 @@
 
   .compose-fullscreen .compose-tiptap-body .tiptap {
     min-height: 400px;
+    padding-bottom: calc(100dvh - 150px);
+  }
+
+  /* =========================================================================
+   * Archive Page
+   * ========================================================================= */
+
+  /* --- Filter bar (single row of BaseCoat selects) ----------------------- */
+
+  .archive-filters {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .archive-filters-chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* --- Chip select -------------------------------------------------------- */
+
+  .archive-chip-select {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .archive-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    height: 2rem;
+    padding: 0 10px;
+    border: 1px solid var(--border);
+    border-radius: 9999px;
+    background: var(--background);
+    color: var(--site-text-primary);
+    font-size: var(--text-sm);
+    cursor: pointer;
+    transition:
+      background 0.15s ease,
+      border-color 0.15s ease;
+    white-space: nowrap;
+  }
+
+  .archive-chip:hover {
+    background: var(--secondary);
+  }
+
+  .archive-chip-active {
+    padding-right: 6px;
+  }
+
+  .archive-chip-label {
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--text-sm);
+  }
+
+  .archive-chip-clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border-radius: 9999px;
+    color: var(--muted-foreground);
+    transition:
+      background 0.15s ease,
+      color 0.15s ease;
+  }
+
+  .archive-chip-clear:hover {
+    background: var(--destructive);
+    color: var(--destructive-foreground);
+  }
+
+  .archive-chip-select.select [data-popover] [role="option"] {
+    cursor: pointer;
+  }
+
+  .archive-chip-sep {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: 4px -4px;
+  }
+
+  /* --- View toggle -------------------------------------------------------- */
+
+  .archive-view-toggle {
+    display: flex;
+    align-items: center;
+    background: var(--secondary);
+    border-radius: 9999px;
+    padding: 3px;
+    flex-shrink: 0;
+  }
+
+  .archive-view-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 9999px;
+    color: var(--muted-foreground);
+    transition:
+      background 0.15s ease,
+      color 0.15s ease;
+  }
+
+  .archive-view-btn:hover {
+    color: var(--site-text-primary);
+  }
+
+  .archive-view-btn-active {
+    background: var(--background);
+    color: var(--site-text-primary);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+
+  /* --- Grid --------------------------------------------------------------- */
+
+  .archive-grid-wrapper {
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    margin-left: -50vw;
+    padding: 16px var(--site-padding);
   }
 
-  .compose-fullscreen-plus-menu {
+  .archive-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 8px;
+  }
+
+  @media (min-width: 700px) {
+    .archive-grid {
+      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+      gap: 10px;
+    }
+  }
+
+  /* --- Tiles -------------------------------------------------------------- */
+
+  .archive-tile {
     position: relative;
+    aspect-ratio: 1;
+    overflow: hidden;
+    border-radius: 6px;
+    transition:
+      border-color 0.2s ease,
+      opacity 0.15s ease;
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    background: var(--secondary);
+    border: 1px solid oklch(from var(--border) l c h / 0.5);
+  }
+
+  .archive-tile:hover {
+    border-color: var(--border);
   }
 
-  .compose-fullscreen-plus-dropdown {
+  /* Hover date label (bottom-left) */
+  .archive-tile-date {
     position: absolute;
-    top: 100%;
-    left: 0;
-    margin-top: 4px;
+    bottom: 6px;
+    right: 6px;
+    z-index: 1;
+    font-size: 0.625rem;
+    font-weight: var(--fw-medium);
+    padding: 2px 6px;
+    border-radius: 3px;
+    background: var(--background);
+    color: var(--site-text-secondary);
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    pointer-events: none;
+  }
+
+  .archive-tile:hover .archive-tile-date {
+    opacity: 1;
+  }
+
+  .archive-tile-mixed .archive-tile-date,
+  .archive-tile-image .archive-tile-date {
+    background: rgba(0, 0, 0, 0.6);
+    color: #fff;
+  }
+
+  /* Inline link format indicator (before title text) */
+  .archive-tile-link-indicator {
+    display: inline;
+    vertical-align: middle;
+    margin-right: 3px;
+    color: var(--muted-foreground);
+  }
+
+  .archive-tile-link-indicator > svg {
+    display: inline;
+    width: 11px;
+    height: 11px;
+    vertical-align: -1px;
+  }
+
+  .archive-tile-mixed .archive-tile-link-indicator {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  /* Centered video play overlay */
+  .archive-tile-badge {
+    position: absolute;
+    z-index: 1;
+    line-height: 0;
+    pointer-events: none;
+  }
+
+  .archive-tile-badge > svg {
+    display: block;
+  }
+
+  .archive-tile-badge-center {
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
+  }
+
+  .archive-tile-badge-center > svg {
+    width: 36px;
+    height: 36px;
+  }
+
+  /* Badge row pinned to bottom-right of content */
+  .archive-tile-badge-row {
+    flex-shrink: 0;
+    margin-top: auto;
+    align-self: flex-start;
+    line-height: 0;
+    color: var(--muted-foreground);
+  }
+
+  .archive-tile-badge-row > svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* Badge row on image-bg tiles: white */
+  .archive-tile-mixed .archive-tile-badge-row,
+  .archive-tile-image .archive-tile-badge-row {
+    position: relative;
+    color: rgba(255, 255, 255, 0.8);
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
+  }
+
+  .archive-tile-bg {
+    position: absolute;
+    inset: 0;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+
+  .archive-tile-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    height: 100%;
+    padding: 10px;
+    overflow: hidden;
+  }
+
+  .archive-tile-title {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    flex-shrink: 0;
+    font-size: 0.75rem;
+    font-weight: var(--fw-semibold);
+    line-height: 1.4;
+    margin-bottom: 2px;
+  }
+
+  .archive-tile-summary {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    font-size: 0.75rem;
+    line-height: 1.45;
+    mask-image: linear-gradient(
+      to bottom,
+      #000 calc(100% - 1.2em),
+      transparent
+    );
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      #000 calc(100% - 1.2em),
+      transparent
+    );
+  }
+
+  /* Muted summary when title is present */
+  .archive-tile-title + .archive-tile-summary {
+    color: var(--muted-foreground);
+  }
+
+  /* --- Text tile ---------------------------------------------------------- */
+
+  .archive-tile-text {
+    background: var(--card);
+  }
+
+  .archive-tile-text .archive-tile-content {
+    justify-content: flex-start;
+    padding: 12px;
+  }
+
+  .archive-tile-text .archive-tile-title {
+    color: var(--site-text-primary);
+  }
+
+  .archive-tile-text .archive-tile-summary {
+    color: var(--site-text-primary);
+  }
+
+  /* --- Image tile: badge row only, pinned to bottom ----------------------- */
+
+  .archive-tile-image .archive-tile-content {
+    justify-content: flex-end;
+    padding: 8px;
+  }
+
+  /* --- Mixed tile: image bg + gradient + white text ----------------------- */
+
+  .archive-tile-mixed .archive-tile-content::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.65) 0%,
+      transparent 60%
+    );
+    pointer-events: none;
+  }
+
+  .archive-tile-mixed .archive-tile-title,
+  .archive-tile-mixed .archive-tile-summary {
+    position: relative;
+    color: #fff;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+    /* Override flex-fill: fixed 2 lines on image bg */
+    flex: none;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    mask-image: none;
+    -webkit-mask-image: none;
+  }
+
+  .archive-tile-mixed .archive-tile-title + .archive-tile-summary {
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  /* --- Quote tile: centered italic text ----------------------------------- */
+
+  .archive-tile-quote {
+    background: var(--accent);
+  }
+
+  .archive-tile-quote .archive-tile-content {
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 14px;
+  }
+
+  .archive-tile-quote .archive-tile-summary {
+    flex: unset;
+    font-style: italic;
+    font-family: var(--font-heading);
+    color: var(--site-text-primary);
+  }
+
+  /* --- Month header in grid ------------------------------------------------ */
+
+  .archive-month-header {
+    grid-column: 1 / -1;
+    font-size: 0.6875rem;
+    font-weight: var(--fw-semibold);
+    color: var(--site-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 20px 2px 4px;
+  }
+
+  .archive-month-header:first-child {
+    padding-top: 4px;
+  }
+
+  /* --- List view month headers --------------------------------------------- */
+
+  .archive-list-groups {
+    display: flex;
+    flex-direction: column;
+    gap: 2.75rem;
+  }
+
+  .archive-list-month-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 0.75rem;
+    font-weight: var(--fw-semibold);
+    color: var(--site-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 0;
+    margin-bottom: 16px;
+    white-space: nowrap;
+  }
+
+  .archive-list-month-header::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    border-radius: 9999px;
+    background: var(--site-text-secondary);
+    flex-shrink: 0;
+    opacity: 0.4;
   }
 }