https://feminine-rising.netlify.app/mentorship

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Private Mentorship — Feminine Rising</title>
7<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
8<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png">
9<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
10<link rel="preconnect" href="https://fonts.googleapis.com">
11<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Lora:ital,wght@0,400;0,600;1,400&family=Marcellus&family=Great+Vibes&display=swap" rel="stylesheet">

12<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js"></script>

12

13<script src="/lame.min.js"></script>

13
14<style>
15/* ============================================
16   DESIGN TOKENS
17   ============================================ */
18:root {
19  --gold: #C5A55A;
20  --gold-light: #D4BA7A;
21  --gold-pale: #F0E6CC;
22  --plum: #8B2252;
23  --plum-deep: #6B1A42;
24  --berry: #940E4B;
25  --cream: #FBF8F3;
26  --cream-warm: #F7F0E5;
27  --charcoal: #2E2E2E;
28  --sidebar-width: 240px;
29}
30
31* { margin: 0; padding: 0; box-sizing: border-box; }
32
33body {
34  font-family: 'Lora', serif;
35  background: var(--cream);
36  color: var(--charcoal);
37  min-height: 100vh;
38}
39
40/* ============================================
41   PASSWORD SCREEN
42   ============================================ */
43#password-screen {
44  min-height: 100vh;
45  display: flex;
46  flex-direction: column;
47  align-items: center;
48  justify-content: center;
49  background: var(--cream);
50  position: relative;
51}
52
53#password-screen::before {
54  content: '';
55  position: absolute;
56  top: 0; left: 0; right: 0;
57  height: 200px;
58  background: var(--plum);
59}
60
61.password-card {
62  position: relative;
63  background: var(--cream);
64  border: 1px solid var(--gold-light);
65  border-radius: 12px;
66  padding: 60px 50px 50px;
67  max-width: 460px;
68  width: 90%;
69  text-align: center;
70  box-shadow: 0 8px 40px rgba(139, 34, 82, 0.08);
71  margin-top: -40px;
72}
73
74.password-logo { width: 60px; height: 60px; margin-bottom: 20px; }
75
76.password-title {
77  font-family: 'Marcellus', serif;
78  font-size: 13px;
79  letter-spacing: 4px;
80  color: var(--gold);
81  text-transform: uppercase;
82  margin-bottom: 8px;
83}
84
85.password-heading {
86  font-family: 'Cormorant Garamond', serif;
87  font-size: 30px;
88  color: var(--plum-deep);
89  margin-bottom: 6px;
90  font-weight: 400;
91}
92
93.password-subtitle {
94  font-family: 'Cormorant Garamond', serif;
95  font-style: italic;
96  font-size: 16px;
97  color: var(--berry);
98  margin-bottom: 30px;
99}
100
101.password-divider {
102  display: flex;
103  align-items: center;
104  gap: 12px;
105  margin-bottom: 30px;
106}
107
108.password-divider::before,
109.password-divider::after {
110  content: '';
111  flex: 1;
112  height: 1px;
113  background: var(--gold-light);
114}
115
116.password-divider span { color: var(--gold); font-size: 14px; }
117
118.password-prompt {
119  font-family: 'Cormorant Garamond', serif;
120  font-style: italic;
121  font-size: 15px;
122  color: var(--plum);
123  margin-bottom: 20px;
124}
125
126.password-input {
127  width: 100%;
128  padding: 14px 20px;
129  border: 1px solid var(--gold-light);
130  border-radius: 8px;
131  background: white;
132  font-family: 'Lora', serif;
133  font-size: 14px;
134  color: var(--charcoal);
135  text-align: center;
136  letter-spacing: 2px;
137  outline: none;
138  transition: border-color 0.3s;
139  margin-bottom: 16px;
140}
141
142.password-input:focus {
143  border-color: var(--gold);
144  box-shadow: 0 0 0 3px rgba(197, 165, 90, 0.15);
145}
146
147.password-input::placeholder { color: #bbb; letter-spacing: 1px; }
148
149.password-btn {
150  width: 100%;
151  padding: 14px;
152  background: var(--plum);
153  color: var(--gold);
154  border: none;
155  border-radius: 8px;
156  font-family: 'Marcellus', serif;
157  font-size: 13px;
158  letter-spacing: 3px;
159  text-transform: uppercase;
160  cursor: pointer;
161  transition: all 0.3s;
162}
163
164.password-btn:hover {
165  background: var(--plum-deep);
166  box-shadow: 0 4px 16px rgba(107, 26, 66, 0.3);
167}
168
169.password-error {
170  color: var(--berry);
171  font-size: 13px;
172  font-style: italic;
173  margin-top: 12px;
174  opacity: 0;
175  transition: opacity 0.3s;
176}
177
178.password-error.show { opacity: 1; }
179
180.back-link {
181  position: relative;
182  margin-top: 20px;
183  font-size: 12px;
184  color: var(--gold);
185  text-decoration: none;
186  font-family: 'Marcellus', serif;
187  letter-spacing: 2px;
188  text-transform: uppercase;
189}
190
191.back-link:hover { color: var(--plum); }
192
193.back-to-portal {
194  position: fixed;
195  top: 16px;
196  left: 20px;
197  display: inline-flex;
198  align-items: center;
199  gap: 6px;
200  padding: 8px 18px;
201  background: rgba(107, 26, 66, 0.7);
202  border: 1px solid rgba(197, 165, 90, 0.4);
203  border-radius: 6px;
204  color: var(--gold-light);
205  font-family: 'Marcellus', serif;
206  font-size: 10px;
207  letter-spacing: 2px;
208  text-transform: uppercase;
209  text-decoration: none;
210  transition: all 0.3s;
211  z-index: 300;
212}
213
214.back-to-portal:hover {
215  background: rgba(107, 26, 66, 0.95);
216  border-color: var(--gold);
217  color: var(--gold);
218}
219
220/* ============================================
221   MAGIC LINK AUTH SCREEN
222   ============================================ */
223#auth-screen {
224  display: none;
225  min-height: 100vh;
226  flex-direction: column;
227  align-items: center;
228  justify-content: center;
229  background: var(--cream);
230  position: relative;
231}
232
233#auth-screen::before {
234  content: '';
235  position: absolute;
236  top: 0; left: 0; right: 0;
237  height: 200px;
238  background: var(--plum);
239}
240
241.auth-card {
242  position: relative;
243  background: var(--cream);
244  border: 1px solid var(--gold-light);
245  border-radius: 12px;
246  padding: 50px 50px 44px;
247  max-width: 460px;
248  width: 90%;
249  text-align: center;
250  box-shadow: 0 8px 40px rgba(139, 34, 82, 0.08);
251  margin-top: -40px;
252}
253
254.auth-icon {
255  font-size: 32px;
256  color: var(--gold);
257  margin-bottom: 16px;
258}
259
260.auth-title {
261  font-family: 'Cormorant Garamond', serif;
262  font-size: 26px;
263  color: var(--plum-deep);
264  font-weight: 400;
265  margin-bottom: 8px;
266}
267
268.auth-text {
269  font-family: 'Cormorant Garamond', serif;
270  font-style: italic;
271  font-size: 15px;
272  color: var(--plum);
273  margin-bottom: 24px;
274  line-height: 1.6;
275}
276
277.auth-input {
278  width: 100%;
279  padding: 14px 20px;
280  border: 1px solid var(--gold-light);
281  border-radius: 8px;
282  background: white;
283  font-family: 'Lora', serif;
284  font-size: 14px;
285  color: var(--charcoal);
286  text-align: center;
287  outline: none;
288  transition: border-color 0.3s;
289  margin-bottom: 16px;
290}
291
292.auth-input:focus {
293  border-color: var(--gold);
294  box-shadow: 0 0 0 3px rgba(197, 165, 90, 0.15);
295}
296
297.auth-btn {
298  width: 100%;
299  padding: 14px;
300  background: var(--berry);
301  color: var(--gold);
302  border: 2px solid var(--gold);
303  border-radius: 8px;
304  font-family: 'Marcellus', serif;
305  font-size: 12px;
306  letter-spacing: 3px;
307  text-transform: uppercase;
308  cursor: pointer;
309  transition: all 0.3s;
310}
311
312.auth-btn:hover {
313  background: var(--plum-deep);
314  border-color: var(--gold-light);
315  box-shadow: 0 4px 16px rgba(148, 14, 75, 0.3);
316}
317
318.auth-btn:disabled {
319  opacity: 0.5;

320  cursor: not-allowed;
321}
322
323.auth-message {
324  font-family: 'Cormorant Garamond', serif;
325  font-style: italic;
326  font-size: 14px;
327  color: var(--berry);
328  margin-top: 16px;
329  opacity: 0;
330  transition: opacity 0.3s;
331  line-height: 1.5;
332}
333
334.auth-message.show { opacity: 1; }
335
336.auth-message.success { color: var(--plum); }
337
338/* ============================================
339   NAME ONBOARDING
340   ============================================ */
341#name-screen {
342  display: none;
343  min-height: 100vh;
344  flex-direction: column;
345  align-items: center;
346  justify-content: center;
347  background: var(--cream);
348  position: relative;
349}
350
351#name-screen::before {
352  content: '';
353  position: absolute;
354  top: 0; left: 0; right: 0;
355  height: 200px;
356  background: var(--plum);
357}
358
359/* ============================================
360   HUB LAYOUT
361   ============================================ */
362#hub {
363  display: none;
364  min-height: 100vh;
365}
366
367.hub-layout {
368  display: flex;
369  min-height: 100vh;
370}
371
372/* Sidebar */
373.sidebar {
374  width: var(--sidebar-width);
375  background: white;
376  border-right: 1px solid rgba(197, 165, 90, 0.2);
377  display: flex;
378  flex-direction: column;
379  position: fixed;
380  top: 0;
381  left: 0;
382  bottom: 0;
383  z-index: 100;
384  transition: transform 0.3s ease;
385}
386
387.sidebar-header {
388  padding: 28px 24px 20px;
389  border-bottom: 1px solid rgba(197, 165, 90, 0.15);
390  text-align: center;
391}
392
393.sidebar-logo {
394  width: 40px;
395  height: 40px;
396  margin-bottom: 10px;
397}
398
399.sidebar-brand {
400  font-family: 'Marcellus', serif;
401  font-size: 9px;
402  letter-spacing: 4px;
403  color: var(--gold);
404  text-transform: uppercase;
405  margin-bottom: 4px;
406}
407
408.sidebar-title {
409  font-family: 'Cormorant Garamond', serif;
410  font-size: 18px;
411  color: var(--plum-deep);
412  font-weight: 400;
413}
414
415.sidebar-nav {
416  flex: 1;
417  padding: 20px 0;
418  overflow-y: auto;
419}
420
421.sidebar-link {
422  display: flex;
423  align-items: center;
424  gap: 12px;
425  padding: 14px 24px;
426  font-family: 'Marcellus', serif;
427  font-size: 10px;
428  letter-spacing: 2.5px;
429  color: var(--charcoal);
430  text-transform: uppercase;
431  text-decoration: none;
432  cursor: pointer;
433  transition: all 0.3s;
434  border-left: 3px solid transparent;
435  opacity: 0.6;
436}
437
438.sidebar-link:hover {
439  opacity: 1;
440  background: var(--cream);
441  color: var(--plum);
442}
443
444.sidebar-link.active {
445  opacity: 1;
446  color: var(--berry);
447  border-left-color: var(--berry);
448  background: rgba(148, 14, 75, 0.04);
449}
450
451.sidebar-link-icon {
452  font-size: 16px;
453  width: 20px;
454  text-align: center;
455  flex-shrink: 0;
456}
457
458.sidebar-footer {
459  padding: 20px 24px;
460  border-top: 1px solid rgba(197, 165, 90, 0.15);
461}
462
463.sidebar-user {
464  font-family: 'Cormorant Garamond', serif;
465  font-style: italic;
466  font-size: 15px;
467  color: var(--plum);
468  margin-bottom: 8px;
469  display: flex;
470  align-items: center;
471  gap: 8px;
472}
473
474.sidebar-presence-dot {
475  display: inline-block;
476  width: 8px;
477  height: 8px;
478  border-radius: 50%;
479  background: #4caf50;
480  box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6);
481  animation: presencePulse 2s ease-in-out infinite;
482}
483
484@keyframes presencePulse {
485  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6); }
486  50% { box-shadow: 0 0 0 6px rgba(76, 175, 80, 0); }
487}
488
489.sidebar-presence-toggle {
490  display: block;
491  background: none;
492  border: 1px solid var(--gold);
493  border-radius: 14px;
494  font-family: 'Marcellus', serif;
495  font-size: 10.5px;
496  letter-spacing: 1.2px;
497  color: var(--berry);
498  font-weight: 600;
499  text-transform: uppercase;
500  cursor: pointer;
501  padding: 7px 14px;
502  margin-bottom: 10px;
503  transition: all 0.3s;
504}
505.sidebar-presence-toggle:hover {
506  border-color: var(--berry);
507  color: var(--berry);
508}
509.sidebar-presence-toggle.is-here {
510  background: var(--berry);
511  color: white;
512  border-color: var(--berry);
513}
514
515/* "Sumir is in the room" banner on home view */
516.presence-banner {
517  display: inline-flex;
518  align-items: center;
519  gap: 10px;
520  padding: 10px 22px;
521  background: rgba(76, 175, 80, 0.1);
522  border: 1px solid rgba(76, 175, 80, 0.4);
523  border-radius: 24px;
524  margin-bottom: 24px;
525  animation: presenceBannerFade 1s ease;
526}
527.presence-banner-dot {
528  width: 9px;
529  height: 9px;
530  border-radius: 50%;
531  background: #4caf50;
532  box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6);
533  animation: presencePulse 2s ease-in-out infinite;
534}
535.presence-banner-text {
536  font-family: 'Cormorant Garamond', serif;
537  font-style: italic;
538  font-size: 15px;
539  color: var(--plum-deep);
540}
541@keyframes presenceBannerFade {
542  from { opacity: 0; transform: translateY(-6px); }
543  to { opacity: 1; transform: translateY(0); }
544}
545
546.sidebar-signout {
547  font-family: 'Marcellus', serif;
548  font-size: 9px;
549  letter-spacing: 2px;
550  color: var(--gold);
551  text-transform: uppercase;
552  cursor: pointer;
553  text-decoration: none;
554  transition: color 0.3s;
555  background: none;
556  border: none;
557  padding: 0;
558}
559
560.sidebar-signout:hover { color: var(--berry); }
561
562.sidebar-back {
563  display: block;
564  margin-top: 12px;
565  font-family: 'Marcellus', serif;
566  font-size: 9px;
567  letter-spacing: 2px;
568  color: var(--gold);
569  text-transform: uppercase;
570  text-decoration: none;
571  transition: color 0.3s;
572}
573
574.sidebar-back:hover { color: var(--plum); }
575
576/* Mobile hamburger */
577.hamburger {
578  display: none;
579  position: fixed;
580  top: 16px;
581  left: 16px;
582  z-index: 200;
583  width: 40px;
584  height: 40px;
585  background: var(--plum);
586  border: 1px solid var(--gold);
587  border-radius: 8px;
588  cursor: pointer;
589  align-items: center;
590  justify-content: center;
591  flex-direction: column;
592  gap: 5px;
593}
594
595.hamburger span {
596  display: block;
597  width: 18px;
598  height: 1.5px;
599  background: var(--gold);
600  transition: all 0.3s;
601}
602
603.sidebar-overlay {
604  display: none;
605  position: fixed;
606  inset: 0;
607  background: rgba(0,0,0,0.3);
608  z-index: 90;
609}
610
611/* Content area */
612.content-area {
613  flex: 1;
614  margin-left: var(--sidebar-width);
615  min-height: 100vh;
616}
617
618.content-header {
619  background: var(--plum);
620  padding: 32px 40px 28px;
621  position: relative;
622}
623
624.content-header::after {

625  content: '';
626  position: absolute;
627  bottom: -3px;
628  left: 5%; right: 5%;
629  height: 3px;
630  background: var(--gold);
631}
632
633.content-header-eyebrow {
634  font-family: 'Marcellus', serif;
635  font-size: 10px;
636  letter-spacing: 5px;
637  color: var(--gold);
638  text-transform: uppercase;
639  margin-bottom: 6px;
640}
641
642.content-header-title {
643  font-family: 'Cormorant Garamond', serif;
644  font-size: 30px;
645  color: white;
646  font-weight: 400;
647}
648
649.content-body {
650  max-width: 720px;
651  margin: 0 auto;
652  padding: 40px 30px 60px;
653}
654
655/* ============================================
656   VIEW CONTAINERS
657   ============================================ */
658.view { display: none; }
659.view.active { display: block; }
660
661/* ============================================
662   COMMUNITY FEED
663   ============================================ */
664/* Post composer (teacher only) */
665.composer {
666  background: white;
667  border-radius: 14px;
668  border: 1px solid rgba(197, 165, 90, 0.25);
669  margin-bottom: 28px;
670  overflow: hidden;
671}
672
673.composer-trigger {
674  display: flex;
675  align-items: center;
676  gap: 12px;
677  padding: 16px 22px;
678  cursor: pointer;
679  transition: background 0.2s;
680}
681.composer-trigger:hover { background: rgba(197, 165, 90, 0.06); }
682.composer-trigger-avatar {
683  width: 36px;
684  height: 36px;
685  border-radius: 50%;
686  background: var(--plum);
687  color: var(--gold);
688  display: flex;
689  align-items: center;
690  justify-content: center;
691  font-family: 'Marcellus', serif;
692  font-size: 14px;
693  font-weight: 600;
694  flex-shrink: 0;
695}
696.composer-trigger-text {
697  font-family: 'Lora', serif;
698  font-size: 14px;
699  color: #aaa;
700  font-style: italic;
701}
702
703.composer-expanded {
704  display: none;
705  padding: 0 22px 20px;
706  border-top: 1px solid rgba(197, 165, 90, 0.15);
707}
708.composer-expanded.open { display: block; }
709
710.composer-label {
711  font-family: 'Marcellus', serif;
712  font-size: 9px;
713  letter-spacing: 3px;
714  color: var(--gold);
715  text-transform: uppercase;
716  margin-bottom: 14px;
717  padding-top: 18px;
718}
719
720.composer-title-input {
721  width: 100%;
722  padding: 10px 14px;
723  border: 1px solid rgba(197, 165, 90, 0.3);
724  border-radius: 6px;
725  background: var(--cream);
726  font-family: 'Cormorant Garamond', serif;
727  font-size: 20px;
728  color: var(--plum-deep);
729  outline: none;
730  margin-bottom: 10px;
731  transition: border-color 0.3s;
732}
733
734.composer-title-input:focus { border-color: var(--gold); }
735.composer-title-input::placeholder { color: #bbb; }
736
737.composer-textarea {
738  width: 100%;
739  min-height: 120px;
740  padding: 14px;
741  border: 1px solid rgba(197, 165, 90, 0.3);
742  border-radius: 6px;
743  background: var(--cream);
744  font-family: 'Lora', serif;
745  font-size: 13px;
746  line-height: 1.75;
747  color: var(--charcoal);
748  outline: none;
749  resize: vertical;
750  transition: border-color 0.3s;
751}
752
753.composer-textarea:focus { border-color: var(--gold); }
754.composer-textarea::placeholder { color: #bbb; }
755
756.composer-footer {
757  display: flex;
758  justify-content: space-between;
759  align-items: center;
760  margin-top: 14px;
761}
762
763.composer-type {
764  font-family: 'Marcellus', serif;
765  font-size: 10px;
766  letter-spacing: 1px;
767  color: var(--charcoal);
768  padding: 6px 12px;
769  border: 1px solid rgba(197, 165, 90, 0.3);
770  border-radius: 6px;
771  background: white;
772  outline: none;
773  cursor: pointer;
774}
775
776.composer-submit {
777  padding: 10px 28px;
778  background: var(--plum);
779  color: var(--gold);
780  border: none;
781  border-radius: 8px;
782  font-family: 'Marcellus', serif;
783  font-size: 10px;
784  letter-spacing: 2px;
785  text-transform: uppercase;
786  cursor: pointer;
787  transition: all 0.3s;
788}
789
790.composer-submit:hover {
791  background: var(--plum-deep);
792  box-shadow: 0 3px 12px rgba(107, 26, 66, 0.3);
793}
794
795.composer-submit:disabled { opacity: 0.4; cursor: not-allowed; }
796
797/* Voice recorder */
798#vr-mic-btn.recording {
799  background: var(--gold);
800  color: var(--berry);
801  animation: vrPulse 1.4s ease-in-out infinite;
802}
803@keyframes vrPulse {
804  0%, 100% { box-shadow: 0 0 0 0 rgba(197, 165, 90, 0.6); transform: scale(1); }
805  50% { box-shadow: 0 0 0 16px rgba(197, 165, 90, 0); transform: scale(1.04); }
806}
807#vr-mic-btn:hover {
808  transform: scale(1.05);
809}
810
811/* Inline voice-note player in feed */
812.voice-note-player {
813  display: flex;
814  align-items: center;
815  gap: 14px;
816  padding: 16px 18px;
817  background: linear-gradient(135deg, var(--cream-warm) 0%, rgba(197, 165, 90, 0.08) 100%);
818  border: 1px solid rgba(197, 165, 90, 0.3);
819  border-left: 4px solid var(--berry);
820  border-radius: 12px;
821  margin: 14px 0;
822}
823.voice-note-icon {
824  width: 40px; height: 40px;
825  border-radius: 50%;
826  background: var(--berry);
827  color: var(--gold-light);
828  display: flex; align-items: center; justify-content: center;
829  font-size: 20px;
830  flex-shrink: 0;
831}
832.voice-note-label {
833  font-family: 'Marcellus', serif;
834  font-size: 9px;
835  letter-spacing: 2px;
836  color: var(--berry);
837  text-transform: uppercase;
838  margin-bottom: 2px;
839}
840.vn-play-btn {
841  width: 42px; height: 42px;
842  border-radius: 50%;
843  background: var(--berry);
844  color: var(--gold-light);
845  border: none;
846  cursor: pointer;
847  display: flex; align-items: center; justify-content: center;
848  font-size: 18px;
849  flex-shrink: 0;
850  transition: transform 0.15s, background 0.15s;
851}
852.vn-play-btn:hover { transform: scale(1.08); background: var(--plum-deep); }
853.vn-controls { flex: 1; display: flex; flex-direction: column; gap: 4px; }
854.vn-progress-wrap {
855  width: 100%;
856  height: 20px;
857  background: transparent;
858  cursor: pointer;
859  position: relative;
860  display: flex;
861  align-items: center;
862}
863.vn-progress-track {
864  width: 100%;
865  height: 5px;
866  background: rgba(197,165,90,0.2);
867  border-radius: 3px;
868  position: relative;
869}
870.vn-progress-bar {
871  height: 100%;
872  background: var(--berry);
873  border-radius: 3px;
874  width: 0%;
875  position: relative;
876}
877.vn-progress-bar::after {

878  content: '';
879  position: absolute;
880  right: -6px;
881  top: 50%;
882  transform: translateY(-50%);
883  width: 12px;
884  height: 12px;
885  background: var(--berry);
886  border-radius: 50%;
887  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
888}
889.vn-time-row {
890  display: flex;
891  justify-content: space-between;
892  align-items: center;
893}
894.vn-elapsed, .vn-remaining {
895  font-family: 'Marcellus', serif;
896  font-size: 10px;
897  letter-spacing: 1px;
898  color: var(--plum);
899  opacity: 0.7;
900}
901
902/* Feed posts */
903.feed-empty {
904  text-align: center;
905  padding: 60px 20px;
906}
907
908.feed-empty-icon {
909  font-size: 36px;
910  color: var(--gold-light);
911  margin-bottom: 16px;
912}
913
914.feed-empty-text {
915  font-family: 'Cormorant Garamond', serif;
916  font-style: italic;
917  font-size: 18px;
918  color: var(--plum);
919  opacity: 0.6;
920}
921
922.post-card {
923  background: white;
924  border-radius: 14px;
925  border: 1px solid rgba(197, 165, 90, 0.2);
926  border-left: 4px solid var(--berry);
927  padding: 32px 28px 24px;
928  margin-bottom: 28px;
929  animation: fadeInUp 0.6s ease;
930}
931
932@keyframes fadeInUp {
933  from { opacity: 0; transform: translateY(12px); }
934  to { opacity: 1; transform: translateY(0); }
935}
936
937.post-type-label {
938  font-family: 'Marcellus', serif;
939  font-size: 11px;
940  letter-spacing: 2px;
941  color: var(--berry);
942  text-transform: uppercase;
943  margin-bottom: 10px;
944  font-weight: 600;
945  opacity: 0.95;
946}
947
948.post-title {
949  font-family: 'Cormorant Garamond', serif;
950  font-size: 24px;
951  color: var(--plum-deep);
952  font-weight: 400;
953  margin-bottom: 14px;
954  line-height: 1.3;
955}
956
957.post-body {
958  font-family: 'Lora', serif;
959  font-size: 13px;
960  line-height: 1.85;
961  color: var(--charcoal);
962  opacity: 0.88;
963  margin-bottom: 20px;
964  white-space: pre-wrap;
965}
966
967.post-meta {
968  display: flex;
969  justify-content: space-between;
970  align-items: center;
971  padding-top: 16px;
972  border-top: 1px solid rgba(197, 165, 90, 0.12);
973}
974
975.post-author {
976  display: flex;
977  align-items: center;
978  gap: 8px;
979}
980
981.post-author-name {
982  font-family: 'Marcellus', serif;
983  font-size: 11px;
984  letter-spacing: 1px;
985  color: var(--berry);
986}
987
988.post-date {
989  font-family: 'Marcellus', serif;
990  font-size: 11px;
991  letter-spacing: 1px;
992  color: var(--berry);
993  opacity: 0.85;
994}
995
996.heart-btn {
997  display: flex;
998  align-items: center;
999  gap: 6px;
1000  background: none;
1001  border: none;
1002  cursor: pointer;
1003  padding: 6px 10px;
1004  border-radius: 20px;
1005  transition: all 0.3s;
1006}
1007
1008.heart-btn:hover {
1009  background: rgba(197, 165, 90, 0.1);
1010}
1011
1012.heart-icon {
1013  font-size: 19px;
1014  color: var(--berry);
1015  opacity: 0.55;
1016  transition: all 0.3s;
1017}
1018
1019.heart-btn:hover .heart-icon {
1020  opacity: 1;
1021}
1022
1023.heart-btn.hearted .heart-icon {
1024  color: var(--berry);
1025  opacity: 1;
1026}
1027
1028.heart-count {
1029  font-family: 'Marcellus', serif;
1030  font-size: 12px;
1031  color: var(--berry);
1032  font-weight: 600;
1033  min-width: 12px;
1034}
1035
1036@keyframes heartPulse {
1037  0% { transform: scale(1); }
1038  50% { transform: scale(1.3); }
1039  100% { transform: scale(1); }
1040}
1041
1042.heart-btn.pulse .heart-icon {
1043  animation: heartPulse 0.3s ease;
1044}
1045
1046/* Sister-to-sister emoji reactions on posts/comments */
1047.sister-reactions-row {
1048  display: flex;
1049  flex-wrap: wrap;
1050  gap: 6px;
1051  align-items: center;
1052  margin: 12px 0 0;
1053}
1054.sister-reaction-chip {
1055  display: inline-flex;
1056  align-items: center;
1057  gap: 4px;
1058  padding: 3px 9px;
1059  background: rgba(197, 165, 90, 0.1);
1060  border: 1px solid rgba(197, 165, 90, 0.25);
1061  border-radius: 14px;
1062  font-size: 13px;
1063  cursor: pointer;
1064  transition: all 0.2s;
1065}
1066.sister-reaction-chip:hover {
1067  background: rgba(197, 165, 90, 0.2);
1068}
1069.sister-reaction-chip.mine {
1070  background: rgba(148, 14, 75, 0.12);
1071  border-color: rgba(148, 14, 75, 0.4);
1072}
1073.sister-reaction-count {
1074  font-family: 'Marcellus', serif;
1075  font-size: 9px;
1076  color: var(--berry);
1077  letter-spacing: 1px;
1078}
1079.sister-reaction-picker {
1080  display: inline-flex;
1081  gap: 2px;
1082  padding: 2px 4px;
1083  background: white;
1084  border: 1px solid rgba(197, 165, 90, 0.3);
1085  border-radius: 14px;
1086  opacity: 0.6;
1087  transition: opacity 0.2s;
1088}
1089.sister-reaction-picker:hover {
1090  opacity: 1;
1091}
1092.sister-reaction-add {
1093  background: none;
1094  border: none;
1095  padding: 3px 6px;
1096  font-size: 13px;
1097  cursor: pointer;
1098  border-radius: 10px;
1099  transition: all 0.2s;
1100}
1101.sister-reaction-add:hover {
1102  background: rgba(197, 165, 90, 0.15);
1103  transform: scale(1.2);
1104}
1105
1106/* Post delete */
1107.post-delete {
1108  background: none;
1109  border: none;
1110  font-size: 14px;
1111  color: var(--gold-light);
1112  cursor: pointer;
1113  opacity: 0.4;
1114  transition: all 0.3s;
1115  padding: 4px 8px;
1116}
1117
1118.post-delete:hover {
1119  opacity: 1;
1120  color: var(--berry);
1121}
1122
1123/* Reflections */
1124.reflections-section {
1125  margin-top: 16px;
1126  padding-top: 16px;
1127  border-top: 1px solid rgba(197, 165, 90, 0.1);
1128}
1129
1130.reflections-toggle {
1131  font-family: 'Marcellus', serif;
1132  font-size: 11px;
1133  letter-spacing: 1.5px;
1134  color: var(--berry);
1135  font-weight: 600;
1136  text-transform: uppercase;
1137  cursor: pointer;
1138  background: none;
1139  border: none;
1140  padding: 6px 0;
1141  transition: color 0.3s;
1142  opacity: 0.85;
1143}
1144.reflections-toggle:hover { opacity: 1; }
1145
1146/* "Show more comments" button for long threads */
1147.show-more-comments {
1148  display: block;
1149  width: 100%;
1150  background: var(--cream-warm);
1151  border: 1px dashed rgba(197, 165, 90, 0.4);
1152  color: var(--plum);
1153  font-family: 'Marcellus', serif;
1154  font-size: 10px;
1155  letter-spacing: 1.5px;
1156  text-transform: uppercase;
1157  padding: 10px 16px;
1158  margin-bottom: 12px;
1159  border-radius: 8px;
1160  cursor: pointer;
1161  transition: all 0.3s;
1162}
1163.show-more-comments:hover {
1164  background: var(--cream);
1165  border-color: var(--gold);
1166  color: var(--berry);
1167}
1168
1169.reply-btn {
1170  font-family: 'Marcellus', serif;
1171  font-size: 11px;
1172  letter-spacing: 1.5px;
1173  color: var(--plum-deep);
1174  font-weight: 600;
1175  text-transform: uppercase;
1176  cursor: pointer;
1177  background: none;
1178  border: none;
1179  padding: 6px 0;
1180  margin-left: 16px;
1181  transition: color 0.3s;
1182  opacity: 0.85;
1183}
1184.reply-btn:hover { color: var(--berry); opacity: 1; }
1185
1186.reflections-bar {
1187  display: flex;
1188  align-items: center;
1189}
1190
1191.reflections-list {
1192  margin-top: 14px;
1193}
1194
1195.reflection-card {
1196  background: var(--cream-warm);
1197  border-radius: 10px;
1198  border: 1px solid rgba(197, 165, 90, 0.12);
1199  padding: 18px 20px 14px;
1200  margin-bottom: 10px;
1201  animation: fadeInUp 0.4s ease;
1202}
1203
1204.reflection-body {
1205  font-family: 'Lora', serif;
1206  font-size: 13px;
1207  line-height: 1.75;
1208  color: var(--charcoal);
1209  opacity: 0.85;
1210  margin-bottom: 10px;
1211  white-space: pre-wrap;
1212}
1213
1214.reflection-meta {
1215  display: flex;
1216  justify-content: space-between;
1217  align-items: center;
1218}
1219
1220.reflection-author {
1221  font-family: 'Cormorant Garamond', serif;
1222  font-style: italic;
1223  font-size: 14px;
1224  color: var(--plum);
1225}
1226
1227.reflection-date {
1228  font-family: 'Marcellus', serif;
1229  font-size: 8px;
1230  letter-spacing: 1px;
1231  color: var(--charcoal);
1232  opacity: 0.35;
1233}
1234
1235.reflection-composer {
1236  margin-top: 14px;
1237}
1238
1239.reflection-textarea {
1240  width: 100%;
1241  min-height: 70px;
1242  padding: 12px;
1243  border: 1px solid rgba(197, 165, 90, 0.25);
1244  border-radius: 8px;
1245  background: white;
1246  font-family: 'Lora', serif;
1247  font-size: 12px;
1248  line-height: 1.65;
1249  color: var(--charcoal);
1250  outline: none;
1251  resize: vertical;
1252  transition: border-color 0.3s;
1253}
1254
1255.reflection-textarea:focus { border-color: var(--gold); }
1256.reflection-textarea::placeholder { color: #bbb; }
1257
1258.reflection-submit {
1259  margin-top: 8px;
1260  padding: 8px 20px;
1261  background: var(--cream-warm);
1262  color: var(--plum);
1263  border: 1px solid var(--gold-light);
1264  border-radius: 6px;
1265  font-family: 'Marcellus', serif;
1266  font-size: 9px;
1267  letter-spacing: 2px;
1268  text-transform: uppercase;
1269  cursor: pointer;
1270  transition: all 0.3s;
1271}
1272
1273.reflection-submit:hover {
1274  background: var(--gold);
1275  color: white;
1276  border-color: var(--gold);
1277}
1278

1279/* Diamond divider */
1280.feed-divider {
1281  display: flex;
1282  align-items: center;
1283  justify-content: center;
1284  gap: 14px;
1285  padding: 4px 0 24px;
1286  max-width: 200px;
1287  margin: 0 auto;
1288}
1289
1290.feed-divider::before,
1291.feed-divider::after {
1292  content: '';
1293  flex: 1;
1294  height: 1px;
1295  background: var(--gold-light);
1296}
1297
1298.feed-divider span { color: var(--gold); font-size: 8px; }
1299
1300/* ============================================
1301   ABOUT VIEW
1302   ============================================ */
1303.pillar-card {
1304  background: white;
1305  border-radius: 14px;
1306  border: 1px solid rgba(197, 165, 90, 0.2);
1307  padding: 36px 32px 32px;
1308  margin-bottom: 20px;
1309}
1310
1311.pillar-number {
1312  font-family: 'Marcellus', serif;
1313  font-size: 9px;
1314  letter-spacing: 3px;
1315  color: var(--gold);
1316  text-transform: uppercase;
1317  margin-bottom: 8px;
1318}
1319
1320.pillar-title {
1321  font-family: 'Cormorant Garamond', serif;
1322  font-size: 22px;
1323  color: var(--plum-deep);
1324  font-weight: 400;
1325  margin-bottom: 14px;
1326}
1327
1328.pillar-body {
1329  font-family: 'Lora', serif;
1330  font-size: 13px;
1331  line-height: 1.75;
1332  color: var(--charcoal);
1333  opacity: 0.85;
1334  margin-bottom: 14px;
1335}
1336
1337.pillar-movement {
1338  font-family: 'Cormorant Garamond', serif;
1339  font-style: italic;
1340  font-size: 14px;
1341  color: var(--berry);
1342  padding-top: 10px;
1343  border-top: 1px solid rgba(197, 165, 90, 0.15);
1344}
1345
1346.about-welcome {
1347  font-family: 'Cormorant Garamond', serif;
1348  font-style: italic;
1349  font-size: 18px;
1350  line-height: 1.7;
1351  color: var(--plum);
1352  text-align: center;
1353  margin-bottom: 32px;
1354}
1355
1356.about-divider {
1357  display: flex;
1358  align-items: center;
1359  justify-content: center;
1360  gap: 14px;
1361  padding: 10px 0 30px;
1362  max-width: 300px;
1363  margin: 0 auto;
1364}
1365
1366.about-divider::before,
1367.about-divider::after {
1368  content: '';
1369  flex: 1;
1370  height: 1px;
1371  background: var(--gold-light);
1372}
1373
1374.about-divider span { color: var(--gold); font-size: 10px; }
1375
1376/* Structure card */
1377.structure-card {
1378  background: white;
1379  border-radius: 14px;
1380  border: 1px solid rgba(197, 165, 90, 0.2);
1381  padding: 40px 32px;
1382  text-align: center;
1383  margin-bottom: 20px;
1384}
1385
1386.structure-heading {
1387  font-family: 'Marcellus', serif;
1388  font-size: 10px;
1389  letter-spacing: 4px;
1390  color: var(--gold);
1391  text-transform: uppercase;
1392  margin-bottom: 6px;
1393}
1394
1395.structure-title {
1396  font-family: 'Cormorant Garamond', serif;
1397  font-size: 24px;
1398  color: var(--plum-deep);
1399  font-weight: 400;
1400  margin-bottom: 20px;
1401}
1402
1403.structure-item {
1404  display: flex;
1405  gap: 14px;
1406  margin-bottom: 20px;
1407  align-items: flex-start;
1408  text-align: left;
1409  max-width: 520px;
1410  margin-left: auto;
1411  margin-right: auto;
1412}
1413
1414.structure-icon {
1415  color: var(--gold);
1416  font-size: 14px;
1417  margin-top: 2px;
1418  flex-shrink: 0;
1419}
1420
1421.structure-item-title {
1422  font-family: 'Cormorant Garamond', serif;
1423  font-size: 17px;
1424  color: var(--plum-deep);
1425  margin-bottom: 4px;
1426}
1427
1428.structure-item-text {
1429  font-family: 'Lora', serif;
1430  font-size: 12px;
1431  line-height: 1.65;
1432  color: var(--charcoal);
1433  opacity: 0.8;
1434}
1435
1436/* Leadership card */
1437.leadership-card {
1438  background: var(--plum-deep);
1439  border-radius: 14px;
1440  padding: 44px 36px;
1441  position: relative;
1442  overflow: hidden;
1443  margin-bottom: 20px;
1444}
1445
1446.leadership-card::before {
1447  content: '';
1448  position: absolute;
1449  top: 0; left: 0; right: 0;
1450  height: 3px;
1451  background: var(--gold);
1452}
1453
1454.leadership-eyebrow {
1455  font-family: 'Marcellus', serif;
1456  font-size: 9px;
1457  letter-spacing: 4px;
1458  color: var(--gold);
1459  text-transform: uppercase;
1460  margin-bottom: 10px;
1461  text-align: center;
1462}
1463
1464.leadership-title {
1465  font-family: 'Cormorant Garamond', serif;
1466  font-size: 24px;
1467  color: white;
1468  font-weight: 400;
1469  text-align: center;
1470  margin-bottom: 20px;
1471}
1472
1473.leadership-body {
1474  font-family: 'Lora', serif;
1475  font-size: 13px;
1476  line-height: 1.8;
1477  color: rgba(255,255,255,0.85);
1478  margin-bottom: 16px;
1479}
1480
1481.leadership-emphasis {
1482  font-family: 'Cormorant Garamond', serif;
1483  font-style: italic;
1484  font-size: 15px;
1485  line-height: 1.7;
1486  color: var(--gold-light);
1487  text-align: center;
1488  padding-top: 16px;
1489  border-top: 1px solid rgba(197, 165, 90, 0.25);
1490}
1491
1492/* ============================================
1493   JOURNAL VIEW
1494   ============================================ */
1495/* Thoughtful Inquiries card */
1496.inquiry-banner {
1497  background: white;
1498  border-radius: 14px;
1499  border: 1px solid rgba(197, 165, 90, 0.25);
1500  margin-bottom: 24px;
1501  overflow: hidden;
1502  box-shadow: 0 2px 16px rgba(139, 34, 82, 0.04);
1503}
1504.inquiry-banner-header {
1505  display: flex;
1506  align-items: center;
1507  justify-content: space-between;
1508  padding: 20px 24px;
1509  cursor: pointer;
1510  transition: background 0.2s;
1511  border-left: 4px solid var(--berry);
1512}
1513.inquiry-banner-header:hover { background: var(--cream-warm); }
1514.inquiry-banner-title {
1515  font-family: 'Cormorant Garamond', serif;
1516  font-size: 20px;
1517  color: var(--berry);
1518  font-weight: 600;
1519}
1520.inquiry-banner-subtitle {
1521  font-family: 'Lora', serif;
1522  font-size: 11px;
1523  color: var(--charcoal);
1524  opacity: 0.6;
1525  margin-top: 2px;
1526}
1527.inquiry-banner-arrow {
1528  font-size: 16px;
1529  color: var(--gold);
1530  transition: transform 0.3s;
1531}
1532.inquiry-banner.open .inquiry-banner-arrow { transform: rotate(180deg); }
1533.inquiry-banner-body {
1534  display: none;
1535  padding: 0 28px 28px;
1536  border-top: 1px solid rgba(197, 165, 90, 0.12);
1537}
1538.inquiry-banner.open .inquiry-banner-body { display: block; }
1539.inquiry-intro {
1540  font-family: 'Cormorant Garamond', serif;
1541  font-style: italic;
1542  font-size: 16px;
1543  line-height: 1.7;
1544  color: var(--plum);
1545  text-align: center;
1546  padding: 24px 10px 20px;
1547}
1548.inquiry-section {
1549  margin-bottom: 24px;
1550}
1551.inquiry-section-num {
1552  font-family: 'Marcellus', serif;
1553  font-size: 9px;
1554  letter-spacing: 3px;
1555  text-transform: uppercase;
1556  color: var(--gold);
1557  margin-bottom: 8px;
1558}
1559.inquiry-section-q {
1560  font-family: 'Cormorant Garamond', serif;
1561  font-size: 19px;
1562  line-height: 1.5;
1563  color: var(--berry);
1564  font-weight: 600;
1565  margin-bottom: 14px;
1566}
1567.inquiry-cat-title {
1568  font-family: 'Marcellus', serif;
1569  font-size: 10px;
1570  letter-spacing: 2px;
1571  text-transform: uppercase;
1572  color: var(--berry);
1573  font-weight: 700;
1574  margin: 16px 0 8px;
1575}
1576.inquiry-input {
1577  width: 100%;
1578  border: none;
1579  border-bottom: 1px solid rgba(197, 165, 90, 0.3);
1580  background: transparent;
1581  font-family: 'Lora', serif;
1582  font-size: 13px;
1583  color: var(--charcoal);
1584  padding: 8px 4px;
1585  margin-bottom: 6px;
1586  outline: none;
1587  transition: border-color 0.2s;
1588}
1589.inquiry-input:focus { border-bottom-color: var(--berry); }
1590.inquiry-input::placeholder { color: var(--gold-light); font-style: italic; }
1591.inquiry-line-label {
1592  font-family: 'Marcellus', serif;
1593  font-size: 10px;
1594  color: var(--gold);
1595  margin-right: 8px;
1596  flex-shrink: 0;
1597}
1598.inquiry-line-row {
1599  display: flex;
1600  align-items: flex-end;
1601  gap: 4px;
1602}
1603.inquiry-save-row {
1604  display: flex;
1605  align-items: center;
1606  justify-content: space-between;
1607  margin-top: 20px;
1608  padding-top: 16px;
1609  border-top: 1px solid rgba(197, 165, 90, 0.12);
1610}
1611.inquiry-save-btn {
1612  font-family: 'Marcellus', serif;
1613  font-size: 10px;
1614  letter-spacing: 2px;
1615  text-transform: uppercase;
1616  color: var(--gold);
1617  background: var(--berry);
1618  border: 1.5px solid var(--gold);
1619  border-radius: 8px;
1620  padding: 10px 24px;
1621  cursor: pointer;
1622  transition: all 0.3s;
1623}
1624.inquiry-save-btn:hover { background: var(--plum-deep); }
1625.inquiry-saved-msg {

1626  font-family: 'Lora', serif;
1627  font-size: 11px;
1628  font-style: italic;
1629  color: var(--gold);
1630  opacity: 0;
1631  transition: opacity 0.3s;
1632}
1633.inquiry-saved-msg.show { opacity: 1; }
1634.inquiry-divider {
1635  display: flex;
1636  align-items: center;
1637  justify-content: center;
1638  gap: 10px;
1639  padding: 8px 0 16px;
1640  max-width: 200px;
1641  margin: 0 auto;
1642}
1643.inquiry-divider::before, .inquiry-divider::after {
1644  content: '';
1645  flex: 1;
1646  height: 1px;
1647  background: var(--gold-light);
1648}
1649.inquiry-divider span { color: var(--gold); font-size: 8px; }
1650
1651.journal-prompt-card {
1652  background: white;
1653  border-radius: 14px;
1654  border: 1px solid rgba(197, 165, 90, 0.2);
1655  border-left: 4px solid var(--gold);
1656  padding: 28px 28px 24px;
1657  margin-bottom: 20px;
1658}
1659
1660.journal-prompt-label {
1661  font-family: 'Marcellus', serif;
1662  font-size: 9px;
1663  letter-spacing: 3px;
1664  color: var(--gold);
1665  text-transform: uppercase;
1666  margin-bottom: 10px;
1667}
1668
1669.journal-prompt-text {
1670  font-family: 'Cormorant Garamond', serif;
1671  font-style: italic;
1672  font-size: 18px;
1673  color: var(--plum);
1674  line-height: 1.6;
1675}
1676
1677.journal-entry-card {
1678  background: var(--cream-warm);
1679  border-radius: 10px;
1680  border: 1px solid rgba(197, 165, 90, 0.12);
1681  padding: 22px 24px;
1682  margin-bottom: 14px;
1683  cursor: pointer;
1684  transition: border-color 0.3s, box-shadow 0.3s;
1685}
1686.journal-entry-card:hover {
1687  border-color: rgba(197, 165, 90, 0.35);
1688  box-shadow: 0 2px 12px rgba(197, 165, 90, 0.08);
1689}
1690.journal-entry-card.expanded {
1691  cursor: default;
1692  border-color: var(--gold-light);
1693}
1694
1695.journal-entry-date {
1696  font-family: 'Marcellus', serif;
1697  font-size: 9px;
1698  letter-spacing: 2px;
1699  color: var(--berry);
1700  text-transform: uppercase;
1701  margin-bottom: 8px;
1702}
1703
1704.journal-entry-body {
1705  font-family: 'Lora', serif;
1706  font-size: 13px;
1707  line-height: 1.75;
1708  color: var(--charcoal);
1709  opacity: 0.85;
1710  white-space: pre-wrap;
1711}
1712.journal-entry-body.truncated {
1713  display: -webkit-box;
1714  -webkit-line-clamp: 2;
1715  -webkit-box-orient: vertical;
1716  overflow: hidden;
1717}
1718.journal-entry-actions {
1719  display: none;
1720  margin-top: 14px;
1721  padding-top: 12px;
1722  border-top: 1px solid rgba(197, 165, 90, 0.15);
1723  gap: 8px;
1724}
1725.journal-entry-card.expanded .journal-entry-actions {
1726  display: flex;
1727}
1728.journal-entry-card.expanded .journal-entry-body.truncated {
1729  display: block;
1730  -webkit-line-clamp: unset;
1731  overflow: visible;
1732}
1733.journal-entry-action-btn {
1734  padding: 5px 14px;
1735  border-radius: 16px;
1736  font-family: 'Marcellus', serif;
1737  font-size: 9px;
1738  letter-spacing: 1.5px;
1739  text-transform: uppercase;
1740  cursor: pointer;
1741  border: 1px solid;
1742  transition: all 0.3s;
1743}
1744.journal-entry-action-btn.edit-btn {
1745  background: none;
1746  border-color: var(--gold);
1747  color: var(--gold);
1748}
1749.journal-entry-action-btn.edit-btn:hover {
1750  background: var(--gold);
1751  color: white;
1752}
1753.journal-entry-action-btn.delete-btn {
1754  background: none;
1755  border-color: rgba(148, 14, 75, 0.3);
1756  color: var(--berry);
1757}
1758.journal-entry-action-btn.delete-btn:hover {
1759  background: var(--berry);
1760  color: white;
1761}
1762.journal-entry-action-btn.vis-btn {
1763  background: none;
1764  border-color: rgba(148, 14, 75, 0.2);
1765  color: var(--plum);
1766}
1767.journal-entry-action-btn.vis-btn:hover {
1768  background: var(--plum);
1769  color: white;
1770}
1771.journal-entry-collapse-hint {
1772  display: none;
1773  margin-top: 10px;
1774  font-family: 'Marcellus', serif;
1775  font-size: 8px;
1776  letter-spacing: 1.5px;
1777  text-transform: uppercase;
1778  color: var(--gold);
1779  text-align: right;
1780}
1781.journal-entry-card.expanded .journal-entry-collapse-hint {
1782  display: block;
1783}
1784
1785/* Journal thread (reactions + replies) */
1786.journal-thread {
1787  display: none;
1788  margin-top: 14px;
1789  padding-top: 14px;
1790  border-top: 1px solid rgba(197, 165, 90, 0.18);
1791}
1792.journal-entry-card.expanded .journal-thread {
1793  display: block;
1794}
1795
1796.j-reactions-row {
1797  display: flex;
1798  flex-wrap: wrap;
1799  gap: 6px;
1800  align-items: center;
1801  margin-bottom: 12px;
1802}
1803.j-reaction-chip {
1804  display: inline-flex;
1805  align-items: center;
1806  gap: 4px;
1807  padding: 3px 9px;
1808  background: rgba(197, 165, 90, 0.1);
1809  border: 1px solid rgba(197, 165, 90, 0.25);
1810  border-radius: 14px;
1811  font-size: 13px;
1812  cursor: pointer;
1813  transition: all 0.2s;
1814}
1815.j-reaction-chip:hover {
1816  background: rgba(197, 165, 90, 0.2);
1817}
1818.j-reaction-chip.mine {
1819  background: rgba(148, 14, 75, 0.12);
1820  border-color: rgba(148, 14, 75, 0.4);
1821}
1822.j-reaction-count {
1823  font-family: 'Marcellus', serif;
1824  font-size: 9px;
1825  color: var(--berry);
1826  letter-spacing: 1px;
1827}
1828.j-emoji-picker {
1829  display: inline-flex;
1830  gap: 2px;
1831  padding: 2px 4px;
1832  background: white;
1833  border: 1px solid rgba(197, 165, 90, 0.3);
1834  border-radius: 14px;
1835}
1836.j-emoji-btn {
1837  background: none;
1838  border: none;
1839  padding: 3px 6px;
1840  font-size: 14px;
1841  cursor: pointer;
1842  border-radius: 10px;
1843  transition: all 0.2s;
1844}
1845.j-emoji-btn:hover {
1846  background: rgba(197, 165, 90, 0.15);
1847  transform: scale(1.2);
1848}
1849
1850.j-replies-list {
1851  margin: 12px 0;
1852}
1853.j-reply {
1854  background: white;
1855  border-radius: 8px;
1856  padding: 12px 14px;
1857  margin-bottom: 8px;
1858  border-left: 2px solid var(--gold);
1859}
1860.j-reply-author {
1861  font-family: 'Marcellus', serif;
1862  font-size: 9px;
1863  letter-spacing: 1.5px;
1864  color: var(--berry);
1865  text-transform: uppercase;
1866  margin-bottom: 4px;
1867}
1868.j-reply-body {
1869  font-family: 'Lora', serif;
1870  font-size: 12.5px;
1871  line-height: 1.65;
1872  color: var(--charcoal);
1873  opacity: 0.9;
1874  white-space: pre-wrap;
1875}
1876.j-reply-date {
1877  font-family: 'Marcellus', serif;
1878  font-size: 8px;
1879  letter-spacing: 1px;
1880  color: var(--gold);
1881  margin-top: 6px;
1882  opacity: 0.7;
1883}
1884.j-reply-delete {
1885  background: none;
1886  border: none;
1887  color: var(--berry);
1888  opacity: 0.4;
1889  font-size: 12px;
1890  cursor: pointer;
1891  float: right;
1892  padding: 0 4px;
1893}
1894.j-reply-delete:hover {
1895  opacity: 1;
1896}
1897
1898.j-reply-form {
1899  display: flex;
1900  gap: 8px;
1901  margin-top: 10px;
1902}
1903.j-reply-input {
1904  flex: 1;
1905  padding: 8px 12px;
1906  border: 1px solid rgba(197, 165, 90, 0.3);
1907  border-radius: 18px;
1908  background: white;
1909  font-family: 'Lora', serif;
1910  font-size: 12.5px;
1911  color: var(--charcoal);
1912  outline: none;
1913  transition: border-color 0.3s;
1914}
1915.j-reply-input:focus { border-color: var(--gold); }
1916.j-reply-send {
1917  padding: 6px 16px;
1918  background: var(--plum);
1919  color: var(--gold);
1920  border: none;
1921  border-radius: 18px;
1922  font-family: 'Marcellus', serif;
1923  font-size: 9px;
1924  letter-spacing: 1.5px;
1925  text-transform: uppercase;
1926  cursor: pointer;
1927  transition: all 0.3s;
1928}
1929.j-reply-send:hover { background: var(--plum-deep); }
1930
1931.journal-compose {
1932  background: white;
1933  border-radius: 14px;
1934  border: 1px solid rgba(197, 165, 90, 0.25);
1935  padding: 24px;
1936  margin-bottom: 24px;
1937}
1938
1939.journal-compose-label {
1940  font-family: 'Marcellus', serif;
1941  font-size: 9px;
1942  letter-spacing: 3px;
1943  color: var(--gold);
1944  text-transform: uppercase;
1945  margin-bottom: 12px;
1946}
1947
1948.journal-textarea {
1949  width: 100%;
1950  min-height: 140px;
1951  padding: 14px;
1952  border: 1px solid rgba(197, 165, 90, 0.3);
1953  border-radius: 6px;
1954  background: var(--cream);
1955  font-family: 'Lora', serif;
1956  font-size: 13px;
1957  line-height: 1.75;
1958  color: var(--charcoal);
1959  outline: none;
1960  resize: vertical;
1961  transition: border-color 0.3s;
1962}
1963
1964.journal-textarea:focus { border-color: var(--gold); }
1965
1966.journal-visibility-toggle {
1967  display: flex;
1968  gap: 4px;
1969}
1970.journal-vis-btn {
1971  padding: 5px 12px;
1972  background: none;
1973  border: 1px solid rgba(197, 165, 90, 0.25);
1974  border-radius: 16px;
1975  font-family: 'Marcellus', serif;
1976  font-size: 9px;
1977  letter-spacing: 1px;
1978  text-transform: uppercase;
1979  color: var(--plum-light);
1980  cursor: pointer;
1981  transition: all 0.3s;
1982}
1983.journal-vis-btn:hover { border-color: var(--gold); }
1984.journal-vis-btn.active {
1985  background: var(--gold);
1986  border-color: var(--gold);
1987  color: white;
1988}

1989.journal-entry-visibility {
1990  font-family: 'Marcellus', serif;
1991  font-size: 8px;
1992  letter-spacing: 1.5px;
1993  text-transform: uppercase;
1994  padding: 2px 8px;
1995  border-radius: 10px;
1996  display: inline-block;
1997  margin-left: 8px;
1998}
1999.journal-entry-visibility.private {
2000  background: rgba(197, 165, 90, 0.12);
2001  color: var(--gold);
2002}
2003.journal-entry-visibility.public {
2004  background: rgba(148, 14, 75, 0.1);
2005  color: var(--berry);
2006}
2007
2008.journal-save {
2009  margin-top: 10px;
2010  padding: 10px 24px;
2011  background: var(--plum);
2012  color: var(--gold);
2013  border: none;
2014  border-radius: 8px;
2015  font-family: 'Marcellus', serif;
2016  font-size: 10px;
2017  letter-spacing: 2px;
2018  text-transform: uppercase;
2019  cursor: pointer;
2020  transition: all 0.3s;
2021}
2022
2023.journal-save:hover {
2024  background: var(--plum-deep);
2025}
2026
2027.journal-save-draft {
2028  background: white;
2029  color: var(--plum);
2030  border: 1px solid var(--gold);
2031}
2032.journal-save-draft:hover {
2033  background: var(--cream-warm);
2034  color: var(--berry);
2035}
2036
2037/* Draft badge on entry cards */
2038.journal-draft-badge {
2039  display: inline-block;
2040  font-family: 'Marcellus', serif;
2041  font-size: 8px;
2042  letter-spacing: 1.5px;
2043  text-transform: uppercase;
2044  padding: 2px 8px;
2045  border-radius: 10px;
2046  background: rgba(197, 165, 90, 0.15);
2047  border: 1px dashed var(--gold);
2048  color: var(--plum);
2049  margin-left: 8px;
2050}
2051
2052/* Bookmark / favorite button (used in library) */
2053.bookmark-btn {
2054  background: none;
2055  border: none;
2056  cursor: pointer;
2057  font-size: 22px;
2058  color: var(--gold-light);
2059  padding: 4px 8px;
2060  transition: all 0.2s;
2061}
2062.bookmark-btn:hover {
2063  color: var(--berry);
2064  transform: scale(1.15);
2065}
2066.bookmark-btn.bookmarked {
2067  color: var(--berry);
2068}
2069
2070/* ============================================
2071   MEDIA UPLOAD & EDIT
2072   ============================================ */
2073.composer-media-row {
2074  display: flex;
2075  align-items: center;
2076  gap: 8px;
2077  margin-top: 8px;
2078}
2079.media-upload-btn {
2080  display: inline-flex;
2081  align-items: center;
2082  gap: 5px;
2083  padding: 6px 14px;
2084  background: none;
2085  border: 1px solid rgba(197, 165, 90, 0.3);
2086  border-radius: 6px;
2087  font-family: 'Marcellus', serif;
2088  font-size: 9px;
2089  letter-spacing: 1.5px;
2090  text-transform: uppercase;
2091  color: var(--plum-light);
2092  cursor: pointer;
2093  transition: all 0.3s;
2094}
2095.media-upload-btn:hover { border-color: var(--gold); color: var(--plum); }
2096.media-upload-btn .upload-icon { font-size: 14px; }
2097.media-preview {
2098  margin-top: 10px;
2099  position: relative;
2100  display: inline-block;
2101}
2102.media-preview img, .media-preview video {
2103  max-width: 100%;
2104  max-height: 200px;
2105  border-radius: 8px;
2106  border: 1px solid rgba(197, 165, 90, 0.2);
2107}
2108.media-preview-remove {
2109  position: absolute;
2110  top: 4px;
2111  right: 4px;
2112  background: rgba(0,0,0,0.6);
2113  color: white;
2114  border: none;
2115  border-radius: 50%;
2116  width: 24px;
2117  height: 24px;
2118  font-size: 14px;
2119  cursor: pointer;
2120  display: flex;
2121  align-items: center;
2122  justify-content: center;
2123}
2124.post-media {
2125  margin: 12px 0;
2126  border-radius: 10px;
2127  overflow: hidden;
2128  max-width: 440px;
2129  display: flex;
2130  justify-content: center;
2131  background: #000;
2132}
2133.post-media img {
2134  max-width: 100%;
2135  max-height: 420px;
2136  width: auto;
2137  border-radius: 10px;
2138  cursor: pointer;
2139  object-fit: contain;
2140}
2141.post-media video {
2142  max-width: 100%;
2143  max-height: 420px;
2144  width: auto;
2145  border-radius: 10px;
2146  object-fit: contain;
2147}
2148@media (max-width: 600px) {
2149  .post-media { max-width: 100%; }
2150  .post-media img,
2151  .post-media video { max-height: 320px; }
2152}
2153.post-edit-btn {
2154  background: none;
2155  border: none;
2156  color: var(--plum-light);
2157  font-family: 'Marcellus', serif;
2158  font-size: 9px;
2159  letter-spacing: 1px;
2160  text-transform: uppercase;
2161  cursor: pointer;
2162  opacity: 0.7;
2163  transition: opacity 0.2s;
2164  padding: 2px 6px;
2165}
2166.post-edit-btn:hover { opacity: 1; color: var(--plum); }
2167.post-hide-btn {
2168  background: none;
2169  border: none;
2170  color: var(--plum-light);
2171  font-family: 'Marcellus', serif;
2172  font-size: 9px;
2173  letter-spacing: 1px;
2174  text-transform: uppercase;
2175  cursor: pointer;
2176  opacity: 0.7;
2177  transition: opacity 0.2s;
2178  padding: 2px 6px;
2179}
2180.post-hide-btn:hover { opacity: 1; color: var(--plum); }
2181
2182.edit-overlay {
2183  position: fixed;
2184  top: 0; left: 0; right: 0; bottom: 0;
2185  background: rgba(0,0,0,0.5);
2186  display: flex;
2187  align-items: center;
2188  justify-content: center;
2189  z-index: 1000;
2190}
2191
2192/* Toast notifications */
2193.fr-toast-container {
2194  position: fixed;
2195  bottom: 24px;
2196  left: 50%;
2197  transform: translateX(-50%);
2198  z-index: 2000;
2199  display: flex;
2200  flex-direction: column;
2201  gap: 10px;
2202  pointer-events: none;
2203  width: calc(100% - 40px);
2204  max-width: 420px;
2205  align-items: center;
2206}
2207.fr-toast {
2208  background: var(--plum);
2209  color: var(--gold);
2210  padding: 14px 22px;
2211  border-radius: 10px;
2212  font-family: 'Lora', serif;
2213  font-size: 13px;
2214  line-height: 1.5;
2215  box-shadow: 0 6px 24px rgba(107, 26, 66, 0.35);
2216  border: 1px solid var(--gold-light);
2217  opacity: 0;
2218  transform: translateY(10px);
2219  transition: opacity 0.3s, transform 0.3s;
2220  pointer-events: auto;
2221  text-align: center;
2222  max-width: 100%;
2223}
2224.fr-toast.show { opacity: 1; transform: translateY(0); }
2225.fr-toast.error { background: var(--berry); }
2226.fr-toast.success { background: var(--plum); }
2227
2228/* Loading state for buttons */
2229button.is-loading {
2230  opacity: 0.7;
2231  cursor: wait;
2232  position: relative;
2233}
2234button.is-loading::after {

2235  content: '';
2236  display: inline-block;
2237  width: 8px;
2238  height: 8px;
2239  margin-left: 6px;
2240  border-radius: 50%;
2241  background: currentColor;
2242  animation: frPulse 0.9s ease-in-out infinite;
2243  vertical-align: middle;
2244}
2245@keyframes frPulse {
2246  0%, 100% { opacity: 0.3; transform: scale(0.8); }
2247  50% { opacity: 1; transform: scale(1.2); }
2248}
2249.edit-modal {
2250  background: var(--cream);
2251  border-radius: 14px;
2252  border: 2px solid var(--gold-pale);
2253  padding: 28px;
2254  width: 90%;
2255  max-width: 500px;
2256  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
2257}
2258.edit-modal-title {
2259  font-family: 'Marcellus', serif;
2260  font-size: 9px;
2261  letter-spacing: 3px;
2262  text-transform: uppercase;
2263  color: var(--gold);
2264  margin-bottom: 14px;
2265}
2266.edit-modal textarea {
2267  width: 100%;
2268  min-height: 120px;
2269  padding: 12px;
2270  border: 1px solid rgba(197, 165, 90, 0.3);
2271  border-radius: 6px;
2272  background: white;
2273  font-family: 'Lora', serif;
2274  font-size: 13px;
2275  line-height: 1.75;
2276  color: var(--charcoal);
2277  outline: none;
2278  resize: vertical;
2279}
2280.edit-modal textarea:focus { border-color: var(--gold); }
2281.edit-modal-actions {
2282  display: flex;
2283  justify-content: flex-end;
2284  gap: 10px;
2285  margin-top: 14px;
2286}
2287.edit-modal-cancel {
2288  padding: 8px 18px;
2289  background: none;
2290  border: 1px solid rgba(197, 165, 90, 0.3);
2291  border-radius: 6px;
2292  font-family: 'Marcellus', serif;
2293  font-size: 9px;
2294  letter-spacing: 1.5px;
2295  text-transform: uppercase;
2296  color: var(--plum-light);
2297  cursor: pointer;
2298}
2299.edit-modal-save {
2300  padding: 8px 18px;
2301  background: var(--plum);
2302  border: none;
2303  border-radius: 6px;
2304  font-family: 'Marcellus', serif;
2305  font-size: 9px;
2306  letter-spacing: 1.5px;
2307  text-transform: uppercase;
2308  color: var(--gold);
2309  cursor: pointer;
2310}
2311.edit-modal-save:hover { background: var(--plum-deep); }
2312
2313.comment-media-btn {
2314  background: none;
2315  border: none;
2316  font-size: 16px;
2317  cursor: pointer;
2318  padding: 4px;
2319  opacity: 0.5;
2320  transition: opacity 0.2s;
2321}
2322.comment-media-btn:hover { opacity: 1; }
2323
2324/* Emoji Picker */
2325.emoji-picker {
2326  position: absolute;
2327  bottom: 36px;
2328  left: 0;
2329  background: white;
2330  border: 1px solid rgba(197, 165, 90, 0.3);
2331  border-radius: 12px;
2332  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
2333  padding: 12px;
2334  width: 280px;
2335  max-height: 260px;
2336  overflow-y: auto;
2337  z-index: 100;
2338}
2339.emoji-picker-grid {
2340  display: grid;
2341  grid-template-columns: repeat(8, 1fr);
2342  gap: 2px;
2343}
2344.emoji-btn {
2345  background: none;
2346  border: none;
2347  font-size: 20px;
2348  cursor: pointer;
2349  padding: 4px;
2350  border-radius: 6px;
2351  transition: background 0.15s;
2352}
2353.emoji-btn:hover {
2354  background: rgba(197, 165, 90, 0.15);
2355}
2356.emoji-category-label {
2357  font-family: 'Marcellus', serif;
2358  font-size: 8px;
2359  letter-spacing: 2px;
2360  text-transform: uppercase;
2361  color: var(--gold);
2362  margin: 8px 0 4px;
2363}
2364.emoji-category-label:first-child { margin-top: 0; }
2365
2366/* ============================================
2367   FEED TOOLBAR (Filters + Search)
2368   ============================================ */
2369.feed-toolbar {
2370  display: flex;
2371  align-items: center;
2372  justify-content: space-between;
2373  gap: 12px;
2374  margin-bottom: 20px;
2375  flex-wrap: wrap;
2376}
2377
2378.feed-filters {
2379  display: flex;
2380  gap: 4px;
2381}
2382
2383.feed-filter-btn {
2384  padding: 7px 16px;
2385  background: none;
2386  border: 1px solid var(--gold);
2387  border-radius: 20px;
2388  font-family: 'Marcellus', serif;
2389  font-size: 11px;
2390  letter-spacing: 1.2px;
2391  text-transform: uppercase;
2392  color: var(--plum-deep);
2393  font-weight: 600;
2394  cursor: pointer;
2395  transition: all 0.3s;
2396}
2397.feed-filter-btn:hover {
2398  border-color: var(--gold);
2399  color: var(--berry);
2400  background: rgba(197, 165, 90, 0.08);
2401}
2402.feed-filter-btn.active {
2403  background: var(--gold);
2404  border-color: var(--gold);
2405  color: white;
2406}
2407
2408.feed-search {
2409  position: relative;
2410  min-width: 200px;
2411}
2412.feed-search-input {
2413  width: 100%;
2414  padding: 7px 14px 7px 32px;
2415  border: 1px solid rgba(197, 165, 90, 0.25);
2416  border-radius: 20px;
2417  background: white;
2418  font-family: 'Lora', serif;
2419  font-size: 12px;
2420  color: var(--charcoal);
2421  outline: none;
2422  transition: border-color 0.3s;
2423}
2424.feed-search-input:focus {
2425  border-color: var(--gold);
2426}
2427.feed-search-input::placeholder {
2428  color: #C0B8A8;
2429  font-style: italic;
2430}
2431.feed-search-icon {
2432  position: absolute;
2433  left: 11px;
2434  top: 50%;
2435  transform: translateY(-50%);
2436  font-size: 13px;
2437  color: var(--gold-light);
2438  pointer-events: none;
2439}
2440.feed-search-clear {
2441  position: absolute;
2442  right: 8px;
2443  top: 50%;
2444  transform: translateY(-50%);
2445  background: none;
2446  border: none;
2447  font-size: 14px;
2448  color: var(--plum-light);
2449  cursor: pointer;
2450  display: none;
2451  padding: 2px 4px;
2452}
2453.feed-search-clear.show { display: block; }
2454
2455@media (max-width: 600px) {
2456  .feed-toolbar { flex-direction: column; align-items: stretch; }
2457  .feed-search { min-width: unset; }
2458}
2459
2460/* ============================================
2461   REPLAYS / PLACEHOLDER VIEW
2462   ============================================ */
2463.placeholder-view {
2464  text-align: center;
2465  padding: 80px 30px;
2466}
2467
2468.placeholder-icon {
2469  font-size: 48px;
2470  color: var(--gold-light);
2471  margin-bottom: 20px;
2472}
2473
2474.placeholder-title {
2475  font-family: 'Cormorant Garamond', serif;
2476  font-size: 26px;
2477  color: var(--plum-deep);
2478  font-weight: 400;
2479  margin-bottom: 10px;
2480}
2481
2482.placeholder-text {
2483  font-family: 'Cormorant Garamond', serif;
2484  font-style: italic;
2485  font-size: 16px;
2486  color: var(--plum);
2487  opacity: 0.6;
2488}
2489
2490/* ============================================
2491   REPLAYS
2492   ============================================ */
2493.replay-upload {
2494  background: white;
2495  border-radius: 14px;
2496  border: 1px solid rgba(197, 165, 90, 0.25);
2497  padding: 24px;
2498  margin-bottom: 24px;
2499}
2500.replay-upload-label {
2501  font-family: 'Marcellus', serif;
2502  font-size: 9px;
2503  letter-spacing: 3px;
2504  color: var(--gold);
2505  text-transform: uppercase;
2506  margin-bottom: 12px;
2507}
2508.replay-card {
2509  background: var(--cream-warm);
2510  border-radius: 12px;
2511  border: 1px solid rgba(197, 165, 90, 0.12);
2512  padding: 24px;
2513  margin-bottom: 18px;
2514}
2515.replay-card-title {
2516  font-family: 'Cormorant Garamond', serif;
2517  font-size: 22px;
2518  color: var(--plum-deep);
2519  font-weight: 400;
2520  margin-bottom: 6px;
2521}
2522.replay-card-desc {
2523  font-family: 'Lora', serif;
2524  font-size: 13px;
2525  line-height: 1.6;
2526  color: var(--charcoal);
2527  opacity: 0.8;
2528  margin-bottom: 14px;
2529}
2530.replay-card-date {
2531  font-family: 'Marcellus', serif;
2532  font-size: 9px;
2533  letter-spacing: 2px;
2534  color: var(--berry);
2535  text-transform: uppercase;
2536  margin-bottom: 12px;
2537}
2538.replay-card video {
2539  max-width: 440px;
2540  width: 100%;
2541  max-height: 420px;
2542  border-radius: 10px;
2543  margin-top: 10px;
2544  display: block;
2545  background: #000;
2546  object-fit: contain;
2547}
2548@media (max-width: 600px) {
2549  .replay-card video {
2550    max-width: 100%;
2551    max-height: 320px;
2552  }
2553}
2554.replay-card-actions {
2555  display: flex;
2556  gap: 8px;
2557  margin-top: 12px;
2558  justify-content: flex-end;
2559}
2560.replay-delete-btn {
2561  padding: 4px 12px;
2562  border-radius: 14px;
2563  font-family: 'Marcellus', serif;
2564  font-size: 8px;
2565  letter-spacing: 1.5px;
2566  text-transform: uppercase;
2567  cursor: pointer;
2568  background: none;
2569  border: 1px solid rgba(148, 14, 75, 0.3);
2570  color: var(--berry);
2571  transition: all 0.3s;
2572}
2573.replay-delete-btn:hover {
2574  background: var(--berry);
2575  color: white;
2576}
2577
2578/* ============================================
2579   TOOLS & GUIDES
2580   ============================================ */
2581.tools-grid {
2582  display: flex;
2583  flex-direction: column;
2584  gap: 16px;
2585}
2586.tool-card {
2587  background: white;
2588  border-radius: 14px;
2589  border: 1px solid rgba(197, 165, 90, 0.2);
2590  overflow: hidden;
2591  cursor: pointer;
2592  transition: border-color 0.3s, box-shadow 0.3s;
2593}
2594.tool-card:hover {
2595  border-color: var(--gold-light);
2596  box-shadow: 0 2px 16px rgba(197, 165, 90, 0.1);
2597}
2598.tool-card-header {
2599  display: flex;
2600  align-items: center;
2601  justify-content: space-between;
2602  padding: 20px 24px;
2603}
2604.tool-card-header-left {
2605  display: flex;
2606  align-items: center;
2607  gap: 14px;
2608}
2609.tool-card-icon {
2610  font-size: 24px;
2611  color: var(--gold);
2612}
2613.tool-card-title {
2614  font-family: 'Cormorant Garamond', serif;
2615  font-size: 20px;
2616  color: var(--plum-deep);
2617  font-weight: 400;
2618}
2619.tool-card-subtitle {
2620  font-family: 'Lora', serif;
2621  font-size: 11px;
2622  color: var(--charcoal);
2623  opacity: 0.5;
2624  margin-top: 2px;
2625}
2626.tool-card-arrow {
2627  font-size: 16px;
2628  color: var(--gold-light);
2629  transition: transform 0.3s;
2630}
2631.tool-card.open .tool-card-arrow {
2632  transform: rotate(90deg);
2633}
2634.tool-card-content {
2635  display: none;
2636  padding: 0 24px 24px;
2637  border-top: 1px solid rgba(197, 165, 90, 0.1);
2638}
2639.tool-card.open .tool-card-content {
2640  display: block;
2641}
2642.guide-section {
2643  margin-top: 18px;
2644}
2645.guide-section-title {
2646  font-family: 'Marcellus', serif;
2647  font-size: 10px;
2648  letter-spacing: 2px;
2649  text-transform: uppercase;
2650  color: var(--berry);
2651  margin-bottom: 10px;
2652}
2653.guide-step {
2654  display: flex;
2655  gap: 12px;
2656  margin-bottom: 14px;
2657}
2658.guide-step-num {
2659  flex-shrink: 0;
2660  width: 26px;