@apply flex items-center justify-between gap-4;
}
+ /* =====================
+ Timeline Layout
+ ===================== */
+
+ .timeline {
+ @apply relative mx-auto max-w-5xl px-4 py-12;
+ }
+
+ /* Vertical spine — center on desktop, left on mobile */
+ .timeline::before {
+ content: '';
+ @apply absolute top-0 bottom-0;
+ left: 20px;
+ width: 2px;
+ background: linear-gradient(to bottom, var(--accent), var(--accent2, var(--accent)));
+ opacity: 0.7;
+ }
+
+ @screen md {
+ .timeline::before {
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ }
+
+ /* Each timeline row */
+ .timeline-item {
+ @apply relative mb-10;
+ /* Mobile: offset right of left spine */
+ margin-left: 44px;
+ }
+
+ @screen md {
+ .timeline-item {
+ margin-left: 0;
+ @apply flex items-start;
+ /* Each item takes full width; card is positioned via padding inside */
+ }
+ }
+
+ /* ---- Connector line ---- */
+ .timeline-connector {
+ @apply absolute;
+ top: 20px;
+ height: 2px;
+ /* Mobile: from spine (left:22px) to card left edge (left:44px) */
+ left: -22px;
+ width: 22px;
+ }
+
+ @screen md {
+ /* Desktop: driven by .timeline-item--left / --right modifier */
+ .timeline-item--left .timeline-connector {
+ right: calc(50% - 28px + 1px);
+ left: auto;
+ width: 28px;
+ }
+ .timeline-item--right .timeline-connector {
+ left: calc(50% + 28px - 28px);
+ width: 28px;
+ }
+ }
+
+ /* ---- Node on spine ---- */
+ .timeline-node {
+ @apply absolute rounded-full z-10;
+ top: 14px;
+ /* Mobile: on left spine at left:20px, node is 10px → left:15px */
+ left: -27px;
+ width: 10px;
+ height: 10px;
+ border: 2px solid var(--bg);
+ }
+
+ @screen md {
+ .timeline-node {
+ width: 12px;
+ height: 12px;
+ top: 14px;
+ left: calc(50% - 6px);
+ /* Override mobile left positioning */
+ transform: none;
+ }
+ /* Reset mobile left for desktop — node always on center spine */
+ .timeline-item--left .timeline-node,
+ .timeline-item--right .timeline-node {
+ left: calc(50% - 6px);
+ }
+ }
+
+ /* ---- Card wrapper ---- */
+ .timeline-card {
+ @apply flex border rounded-lg overflow-hidden bg-surface;
+ transition: box-shadow 0.2s, transform 0.2s;
+ }
+
+ .timeline-card:hover {
+ transform: translateY(-2px);
+ }
+
+ /* Mobile: full width */
+ .timeline-card {
+ width: 100%;
+ }
+
+ @screen md {
+ /* Desktop: card occupies ~45% width, positioned by padding on .timeline-item */
+ .timeline-item--left {
+ padding-right: calc(50% + 28px);
+ }
+ .timeline-item--right {
+ padding-left: calc(50% + 28px);
+ }
+ }
+
+ /* ---- Thumbnail panel ---- */
+ .timeline-thumb {
+ @apply flex-shrink-0 overflow-hidden;
+ /* Mobile: full width banner on top — handled by flex-direction:column on mobile card */
+ width: 100%;
+ height: 90px;
+ }
+
+ @screen md {
+ .timeline-thumb {
+ width: 38%;
+ height: auto;
+ aspect-ratio: 2 / 3;
+ }
+ }
+
+ .timeline-thumb img {
+ @apply w-full h-full object-cover;
+ transition: transform 0.2s;
+ }
+
+ .timeline-card:hover .timeline-thumb img {
+ transform: scale(1.03);
+ }
+
+ /* ---- Text panel ---- */
+ .timeline-body {
+ @apply flex flex-col gap-2 p-4 flex-1;
+ }
+
+ /* Mobile card stacks thumbnail above body */
+ .timeline-card {
+ flex-direction: column;
+ }
+
+ @screen md {
+ .timeline-card {
+ flex-direction: row;
+ }
+ /* Left card: thumb first (outer=left), body second */
+ .timeline-item--left .timeline-card {
+ flex-direction: row;
+ }
+ /* Right card: body first (inner=left), thumb last (outer=right) */
+ .timeline-item--right .timeline-card {
+ flex-direction: row-reverse;
+ }
+ }
+
+ /* ---- Meta row (TYPE · date) ---- */
+ .timeline-meta {
+ @apply flex items-center gap-2 text-xs font-mono tracking-widest uppercase;
+ }
+
+ .timeline-meta-sep {
+ @apply text-border;
+ }
+
+ .timeline-date {
+ @apply text-text-dim normal-case tracking-normal;
+ }
+
+ /* ---- Title ---- */
+ .timeline-title {
+ @apply font-semibold text-base leading-snug;
+ }
+
+ .timeline-title a {
+ @apply hover:text-accent transition-colors;
+ }
+
+ /* ---- Excerpt ---- */
+ .timeline-excerpt {
+ @apply text-text-dim text-sm line-clamp-3 leading-relaxed;
+ }
+
+ /* ---- Pinned badge ---- */
+ .timeline-pinned {
+ @apply inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold;
+ }
+
/* Header navigation styling */
.header {
@apply fixed top-0 left-0 right-0 z-40;
