:root {
   /* Environment */
   --color-background: #f1f0ec; 
   --color-text: #2A251D;
   --color-text-muted: #6B635D;

   /* Interaction */
   --color-primary: #B35642;   
   --color-secondary: #6E8793;  
   --color-tertiary: #C0884D;   
   --font-settings: 'slnt' 0, 'MONO' 0;
}
/*keyframe*/
@keyframes fadeReveal {
    from {
        opacity: 0;
        filter: brightness(1.1) saturate(0.8);
    }
    to {
        opacity: 1;
        filter: brightness(1) saturate(1);
    }
}


/* Modern Firefox */
html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--color-secondary) var(--color-background);
}

/* Webkit browsers (Chrome, Safari, newer Edge) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-background);
}

::-webkit-scrollbar-thumb {
    background: var(--color-secondary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/**
* Core Styles & Typography
*/
body {
   background-color: var(--color-background);
   color: var(--color-text);
}

::selection {
    background: rgba(192, 136, 77, 0.2);
    color: var(--color-text);
}

[data-predefined-style="true"] bodycopy {
   font-family: "Monument Grotesk Variable", Icons;
   font-size: 1.2rem;
   font-weight: 400;
   line-height: 1.4;
   font-variation-settings: 'slnt' 0, 'MONO' 0;
}

[data-predefined-style="true"] bodycopy a {
    font-family: "Monument Grotesk Variable", Icons;
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
    font-variation-settings: 'slnt' 0, 'MONO' 0;
}

[data-predefined-style="true"] bodycopy a:hover {
    color: var(--color-primary);
}

a:focus-visible {
   outline: 2px solid var(--color-secondary);
   outline-offset: 2px;
   border-radius: 2px;
}

[data-predefined-style="true"] h1 {
   font-family: "Monument Grotesk Variable", Icons;
   font-style: normal;
   font-weight: 700;
   padding: 0;
   margin: 0;
   font-size: 1.7rem;
   line-height: 1.1;
   color: var(--color-text);
   font-variation-settings: 'slnt' 0, 'MONO' 0;
}

[data-predefined-style="true"] h2 {
   font-family: "Monument Grotesk Variable", Icons;
   font-style: normal;
   font-weight: 500;
   padding: 0;
   margin: 0;
   color: var(--color-text);
   font-size: 1.4rem;
   line-height: 1.3;
   letter-spacing: 0.01em;
   font-variation-settings: 'slnt' 0, 'MONO' 0;
}

[data-predefined-style="true"] small {
   display: inline-block;
   font-size: 1rem;
   line-height: 1.3;
   font-family: "Monument Grotesk Variable", Icons;
   font-style: normal;
   font-weight: 400;
   color: var(--color-text-muted);
   letter-spacing: 0.03em;
   font-variation-settings: 'slnt' 0, 'MONO' 0;
}

/**
* Basic Elements
*/
a:active {
   opacity: 0.7;
}

.page a.active {
   color: var(--color-tertiary);
}

i, em {
   font-style: italic;
}

b, strong {
   font-weight: 600;
}

img {
   border: 0;
   padding: 0;
}

ul, ol {
   margin: 0;
   padding: 0 0 0 1rem;
}

ol > li {
   padding-left: 0.75rem;
}

blockquote {
    padding: 2em 2.5em;
    margin: 2.5em 0;
    position: relative;
    background: rgba(110, 135, 147, 0.03);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

blockquote::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--color-secondary);
    transform: scaleY(0.95);
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

blockquote:hover {
    background: rgba(110, 135, 147, 0.05);
}

blockquote:hover::before {
    transform: scaleY(1);
}

hr {
    height: 1px;
    border: none;
    background: linear-gradient(
        90deg,
        transparent,
        var(--color-text) 50%,
        transparent
    );
    opacity: 0.15;
    position: relative;
    margin: 3.5em 0;
    transition: opacity 0.3s ease;
}

hr::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--color-secondary);
    transition: width 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

hr:hover::before {
    width: 40px;
}

/**
* Navigation
*/
.left-nav-desktop {
   font-family: "Monument Grotesk Variable", Icons;
   font-variation-settings: 'slnt' 0, 'MONO' 0;
}

.left-nav-desktop a {
    position: relative;
    padding: 0.4em 0.8em;
    margin: -0.4em -0.8em;
    border-radius: 3px;
    color: var(--color-secondary);
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.left-nav-desktop a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--color-secondary);
    transform: scaleX(0);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.left-nav-desktop a:hover {
    background: rgba(192, 136, 77, 0.07);
    color: var(--color-primary);

}

.left-nav-desktop a:hover::before {
    transform: scaleX(0.7);
    opacity: 1;
}
/**
* Content Layout & Images
*/
[data-css-preset] .page {
   background-color: initial /*!page_bgcolor*/;
}

[data-css-preset] .container {
   margin-left: auto /*!content_center*/;
   margin-right: auto /*!content_center*/;
   text-align: left /*!text_left*/;
}

[data-css-preset] .container_width {
   width: 70% /*!content_center*/;
}

[data-css-preset] .content_padding {
   padding: 1rem /*!main_margin*/;
}

[data-css-preset] text-limit {
   display: inline-block /*!text_width*/;
   max-width: 66rem/*!text_width*/;
}

/* Refined image treatment */
.content img {
    transition: filter 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    filter: saturate(98%);
}

.content img:hover {
    filter: saturate(102%);
  opacity: 0.92;
}

/**
* Mobile Adjustments
*/
@media screen and (max-width: 768px) {
   [data-css-preset] .container_width {
      width: 90%;
   }
   
   [data-css-preset] .content_padding {
      padding: 0.75rem;
   }
}

.mobile .page,
[data-css-preset].mobile .page {
   position: relative;
   min-height: 10px;
   max-width: 100%;
   width: 100%;
   background-color: transparent;
}


/**
* Essay Styles
*/
.essay {
   max-width: 66rem;
   width: 75%;
   margin: 0; /* Remove auto margins to prevent centering */
   padding: 1rem 0.5rem;
}

.essay-content {
   max-width: 46rem;
   margin: 0; /* Remove auto margins to ensure left alignment */
}

.essay-content a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-secondary);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    opacity: 0.85;
    transition: all 0.2s ease;
}

.essay-content a:hover {
    color: var(--color-primary);
    text-decoration-color: var(--color-primary);
    opacity: 1;
}

@media screen and (max-width: 768px) {
   .essay {
      width: 95%;
      padding: 1rem 0.375rem;
   }
}

.essay-header {
   margin-bottom: 1.5rem;
}

.essay-content p {
   margin-bottom: 0.75rem;
   line-height: 1.6;
}

.essay-footer {
   margin-top: 1.5rem;
   padding-top: 0.75rem;
   border-top: 1px solid rgba(26, 25, 24, 0.16);
}
.essay h1 {
    position: relative;
    display: inline-block;
}

/**
* Portfolio Status Indicators
*/
.acquired,
table a.acquired {
    color: var(--color-tertiary);
    font-style: italic;
}

.dead {
    color: var(--color-text-muted);
    font-style: italic;
}

/**table*/

table a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

table td.acquired,
table td.acquired a {
    color: var(--color-tertiary);
    opacity: 0.9;
}

tr.acquired {
    background: rgba(129, 180, 215, 0.04);
}


table a:hover {
    color: var(--color-primary);
}
/* Refined table aesthetics */
table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 2em 0;
}

td, th {
    padding: 0.8em;
    border-bottom: 1px solid rgba(26, 25, 24, 0.08);
    transition: background 0.2s ease;
}

tr:hover td {
    background: rgba(110, 135, 147, 0.04);
}

th {
    font-weight: 500;
    text-align: left;
    border-bottom-width: 2px;
}

/* Enhanced hr element */
hr {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--color-text) 20%,
        var(--color-text) 80%,
        transparent
    );
    opacity: 0.12;
    border: none;
    margin: 3rem 0;
}

.image-link {
    display: block;
    animation: fadeReveal 1.2s cubic-bezier(0.23, 1, 0.32, 1);
     transition: filter 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    filter: saturate(98%) sepia(0);
}

.image-link:hover img {
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    filter: saturate(102%) sepia(20%) hue-rotate(-15deg);

}

@media (prefers-reduced-motion: reduce) {
    .image-link {
        animation: none;
    }
}
/*reading progress*/

.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-tertiary)
    );
    transition: width 0.05s ease;
    z-index: 1000;
    opacity: 0.9;
}

/* Optional: make it slightly thicker on hover */
.reading-progress:hover {
    height: 3px;
    opacity: 1;
   background: linear-gradient(
        90deg,
        var(--color-tertiary),
        var(--color-primary)
    );
    transition: background 0.3s ease;
}

/*essay transition*/
.essay-content {
    animation: fadeIn 0.8s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*buttons*/
/* Add this to your existing CSS */
.filter-bar {
    display: flex;
    gap: 1.5rem;
    margin: 1.5rem 0;
    align-items: center;
}

.filter-btn {
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    margin: 0 -1rem;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    opacity: 0.7;
    font-family: "Monument Grotesk Variable", Icons;
    font-size: 1rem;
    font-variation-settings: var(--font-settings);
}

.filter-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    height: 1px;
    background: var(--color-secondary);
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    transform-origin: left center;
}

.filter-btn:hover {
    opacity: 0.85;
}

.filter-btn:hover::after {
    transform: scaleX(1);
}

.filter-btn.active {
    opacity: 1;
    color: var(--color-primary);
}

.filter-btn.active::after {
    transform: scaleX(1);
    background: var(--color-primary);
}

/* Animation for table rows */
tr {
    transition: opacity 0.3s ease;
}

tr.fade-out {
    opacity: 0;
}

tr.hidden {
    display: none;
}

/*hero image*/

.image-link img {
    transition: filter 1.2s cubic-bezier(0.23, 1, 0.32, 1);
    filter: grayscale(100%) saturate(0);
}

.image-link:hover img {
    filter: grayscale(0%) saturate(102%);
}

/*investment stats*/

/* Investment table styles */
.investment-stats {
  display: flex;
  gap: 2rem;
  margin: 2rem 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.stat-dot.active { background: var(--color-secondary); }
.stat-dot.acquired { background: var(--color-tertiary); }
.stat-dot.dead { background: var(--color-text-muted); }

/* Table row animations */
table tbody tr {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

table tbody tr.hidden {
  opacity: 0;
  transform: translateX(-10px);
  display: none;
}

/* Enhanced hover states */
table tbody tr:hover {
  background: rgba(108, 124, 107, 0.04);
}

/* Mobile responsive fixes */
@media screen and (max-width: 768px) {
  .filter-bar {
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
}