.subscribe-btn,
.btn-light,
.btn-dark,
.page-nav,
.error-btn,
.tier-action,
.submit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.875rem 1.375rem;
border: 1px solid var(--ink);
font: 700 0.625rem/1 var(--sans);
text-transform: uppercase;
letter-spacing: 0.2em;
border-radius: 0;
}
.subscribe-btn,
.submit-btn,
.error-btn {
background: var(--ink);
color: var(--paper);
}
.subscribe-btn:hover,
.submit-btn:hover,
.error-btn:hover {
background: transparent;
color: var(--ink);
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 0.875rem;
margin-top: 2.25rem;
}
.btn-light {
background: var(--paper);
color: var(--dark);
border-color: var(--paper);
}
.btn-light:hover {
background: transparent;
color: var(--paper);
}
.btn-dark {
background: transparent;
color: var(--paper);
border-color: rgba(255, 255, 255, 0.8);
}
.btn-dark:hover {
background: var(--paper);
color: var(--dark);
}
.submit-btn {
width: 100%;
padding: 1.125rem;
margin-top: 1rem;
cursor: pointer;
}
.story--book {
display: grid;
grid-template-columns: 6.5rem 1fr;
gap: 0.875rem;
align-items: start;
}
.story--book .story__cover-link {
display: block;
}
.story--book .story__cover {
margin: 0;
line-height: 0;
}
.story--book .story__cover img {
width: 100%;
display: block;
aspect-ratio: 2 / 3;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
filter: grayscale(100%) brightness(1.2) contrast(1.5);
}
.story--book .story__cover img:hover {
filter: none;
}
.story--book .story__body {
min-width: 0;
}
.story--book .story__body h3 {
font-size: 1.75rem;
line-height: 1.15;
margin-bottom: 0.25rem;
}
.story--book .story__book-author {
margin: 0 0 0.35rem;
font: 500 0.7rem/1 var(--sans);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.story--book .story__body p:not(.story__book-author) {
margin-top: 0.35rem;
-webkit-line-clamp: 3;
line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
html[data-theme="dark"] .story--book .story__cover img {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.toc {
border-left: 2px solid var(--line);
padding: 1rem 1.25rem;
margin: 1rem 0;
font-family: var(--sans);
font-size: 0.8125rem;
}
.toc__label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
opacity: 0.5;
margin: 0 0 0.5rem;
}
.toc ol, .toc ul { margin: 0; padding-left: 1rem; }
.toc li { margin: 0.25rem 0; line-height: 1.35; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc .toc__h3 { padding-left: 0.75rem; opacity: 0.75; }
.series-nav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.25rem 0; margin: 2.5rem 0; }
.series-nav__label { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.07em; text-transform: uppercase; margin: 0 0 0.75rem; opacity: 0.6; }
.series-nav__links { display: flex; justify-content: space-between; gap: 1rem; }
.series-nav__prev, .series-nav__next { display: flex; flex-direction: column; gap: 0.2rem; font-family: var(--sans); color: var(--ink); text-decoration: none; max-width: 48%; line-height: 1.35; }
.series-nav__prev:hover .series-nav__title, .series-nav__next:hover .series-nav__title { text-decoration: underline; }
.series-nav__part { font-size: 0.6875rem; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.55; }
.series-nav__title { font-size: 0.8125rem; }
#reading-progress {
position: fixed;
top: 0; left: 0;
width: calc(var(--progress, 0) * 100%);
height: 0.3rem;
background: var(--ink);
z-index: 9999;
pointer-events: none;
}
.author-bio { padding: 1.75rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 2.5rem; }
.author-bio__avatar { display: none; }
.author-bio__label { font-family: var(--sans); font-size: 0.5875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); opacity: 0.45; margin: 0 0 0.5rem; }
.author-bio__name { font-family: var(--sans); font-size: 0.9375rem; font-weight: 700; margin: 0 0 0.5rem; }
.author-bio__name a { color: var(--ink); text-decoration: none; }
.author-bio__name a:hover { text-decoration: underline; }
.author-bio__desc { font-size: 0.9rem; line-height: 1.65; margin: 0; color: var(--ink); opacity: 0.75; max-width: 60ch; }
.subscribe-form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.subscribe-form__input { flex: 1 1 200px; padding: 0.625rem 0.875rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 0.875rem; border-radius: 2px; }
.subscribe-form__btn { padding: 0.625rem 1.25rem; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; border: none; border-radius: 2px; cursor: pointer; }
.subscribe-form__btn:hover { opacity: 0.8; }
.subscribe-msg { font-family: var(--sans); font-size: 0.875rem; margin: 0 0 0.75rem; }
.subscribe-msg--ok { color: #2d6a2d; }
.subscribe-msg--err { color: #a33; }
html[data-theme="dark"] .subscribe-msg--ok { color: #6abf6a; }
html[data-theme="dark"] .subscribe-msg--err { color: #e07070; }
.newsletter-inline { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); padding: 1.5rem 0; margin: 2rem 0; }
.newsletter-inline__label { font: 700 .6875rem/1 var(--sans); text-transform: uppercase; letter-spacing: .15em; color: var(--muted); margin: 0 0 .5rem; }
.newsletter-inline__title { font: 1.25rem/1.3 var(--serif); margin: 0 0 1rem; }
.ethos-bookmark { display: inline-flex; align-items: center; gap: .375rem; background: none; border: 1px solid var(--line); padding: .4rem .875rem; font: 700 .625rem/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; cursor: pointer; color: var(--muted); margin: 0rem 0 1.5rem; transition: border-color .15s, color .15s; border-radius: 2px; }
.ethos-bookmark.is-bookmarked { color: var(--ink); border-color: var(--ink); }
.ethos-bookmark.bookmark-pulse { transform: scale(1.08); }
.reading-list-panel { position: fixed; top: 0; right: 0; width: min(360px, 100vw); height: 100vh; background: var(--paper); border-left: 1px solid var(--line); z-index: 1800; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; }
.reading-list-panel.is-open { transform: translateX(0); }
.reading-list__header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.25rem .75rem; border-bottom: 1px solid var(--line); }
.reading-list__heading { font: 700 .75rem/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; }
.reading-list__close { background: none; border: none; font-size: 1.125rem; cursor: pointer; color: var(--muted); padding: .25rem; }
.reading-list__empty { font: .875rem/1.5 var(--sans); color: var(--muted); padding: 1.25rem; margin: 0; }
.reading-list__items { list-style: none; margin: 0; padding: .5rem 0; overflow-y: auto; flex: 1; }
.reading-list__item { display: grid; grid-template-columns: 3rem 1fr auto; gap: .625rem; align-items: center; padding: .625rem 1.25rem; border-bottom: 1px solid var(--line); }
.reading-list__item:last-child { border-bottom: 0; }
.reading-list__thumb { width: 3rem; height: 3rem; object-fit: cover; border-radius: 2px; }
.reading-list__thumb--placeholder { background: var(--line); display: block; }
.reading-list__title { font: .8125rem/1.35 var(--sans); color: var(--ink); text-decoration: none; }
.reading-list__title:hover { text-decoration: underline; }
.reading-list__remove { background: none; border: none; cursor: pointer; color: var(--muted); padding: .25rem; font-size: .875rem; }
.reading-list__clear { margin: .75rem 1.25rem 1.25rem; background: none; border: 1px solid var(--line); padding: .5rem 1rem; font: 700 .625rem/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; color: var(--muted); border-radius: 2px; }
.reading-list__clear:hover { border-color: var(--ink); color: var(--ink); }
.ethos-reading-list-trigger { position: relative; background: none; border: none; cursor: pointer; color: var(--ink); padding: .25rem; display: flex; align-items: center; }
.reading-list-badge { position: absolute; top: -.125rem; right: -.25rem; background: var(--ink); color: var(--paper); font: 700 .5625rem/1 var(--sans); border-radius: 50%; width: 1rem; height: 1rem; display: flex; align-items: center; justify-content: center; }
.card-actions { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.card-actions .read-more { margin-top: 0; }
.card-bookmark { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--muted); padding: 0; line-height: 1; transition: color .15s; flex-shrink: 0; }
.card-bookmark:hover, .card-bookmark[aria-pressed="true"] { color: var(--ink); }
.is-read .read-more { opacity: 1; }
.load-more-wrap { text-align: center; margin: 2rem 0; }
#ethos-load-more { display: inline-flex; align-items: center; justify-content: center; padding: .875rem 1.5rem; border: 1px solid var(--ink); background: none; color: var(--ink); font: 700 .625rem/1 var(--sans); text-transform: uppercase; letter-spacing: .2em; cursor: pointer; border-radius: 0; transition: background .15s, color .15s; }
#ethos-load-more:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
#ethos-load-more:disabled { opacity: .5; cursor: default; }
.swipe-indicator { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.55); color: #fff; font-size: 1.5rem; padding: .75rem .875rem; border-radius: 2px; z-index: 1500; pointer-events: none; opacity: 0; transition: opacity .2s; }
.swipe-indicator.is-visible { opacity: 1; }
.swipe-indicator--left { left: .75rem; }
.swipe-indicator--right { right: .75rem; }
.shelf-year { font: 700 .6875rem/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 2.5rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.resena-shelf { margin-bottom: 3rem; }
.share-bar__native,
.share-bar__copy { background: none; border: 1px solid var(--line-strong); padding: .375rem .875rem; font: 700 .625rem/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; cursor: pointer; color: var(--ink); border-radius: 2px; transition: background .15s, color .15s; }
.share-bar__native:hover,
.share-bar__copy:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.share-bar__social { display: inline-flex; align-items: center; gap: .5rem; }
.share-bar span,
.share-bar__label { color: var(--muted); }
.share-bar__label { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.share-bar__link { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.share-bar__link:hover,
.share-bar__link:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.08); transform: translateY(-1px); outline: 2px solid var(--ink); outline-offset: 2px; }
.share-bar__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; }
.share-bar__icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
html[data-theme="dark"] .share-bar__link { background: #090909; color: var(--ink); }
#ethos-search-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; }
#ethos-search-overlay[hidden] { display: none; }
.search-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.search-panel { position: relative; width: min(680px, 94vw); background: var(--paper); padding: 1.5rem; border-radius: 2px; }
#ethos-search-input { width: 100%; font: 1.25rem/1 var(--serif); border: 0; border-bottom: 2px solid var(--ink); padding: .5rem 0; background: transparent; color: var(--ink); outline: none; }
.search-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.25rem; cursor: pointer; color: var(--muted); line-height: 1; padding: .25rem; }
.search-close:hover { color: var(--ink); }
.search-result { display: grid; grid-template-columns: 2.5rem 1fr; gap: .75rem; align-items: center; padding: .625rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.search-result:last-child { border-bottom: 0; }
.search-result[aria-selected="true"] { background: rgba(0,0,0,.04); }
.search-result__thumb { width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: 2px; background: var(--line); display: block; }
.search-result__title { font: 600 .875rem/1.3 var(--sans); }
.search-result__type { font: .7rem/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-top: .25rem; }
.search-no-results { font: .875rem/1.4 var(--sans); color: var(--muted); margin: 1rem 0 0; }
html[data-theme="dark"] .search-result[aria-selected="true"] { background: rgba(255,255,255,.06); }