@font-face{font-family:Manrope;src:url('../fonts/manrope/Manrope[wght].ttf') format('truetype');font-weight:200 800;font-display:swap}
.article-page{--text:#1d3029;--text-secondary:#5b6b63;--ground:#f5f7f5;--border:#e2e7e3;--green-soft:#eef3ef;--radius:8px;background:var(--white);color:var(--text);font-family:Manrope,sans-serif;font-size:14px;line-height:1.6}
.article-page [hidden]{display:none!important}
.article-page{display:flex;flex-direction:column;min-height:100svh}
.article-page main{flex:1}
.article-page .container{max-width:none;padding-inline:32px;margin-inline:auto;width:100%}
.article-page :where(h1,h2,h3,p){margin:0}
.article-page button{color:inherit}
.article-page button:disabled{cursor:wait;color:var(--text-secondary)}
.article-page a:hover,.text-button:hover{color:var(--green-dark)}
.skip-link{position:absolute;left:16px;top:-80px;padding:12px;background:white;z-index:10}
.skip-link:focus{top:12px}
.catalogue-header{border-bottom:1px solid var(--border);background:white}
.catalogue-header .container{height:84px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.library-logo{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:19px;letter-spacing:-.7px;font-weight:700}
.library-logo svg{width:30px;height:30px;color:var(--green)}
.library-logo strong{font-weight:400;color:var(--text-secondary)}
.catalogue-header nav{display:flex;gap:30px;align-items:center}
.catalogue-header nav a{font-size:14px;color:var(--text-secondary);padding-block:28px}
.catalogue-header nav a[aria-current]{color:var(--text);font-weight:700;border-bottom:2px solid var(--green)}
.write-link{display:inline-flex;align-items:center;justify-content:center;gap:18px;background:var(--green);color:white;font-weight:600;font-size:14px;padding:10px 18px;border-radius:6px;min-height:44px;white-space:nowrap}
.article-page .write-link:hover{background:var(--green-dark);color:white}
.catalogue-intro{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:40px 0 26px}
.catalogue-intro h1{font-size:30px;font-weight:650;letter-spacing:-1.1px;line-height:1.2;margin-bottom:12px}
.catalogue-intro p{color:var(--text-secondary);font-size:14px;line-height:1.6}
.catalogue-intro .writer-prompt{flex:none;text-align:right;font-size:13px}
.writer-prompt a{font-weight:650;color:var(--green-dark)}
.article-page .library-search{max-width:none;border:1px solid #cbd4ce;background:var(--ground);box-shadow:none;border-radius:var(--radius);padding:6px 8px 6px 18px;gap:12px;margin:0 0 32px}
.article-page .library-search:focus-within{border-color:var(--green);box-shadow:none}
.article-page .library-search input{min-width:0;font-size:14px;padding:9px 0;line-height:1.5}
.article-page input::placeholder{color:var(--text-secondary);opacity:1}
.article-page .library-search .search-submit{width:auto;height:38px;border-radius:6px;padding:0 18px;background:var(--text);color:white;font-size:13px;font-weight:600}
.article-page .library-search .clear-btn{width:38px;height:38px;background:transparent;color:var(--text-secondary);font-size:24px}
/* Keep filters compact while the article feed fills the available screen width. */
.article-page .library-layout{grid-template-columns:clamp(220px,20vw,280px) minmax(0,1fr);gap:32px;padding-bottom:48px}
.article-page .filters-panel{position:static;top:auto;background:transparent;border-radius:0;padding:0}
.filters-panel summary{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700;list-style:none;padding:8px 12px 18px;cursor:pointer}
.filters-panel summary::-webkit-details-marker{display:none}
.filters-panel summary>span{display:none}
.category-option{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:0;border-radius:6px;background:transparent;text-align:left;padding:9px 12px;font-size:13px;line-height:1.5;margin:2px 0;min-height:38px}
.category-option:hover{background:var(--ground)}
.category-option.active{background:#e9eeea;font-weight:650}
.category-option .count{color:var(--text-secondary);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums;text-align:right;min-width:20px}
.article-page .filter-group{padding:22px 12px 0;margin-top:12px;border-top:1px solid var(--border)}
.filter-group label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.article-page .select-field{border-radius:6px;font-size:13px;min-height:38px;border-color:#cbd4ce;line-height:1.5}
.saved-filter{display:flex;align-items:center;gap:8px;font-size:13px;padding:18px 12px 6px;cursor:pointer}
.saved-filter input{width:16px;height:16px;accent-color:var(--green);margin:0}
.text-button{background:none;border:0;padding:6px 0;font-size:13px;font-weight:550;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.filter-controls>.text-button{margin:8px 12px}
.library-note{margin-top:24px;padding:20px;background:var(--ground);border-radius:var(--radius);font-size:13px;color:var(--text-secondary)}
.library-note .icon{width:20px;height:20px;color:var(--green-dark);margin-bottom:10px}
.library-note p{margin:0 0 10px;line-height:1.65}
.library-note a{color:var(--text);font-weight:600;font-size:12px}
.results-col{min-width:0}
.article-page .results-toolbar{gap:12px;margin:0 0 8px;min-height:38px;flex-wrap:nowrap}
.article-page .results-toolbar h2{font-size:18px;font-weight:650;letter-spacing:-.4px;line-height:1.4}
.article-page .results-toolbar .count{font-size:14px;color:var(--text-secondary);font-weight:400;white-space:nowrap}
.article-page .sort-field .select-field{min-width:0;width:160px;background-color:white;font-size:12px}
.feed-status{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 16px;color:var(--text-secondary);font-size:12px}
.feed-status p{font-size:12px;line-height:1.5}
.feed-status .text-button{font-size:12px;flex-shrink:0}
.feed-error{padding:14px 16px;background:#f8ecea;border-radius:6px;margin-bottom:16px;color:#743b31;font-size:13px}
.article-page .article-list{gap:12px}
.article-page .article-row{align-items:flex-start;padding:22px 24px;gap:16px;background:var(--ground);border:0;border-radius:var(--radius);transition:background 160ms ease}
.article-page .article-row:hover{background:#eef2ee;transform:none;box-shadow:none}
.article-kicker{display:flex;align-items:center;gap:12px;justify-content:space-between;color:var(--text-secondary);font-size:12px;margin-bottom:9px}
.article-kicker span:first-child{color:var(--green-dark);font-weight:600}
.article-kicker span:last-child{white-space:nowrap}
.article-page .row-body h3{font-size:17px;font-weight:650;line-height:1.5;margin:0 0 8px;letter-spacing:-.3px}
.article-title{border:0;padding:0;background:none;text-align:left;display:block;font:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer;overflow-wrap:anywhere}
.article-title:hover{text-decoration:underline;text-underline-offset:4px}
.article-page .row-body p{font-size:13px;line-height:1.65;margin-bottom:14px;color:var(--text-secondary);-webkit-line-clamp:2}
.article-page .article-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--text-secondary);line-height:1.5}
.read-link{margin-left:auto;background:none;border:0;padding:0;font-size:12px;font-weight:650;white-space:nowrap;cursor:pointer}
.article-page .bookmark-btn{width:28px;height:32px;padding:4px;border-radius:4px;color:var(--text-secondary);margin-top:0}
.bookmark-btn svg{width:20px;height:20px}
.article-page .bookmark-btn.saved{color:var(--green-dark)}
.article-page .bookmark-btn:hover{background:#dce5de}
.article-page .pagination{justify-content:flex-end;gap:6px;margin-top:24px}
.page-range{margin-right:auto;font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.article-page .page-btn{border-radius:6px;min-width:36px;height:36px;font-size:13px;background:var(--ground);color:var(--text);font-weight:500}
.article-page .page-btn.active{background:var(--text);color:white}
.article-page .page-btn:disabled{opacity:1;color:var(--text-secondary);background:white;cursor:default}
.article-page .empty-state{padding:36px 24px;background:var(--ground);border-radius:var(--radius);text-align:left}
.empty-state h3{font-size:18px;margin-bottom:8px}
.empty-state p{margin-bottom:18px;font-size:14px}
.empty-state .write-link{font-size:13px}
.loading-row{height:180px;border-radius:var(--radius);background:var(--ground)}
.catalogue-footer{border-top:1px solid var(--border);color:var(--text-secondary);font-size:12px}
.catalogue-footer .container{display:flex;justify-content:space-between;gap:16px;padding-block:24px}
.catalogue-footer a{color:var(--green-dark);font-weight:600}
.reader-open{overflow:hidden}
.reading-dialog{color:var(--text);background:white;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;inset:0;border:0;border-radius:0;padding:0;overflow-y:auto;overscroll-behavior:contain}
.reading-dialog::backdrop{background:white}
.reader-top{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13px;color:var(--green-dark);background:white;border-bottom:1px solid var(--border);padding:18px 28px}
.reader-actions{display:flex;align-items:center;gap:8px}
.reader-download{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:600;color:var(--green-dark);background:var(--ground);border:1px solid var(--border);border-radius:999px;padding:8px 14px;cursor:pointer;transition:background .15s ease}
.reader-download .icon{width:15px;height:15px}
.reader-download:hover{background:var(--green-pale)}
.reader-download[disabled]{opacity:.55;cursor:progress}
#read-article-content{max-width:720px;margin:0 auto;padding:40px 24px 100px}
.reading-dialog h2{font-size:28px;line-height:1.4;letter-spacing:-.6px;margin:0 0 16px;overflow-wrap:anywhere}
.reading-dialog #read-meta,.reader-source{font-size:12px;color:var(--text-secondary);margin:8px 0}
.article-page .article-reading-body{white-space:pre-wrap;font-size:16px;line-height:1.9;overflow-wrap:anywhere;margin-top:28px}
@media(max-width:520px){.article-page .row-body p{font-size:14px!important}.article-page .library-search input,.article-page .category-option,.article-page .saved-filter{font-size:13px!important}.article-page .article-meta,.article-page .article-kicker,.article-page .feed-status p{font-size:12px!important}}
@media(min-width:801px){.filters-panel summary{pointer-events:none}}
@media(max-width:1000px){.article-page .container{padding-inline:28px}.article-page .library-layout{grid-template-columns:220px minmax(0,1fr);gap:24px}.catalogue-header nav{gap:20px}.article-page .article-row{padding:20px}.catalogue-intro h1{font-size:28px}}
@media(max-width:800px){.article-page .container{padding-inline:24px}.catalogue-header .container{height:72px;gap:16px}.catalogue-header nav{display:none}.catalogue-intro{padding-top:28px}.catalogue-intro .writer-prompt{font-size:12px}.article-page .library-layout{display:block}.catalogue-sidebar{margin-bottom:16px}.article-page .filters-panel{background:var(--ground);padding:0 14px;border-radius:var(--radius)}.filters-panel summary{padding:12px 0;min-height:46px}.filters-panel summary>span{display:inline}.filter-controls{padding-bottom:12px}#filter-categories{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.library-note{display:none}.article-page .library-search{margin-bottom:16px}.results-toolbar{padding-top:4px}}
@media(max-width:520px){.article-page .container{padding-inline:18px}.catalogue-header .container{height:68px}.library-logo{font-size:16px;gap:8px}.library-logo svg{width:26px;height:26px}.write-link{padding:9px 12px;font-size:12px;gap:8px}.catalogue-intro{padding:24px 0 18px;display:block}.catalogue-intro h1{font-size:24px;letter-spacing:-.7px;margin-bottom:9px}.catalogue-intro p{font-size:13px}.catalogue-intro .writer-prompt{font-size:12px;text-align:left;margin-top:12px}.writer-prompt br{display:none}.writer-prompt a{margin-left:5px}.article-page .library-search{padding-left:12px;gap:8px}.article-page .library-search input{font-size:12px}.article-page .library-search .search-submit{font-size:12px;padding-inline:12px;min-height:44px}.article-page .library-search>.icon{display:none}.article-page .results-toolbar{align-items:center}.article-page .results-toolbar h2{font-size:16px;flex:1}.article-page .sort-field .select-field{width:135px;font-size:12px;min-height:44px}.feed-status{margin-bottom:12px}.feed-status p{font-size:11px}.feed-status .text-button{min-height:44px}.article-page .article-row{padding:18px 16px;gap:8px}.article-kicker{font-size:11px;gap:6px;flex-wrap:wrap}.article-page .row-body h3{font-size:16px;line-height:1.5}.article-page .row-body p{font-size:12px;margin-bottom:10px}.article-page .article-meta{font-size:11px;gap:6px}.article-page .bookmark-btn{width:32px;min-height:44px;margin-top:-8px}.read-link{font-size:12px;min-height:44px}.article-page .page-btn{min-width:40px;height:44px}.page-range{width:100%;text-align:center;margin:0 0 6px}.article-page .pagination{justify-content:center}.catalogue-footer .container{display:block;padding-block:20px}.catalogue-footer p{margin-top:6px}.reader-top{padding:14px 18px}.reader-download span{display:none}#read-article-content{padding:28px 18px 80px}.reading-dialog h2{font-size:21px}.article-page .article-reading-body{font-size:15px;line-height:1.8}.category-option{min-height:44px;font-size:12px;padding-inline:8px}.category-option .count{font-size:11px}}
