/* Reading Panel & Archive Styles */
.page-header { margin-bottom: 60px; }
.page-header h1 { font-family: var(--sans); font-size: 1.2rem; font-weight: 600; color: var(--heading); margin-bottom: 12px; }
.page-header p { font-family: var(--sans); font-size: var(--ui-size); color: var(--nav); }

.archive-list { list-style: none; margin-top: 20px; }
.archive-list li { border-bottom: 1px solid var(--border); }
.archive-list li a {
    display: block; padding: 15px 0; color: var(--txt);
    text-decoration: none; font-size: 1.05rem; transition: all 0.2s; cursor: pointer;
}
.archive-list li a:hover { color: var(--heading); padding-left: 5px; }

#panel { position: fixed; top: 0; right: 0; height: 100%; width: 600px; max-width: 100vw; background-color: var(--panel-bg, #fff); color: var(--txt); z-index: 20; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; border-left: 1px solid var(--border); }

#panel.open { transform: translateX(0); }

.panel-head { padding: 20px 28px; border-bottom: 1px solid var(--border); display: flex; justify-content: flex-end; }
#btn-close { background: none; border: none; cursor: pointer; color: var(--nav); font-size: 1.5rem; }

.panel-body { flex: 1; overflow-y: auto; padding: 40px; }
#post-title { font-family: var(--serif); font-size: 1.75rem; font-weight: 700; color: var(--heading); margin-bottom: 25px; letter-spacing: -0.015em; line-height: 1.15; }
#post-content { font-size: var(--body-size); line-height: 1.7; }
#post-content p { margin-bottom: 1.2rem; }

.panel-foot { padding: 20px 30px; border-top: 1px solid var(--border); background-color: var(--panel-bg); display: flex; justify-content: space-between; font-size: var(--ui-size); }
.nav-links button, #btn-share { background: none; border: none; cursor: pointer; color: var(--nav); text-transform: uppercase; letter-spacing: 1px; }

#backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 10; backdrop-filter: blur(4px); }
#backdrop.open { display: block; }

/* Audio Indicator: Play Icon */
.archive-list li a.has-audio::after {
    content: "\25B8"; /* This is the Unicode for a solid Play triangle */
    font-size: 0.7rem;
    margin-right: 12px;
    color: var(--nav);
    vertical-align: middle;
    transition: color 0.2s;
    display: inline-block;
    transform: translateY(-1px); /* Perfect centering */
}

/* Change icon color on hover to match the heading */
.archive-list li a.has-audio:hover::after {
    color: var(--heading);
}

/* Optional: If you want it to look like a "tag" at the end instead of the start, 
   change ::before to ::after and move the margin-right to margin-left */