:root
{
  --white: #ffffff;
  --orange: #fc7e11;
  --darkgrey: #666666;
  --grey: #dddddd;
  --black: #000000;
  --title: #000000;
  --lightgrey: #e9f2fb;
  --whiteop: #f3f9ffbd;
  --greyop: #bababa54;
}
.post { border-bottom: 1px dotted var(--grey); }
body { margin:0; font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; margin-bottom:112px; background:var(--white); color:var(--black); }
@media (prefers-color-scheme: dark) {
  :root { --white:#17191d; --orange:#f59e55; --darkgrey:#aeb4bf; --grey:#343840; --black:#f4f5f7; --title:#f4f5f7; --lightgrey:#252930; --whiteop:#17191ddd; --greyop:#bababa54; }
}
div#header { font-size:23px; margin:0 auto; text-align:left; font-weight:760; padding:26px 28px 18px; max-width:1600px; box-sizing:border-box; border-bottom:1px solid var(--grey); color:var(--black); letter-spacing:-.55px; }
div#wrap { max-width:1600px; margin:24px auto 0; padding:0 24px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; box-sizing:border-box; align-items:stretch; }
.post { min-width:0; overflow:hidden; border:1px solid var(--grey); border-radius:17px; background:var(--white); display:flex; flex-direction:column; box-shadow:0 3px 14px rgba(20,25,35,.035); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.post:hover { transform:translateY(-3px); box-shadow:0 13px 30px rgba(20,25,35,.09); border-color:#c8cdd5; }
.leftpan { width:100%; height:190px; overflow:hidden; display:block; position:relative; padding:0; background:var(--lightgrey); flex-shrink:0; }
.leftpan img { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; position:absolute; inset:0; margin:auto; transition:transform .4s ease; }
.post:hover .leftpan img { transform:scale(1.035); }
.leftpan span.domain { position:absolute; left:12px; right:auto; bottom:12px; width:auto; max-width:calc(100% - 24px); margin:0; padding:4px 8px; border-radius:7px; background:rgba(20,23,28,.74); color:#fff; font-size:11px; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rightpan,.leftpan + .rightpan { width:auto; display:flex; flex:1; flex-direction:column; padding:18px 19px 19px; vertical-align:initial; box-sizing:border-box; }
.summary { margin:12px 0 0; color:var(--darkgrey); font-size:14px; line-height:1.7; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.feedname { color:var(--orange); font-weight:650; font-size:12px; letter-spacing:.1px; margin-bottom:10px; line-height:1.5; }
.feedname span { color:var(--darkgrey); font-weight:450; padding-right:4px; }
span.date { padding-left:2px; }
h2 { font-size:17px; font-weight:650; margin:0; padding:0; line-height:1.58; word-wrap:break-word; letter-spacing:-.2px; }
h2 a { text-decoration:none; color:var(--title); font-weight:650; transition:color .15s ease; }
h2 a:hover { color:var(--orange); }
div#filter { padding:6px 28px; text-align:left; max-width:1648px; margin:0 auto 18px; box-sizing:border-box; cursor:default; }
span#filters { display:inline-flex; flex-wrap:wrap; align-items:center; gap:5px; border:1px solid var(--grey); padding:5px; border-radius:12px; vertical-align:middle; background:var(--lightgrey); }
span.tab { padding:8px 13px; color:var(--darkgrey); border-radius:8px; display:inline-block; background:transparent; font-size:14px; cursor:pointer; transition:background .15s,color .15s; }
span.tab:hover { color:var(--black); }
span.tab.active { color:var(--black); padding:8px 13px; background:var(--white); border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.07); }
select { border:1px solid transparent; padding:8px 28px 8px 10px; font-size:14px; vertical-align:middle; max-width:min(230px,70vw); background:var(--white); color:var(--black); margin-left:3px; border-radius:8px; outline:none; }
select.selected { background:var(--white); border-color:var(--grey); }

/* Podcast cards: vinyl record artwork and playback animation. */
.post[data-audio="1"] .leftpan { height:220px; display:flex; align-items:center; justify-content:center; isolation:isolate; background:radial-gradient(ellipse at center,#202b3a 0%,#0e1420 72%,#080b10 100%); }
.post[data-audio="1"] .leftpan img { position:relative; inset:auto; width:174px; height:174px; max-width:72%; max-height:calc(100% - 28px); object-fit:cover; border-radius:50%; border:7px solid #11151c; box-sizing:border-box; box-shadow:0 8px 24px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.18); z-index:0; }
.post[data-audio="1"] .leftpan:before { content:""; position:absolute; z-index:1; width:174px; height:174px; max-width:72%; max-height:calc(100% - 28px); border-radius:50%; box-sizing:border-box; pointer-events:none; background:repeating-radial-gradient(circle at center,rgba(255,255,255,.14) 0 1px,rgba(0,0,0,.18) 2px 4px,transparent 5px 8px),radial-gradient(circle at center,transparent 0 13%,rgba(0,0,0,.9) 13.5% 14.5%,transparent 15%),conic-gradient(from 10deg,rgba(255,255,255,.12),transparent 14%,rgba(255,255,255,.05) 24%,transparent 42%,rgba(255,255,255,.12) 60%,transparent 75%,rgba(255,255,255,.07)); border:1px solid rgba(255,255,255,.2); }
.post[data-audio="1"] .leftpan:after { content:"♫  PODCAST"; position:absolute; top:12px; left:12px; z-index:2; padding:6px 9px; border-radius:8px; color:#fff; background:rgba(22,25,31,.76); font-size:10px; font-weight:750; letter-spacing:1px; backdrop-filter:blur(8px); }
.post[data-audio="1"] .audio { display:flex; align-items:center; gap:12px; margin-top:16px; padding:10px 12px; border:1px solid var(--grey); border-radius:12px; background:var(--lightgrey); min-width:0; }
.post[data-audio="1"] .audio:after { content:""; flex:1; min-width:28px; height:24px; opacity:.72; background:repeating-linear-gradient(90deg,var(--orange) 0 3px,transparent 3px 7px); clip-path:polygon(0 42%,4% 42%,4% 63%,8% 63%,8% 22%,12% 22%,12% 78%,16% 78%,16% 35%,20% 35%,20% 90%,24% 90%,24% 12%,28% 12%,28% 70%,32% 70%,32% 40%,36% 40%,36% 58%,40% 58%,40% 20%,44% 20%,44% 83%,48% 83%,48% 32%,52% 32%,52% 65%,56% 65%,56% 15%,60% 15%,60% 78%,64% 78%,64% 38%,68% 38%,68% 55%,72% 55%,72% 25%,76% 25%,76% 85%,80% 85%,80% 40%,84% 40%,84% 62%,88% 62%,88% 18%,92% 18%,92% 72%,96% 72%,96% 42%,100% 42%,100% 58%,0 58%); }
.post[data-audio="1"] .audio button[data-aid] { flex:0 0 38px; width:38px; height:38px; margin:0; border:0; border-radius:50%; background-color:var(--orange); background-position:center; background-size:13px; box-shadow:0 3px 8px rgba(252,126,17,.24); transition:transform .18s ease,box-shadow .18s ease; }
.post[data-audio="1"] .audio button[data-aid]:hover { transform:scale(1.07); box-shadow:0 5px 12px rgba(252,126,17,.3); }
.post[data-audio="1"] .audio button[data-aid]:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.post[data-audio="1"] .audio audio { display:none; }
.post[data-audio="1"].nowplaying .audio { border-color:var(--orange); background:color-mix(in srgb,var(--orange) 9%,var(--lightgrey)); }
.post[data-audio="1"].is-playing .leftpan img { animation:vinylSpin 5s linear infinite; }
.post[data-audio="1"].is-playing .leftpan:before { animation:vinylSpin 5s linear infinite; }
.post[data-audio="1"].is-playing .leftpan { background:radial-gradient(ellipse at center,#29384a 0%,#111a29 70%,#080b10 100%); }
@keyframes vinylSpin { to { transform:rotate(360deg); } }

#floating_player { width:100%; text-align:center; position:fixed; left:0; right:0; bottom:0; background:var(--whiteop); box-shadow:0 -4px 24px rgba(0,0,0,.09); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); display:none; opacity:0; transition:opacity .3s ease; z-index:10; border-top:1px solid var(--grey); }
#floating_player.show { opacity:1; }
span#timeline { display:inline-block; position:relative; width:calc(100% - 140px); }
div#timeline_wrap { max-width:1120px; margin:10px auto; }
input#seekbar { appearance:none; width:100%; height:6px; outline:0; opacity:.8; background:var(--grey); border-radius:8px; }
span#seekbar { background:var(--orange); display:block; position:absolute; left:0; height:7px; border-radius:11px; transition:.2s; }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:16px; height:16px; background:var(--orange); border-radius:50%; cursor:pointer; }
input[type="range"]::-moz-range-thumb { appearance:none; width:16px; height:16px; background:var(--orange); border-radius:50%; cursor:pointer; }
span#seekbar:after { content:" "; display:block; background:var(--orange); width:12px; height:12px; position:absolute; right:-6px; border-radius:100%; bottom:-3px; }
span#current_time,span#duration { display:inline-block; vertical-align:middle; padding:0 5px; width:50px; font-variant-numeric:tabular-nums; }
button#playpausebutton,button[data-aid] { font-size:0; background:var(--orange); width:34px; height:34px; border:0; box-shadow:none; margin:5px 0; background-image:url(play_arrow.png); background-size:12px; background-repeat:no-repeat; background-position:12px 9px; border-radius:100%; color:var(--black); cursor:pointer; }
.playing { background-image:url(pause.png)!important; background-position:11px 9px!important; }
audio { display:none; }
button#playpausebutton { float:left; margin:0 20px; }
span#title { float:left; max-width:calc(100% - 210px); overflow:hidden; white-space:pre; text-overflow:ellipsis; margin-top:5px; font-weight:550; }
.player_meta { max-width:1120px; margin:0 auto; overflow:hidden; padding:10px 0 0; }
button#speed,button#plus30 { float:right; margin-top:5px; background:none; border:0; color:var(--orange); padding-right:12px; font-size:18px; cursor:pointer; }
button#plus30 { padding-right:4px; margin-right:5px; }
.nowplaying { border-color:var(--orange); box-shadow:0 0 0 2px #fc7e1122; }
@media (min-width:1600px) { div#header {max-width:1760px;} div#wrap {max-width:1760px;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:0 32px;} div#filter {max-width:1808px;padding-left:32px;padding-right:32px;} }
@media (max-width:980px) { div#wrap {grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:0 22px;} div#filter {padding:6px 22px;} div#header {padding-left:22px;padding-right:22px;} .leftpan {height:170px;} }
@media (max-width:600px) {
  body {margin-bottom:126px;}
  div#wrap {grid-template-columns:minmax(0,1fr);gap:14px;margin-top:14px;padding:0 14px;}
  div#filter {padding:5px 14px;margin-bottom:12px;}
  div#header {padding:20px 14px 15px;font-size:20px;}
  .leftpan {height:195px;}
  .rightpan,.leftpan + .rightpan {padding:14px 15px 16px;}
  h2 {font-size:16px;line-height:1.58;}
  span#filters {gap:2px;width:100%;box-sizing:border-box;}
  span.tab {padding:7px 9px;font-size:13px;}
  span.tab.active {padding:7px 9px;}
  select {font-size:13px;max-width:100%;flex:1;min-width:0;}
  .player_meta {padding-top:8px;}
  button#playpausebutton {margin-left:10px;}
  span#title {max-width:calc(100% - 175px);font-size:13px;}
  .post[data-audio="1"] .audio {gap:10px;padding:9px 10px;}
  .post[data-audio="1"] .audio:after {min-width:22px;}
  .post[data-audio="1"] .audio button[data-aid] {flex-basis:36px;width:36px;height:36px;}
  div#timeline_wrap {margin:8px 10px;}
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after {transition:none!important;animation:none!important;scroll-behavior:auto!important;} }


/* Category sidebar and split layout */
.page-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:28px; max-width:1900px; margin:0 auto; padding:0 28px 120px; box-sizing:border-box; align-items:start; }
#category_sidebar { position:sticky; top:18px; padding:18px 12px; border:1px solid var(--grey); border-radius:18px; background:var(--white); max-height:calc(100vh - 36px); overflow:auto; }
.sidebar-heading { padding:0 10px 14px; font-size:15px; font-weight:750; letter-spacing:.04em; }
.category-filter { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 11px; border:0; border-radius:10px; background:transparent; color:inherit; text-align:left; cursor:pointer; font:inherit; transition:background .18s ease,color .18s ease; }
.category-filter:hover { background:rgba(252,126,17,.08); }
.category-filter.active { background:rgba(252,126,17,.13); color:var(--orange); font-weight:700; }
.category-filter small { color:var(--darkgrey); font-size:11px; }
#main_content { min-width:0; }
#main_content #filter { max-width:none; padding-left:0; padding-right:0; }
#main_content #wrap { max-width:none; margin-top:18px; padding:0; grid-template-columns:repeat(3,minmax(0,1fr)); }
.post[data-audio="1"] .podcast-player { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0 0; margin-top:14px; border-top:1px solid var(--grey); }
.podcast-player .vinyl-disc { width:76px; height:76px; flex:0 0 76px; border-radius:50%; padding:5px; box-sizing:border-box; background:repeating-radial-gradient(circle,#171717 0 2px,#292929 3px 4px,#101010 5px 6px); box-shadow:0 5px 12px #0003; position:relative; }
.podcast-player .vinyl-disc:before { content:""; position:absolute; inset:31px; border-radius:50%; background:var(--orange); border:3px solid #f5f5f5; z-index:2; }
.podcast-player .vinyl-disc img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.post.is-playing .vinyl-disc { animation:vinyl-spin 3.2s linear infinite; }
.post:not(.is-playing) .vinyl-disc { animation-play-state:paused; }
.podcast-controls { margin-left:auto; min-width:110px; display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.podcast-label { color:var(--darkgrey); font-size:10px; letter-spacing:.14em; font-weight:800; }
.podcast-controls button { border:0; border-radius:999px; background:var(--orange); color:white; padding:10px 17px; min-width:102px; font-weight:750; cursor:pointer; box-shadow:0 5px 14px #fc7e1128; }
.podcast-controls button.playing { background:#242424; color:#fff; }
@keyframes vinyl-spin { to { transform:rotate(360deg); } }
@media (min-width:1600px) { .page-layout { max-width:2100px; grid-template-columns:260px minmax(0,1fr); gap:32px; padding-left:32px; padding-right:32px; } #main_content #wrap { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:1100px) { .page-layout { grid-template-columns:190px minmax(0,1fr); gap:18px; padding-left:18px; padding-right:18px; } #main_content #wrap { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .page-layout { display:block; padding:0 14px 115px; } #category_sidebar { position:static; max-height:none; display:flex; gap:7px; overflow-x:auto; padding:10px; margin-bottom:14px; border-radius:12px; } .sidebar-heading { flex:0 0 auto; align-self:center; padding:0 8px; } #category_sidebar .category-filter { flex:0 0 auto; width:auto; white-space:nowrap; padding:8px 10px; } #main_content #filter { padding:5px 0; } #main_content #wrap { grid-template-columns:minmax(0,1fr); } .podcast-player .vinyl-disc { width:64px; height:64px; flex-basis:64px; } .podcast-player .vinyl-disc:before { inset:26px; } }
@media (prefers-reduced-motion:reduce) { .post.is-playing .vinyl-disc { animation:none; } }

/* Keep playback actions aligned to the right in both the card and sticky player */
#floating_player .player_meta { display:flex; align-items:center; gap:10px; }
#floating_player button#playpausebutton { order:4; float:none; margin:0 0 0 auto; flex:0 0 auto; }
#floating_player span#title { order:1; float:none; flex:1 1 auto; min-width:0; max-width:none; }
#floating_player button#speed { order:2; float:none; margin:0; flex:0 0 auto; }
#floating_player button#plus30 { order:3; float:none; margin:0; flex:0 0 auto; }
@media (max-width:560px) { #floating_player .player_meta { gap:6px; } #floating_player button#playpausebutton { margin-left:auto; } #floating_player span#title { max-width:none; } }

/* Ember-inspired three-pane RSS reader */
:root { --ember-bg:#f4efe5; --ember-panel:#fbf9f3; --ember-border:#e2dac8; --ember-ink:#28251f; --ember-muted:#817a6c; --ember-accent:#ad3e17; --ember-accent-soft:#fae9de; }
body { background:var(--ember-bg); color:var(--ember-ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; margin-bottom:112px; }
div#header { height:60px; max-width:none; width:100%; padding:0 22px; display:flex; align-items:center; gap:10px; background:#efe8da; border-bottom:1px solid var(--ember-border); position:sticky; top:0; z-index:50; }
.brand-mark { color:var(--ember-accent); font-size:25px; font-weight:900; line-height:1; }
.brand-name { font-family:Georgia,serif; font-size:23px; font-weight:700; margin-right:clamp(24px,10vw,150px); }
.global-search { height:40px; width:min(560px,42vw); display:flex; align-items:center; gap:10px; padding:0 14px; border:1px solid var(--ember-border); border-radius:13px; background:#fffdf8; color:var(--ember-muted); }
.global-search input { width:100%; border:0; outline:0; background:transparent; color:var(--ember-ink); font:inherit; }
.header-actions { margin-left:auto; display:flex; align-items:center; gap:10px; }
.header-actions button { width:34px; height:34px; border:0; border-radius:9px; background:transparent; color:var(--ember-ink); font-size:21px; cursor:pointer; }
.header-actions button:hover { background:#e5dccb; }
.admin-pill { border:1px solid var(--ember-border); background:#fffdf8; border-radius:22px; padding:9px 14px; font-size:12px; white-space:nowrap; }
.page-layout { display:grid; grid-template-columns:260px minmax(330px,405px) minmax(420px,1fr); gap:0; max-width:none; margin:0; padding:0; min-height:calc(100vh - 60px); align-items:stretch; }
#category_sidebar { position:sticky; top:60px; height:calc(100vh - 60px); max-height:none; overflow:auto; border:0; border-right:1px solid var(--ember-border); border-radius:0; padding:22px 13px 130px; background:#f0e9dc; }
.sidebar-heading { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--ember-muted); padding:18px 10px 10px; }
#category_sidebar .category-filter { padding:10px 11px; border-radius:10px; color:#4c463b; font-size:13px; }
#category_sidebar .category-filter.active { background:var(--ember-accent-soft); color:var(--ember-accent); }
#main_content { min-width:0; display:flex; flex-direction:column; }
#filter { position:sticky; top:60px; z-index:10; background:#f7f2e9; border-bottom:1px solid var(--ember-border); padding:18px 18px 13px; margin:0; }
#filters { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
#filters .tab, #filters select { border:1px solid var(--ember-border); border-radius:999px; padding:8px 11px; background:#fffdf8; color:#635b4e; cursor:pointer; font-size:12px; }
#filters .tab.active { background:#29251f; color:white; border-color:#29251f; }
.reader-columns { display:grid; grid-template-columns:minmax(290px, 0.88fr) minmax(390px,1.12fr); gap:0; min-height:calc(100vh - 150px); }
#wrap { max-width:none; margin:0; padding:12px 9px 130px 10px; display:flex; flex-direction:column; gap:9px; align-items:stretch; border-right:1px solid var(--ember-border); min-width:0; }
.post { cursor:pointer; display:flex; flex-direction:column; gap:0; min-width:0; border:1px solid var(--ember-border); border-radius:15px; padding:13px; background:var(--ember-panel); box-shadow:0 1px 2px #3d2b1308; }
.post:hover { border-color:#c8a48d; transform:none; }
.post.selected-article { border:2px solid #bf4d29; padding:12px; box-shadow:0 2px 9px #8c36151a; }
.post .leftpan { width:100%; height:145px; overflow:hidden; border-radius:10px; margin:10px 0 0; }
.post .leftpan img { width:100%; height:100%; object-fit:cover; }
.post .rightpan { display:flex; flex-direction:column; min-width:0; }
.post .feedname { color:var(--ember-muted); font-size:11px; margin-bottom:8px; }
.post h2 { font-family:Georgia,"Times New Roman",serif; font-size:17px; line-height:1.25; letter-spacing:-.25px; margin:0 0 8px; color:var(--ember-ink); }
.post h2 a { color:inherit; text-decoration:none; }
.post .summary { font-family:Georgia,"Times New Roman",serif; color:#6e675a; font-size:13px; line-height:1.55; margin:0; -webkit-line-clamp:3; }
.post .podcast-player { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--ember-border); padding-top:10px; margin-top:12px; }
.post .vinyl-disc { width:56px; height:56px; flex:0 0 56px; }
.post .vinyl-disc:before { inset:22px; }
.post .podcast-controls { min-width:0; }
.post .podcast-controls button { background:var(--ember-accent); }
#article-detail { min-width:0; padding:28px clamp(22px,3vw,48px) 140px; background:#f7f2e9; overflow-wrap:anywhere; }
.detail-empty { margin:18vh auto 0; max-width:420px; text-align:center; color:var(--ember-muted); }
.detail-empty h2 { font-family:Georgia,serif; color:var(--ember-ink); font-size:28px; }
.detail-spark { color:var(--ember-accent); font-size:32px; }
#article-detail .detail-copy { cursor:default; border:0; background:transparent; box-shadow:none; padding:0; overflow:visible; display:block; }
#article-detail .detail-copy .leftpan { height:auto; max-height:390px; margin:24px 0 0; border-radius:12px; order:3; }
#article-detail .detail-copy .leftpan img { max-height:390px; object-fit:cover; }
#article-detail .detail-copy .rightpan { display:contents; }
#article-detail .detail-copy .feedname { display:block; font-size:12px; margin:12px 0; }
#article-detail .detail-copy h2 { font-size:clamp(28px,2.3vw,40px); line-height:1.08; margin:14px 0 20px; order:1; }
#article-detail .detail-copy .summary { order:2; display:block; font-family:Georgia,serif; font-size:16px; line-height:1.7; padding:20px; border:1px solid var(--ember-border); border-left:4px solid var(--ember-accent); border-radius:14px; background:#fffaf3; color:#3e382f; margin:0 0 22px; -webkit-line-clamp:unset; }
#article-detail .detail-copy .audio { order:4; max-width:480px; margin:20px 0; }
#article-detail .detail-copy .audio button { min-width:112px; }
#article-detail .detail-copy .audio audio { display:none; }
#floating_player { background:#fffaf3; border:1px solid var(--ember-border); box-shadow:0 -8px 30px #49351b12; border-radius:18px 18px 0 0; }
body.compact-view #wrap .post .leftpan { display:none; }
body.compact-view #wrap .post { padding:10px; }
body.compact-view #wrap .post h2 { font-size:15px; }
body.warm-dark { --ember-bg:#1f1d19; --ember-panel:#292620; --ember-border:#484238; --ember-ink:#f2eadb; --ember-muted:#b7ad9c; background:var(--ember-bg); color:var(--ember-ink); }
body.warm-dark #category_sidebar, body.warm-dark div#header { background:#26231e; }
body.warm-dark #filter, body.warm-dark #article-detail { background:#211f1a; }
body.warm-dark .post, body.warm-dark #floating_player { background:#292620; }
body.warm-dark #article-detail .detail-copy .summary { background:#302b23; color:#eee2d0; }
@media (min-width:1700px) { .page-layout { grid-template-columns:280px minmax(360px,440px) minmax(500px,1fr); } .reader-columns { grid-template-columns:minmax(320px, .8fr) minmax(500px,1.2fr); } }
@media (max-width:1250px) { .page-layout { grid-template-columns:210px minmax(280px,370px) minmax(320px,1fr); } .reader-columns { grid-template-columns:1fr; } #article-detail { display:none; } }
@media (max-width:760px) { div#header { padding:0 12px; gap:8px; } .brand-name { margin-right:4px; font-size:20px; } .global-search { width:auto; flex:1; min-width:80px; } .admin-pill { display:none; } .header-actions { gap:2px; } .page-layout { display:block; } #category_sidebar { position:static; width:auto; height:auto; max-height:none; display:flex; align-items:center; gap:6px; overflow-x:auto; padding:8px 10px; border-right:0; border-bottom:1px solid var(--ember-border); } #category_sidebar .sidebar-heading { display:none; } #category_sidebar .category-filter { width:auto; flex:0 0 auto; white-space:nowrap; } #filter { position:static; padding:12px; } .reader-columns { display:block; } #wrap { border:0; padding:10px; } #wrap .post .leftpan { height:170px; } #article-detail { display:none !important; } #floating_player { left:8px; right:8px; width:auto; } }


/* Card-grid correction: keep the three-pane reader balanced and render articles as cards. */
@media (min-width: 1251px) {
  .page-layout {
    grid-template-columns: 250px minmax(0, 1fr);
  }
  #main_content {
    min-width: 0;
  }
  .reader-columns {
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  }
  #wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    align-items: stretch;
    gap: 14px;
    padding: 16px 14px 130px;
    border-right: 1px solid var(--ember-border);
  }
  #wrap .post {
    height: 100%;
    min-height: 260px;
    padding: 12px;
    gap: 0;
    align-self: stretch;
  }
  #wrap .post .leftpan {
    height: 132px;
    margin: 8px 0 10px;
    order: 0;
  }
  #wrap .post .rightpan {
    padding: 0;
    flex: 1;
  }
  #wrap .post h2 {
    font-size: 15px;
    line-height: 1.35;
    margin-bottom: 8px;
  }
  #wrap .post .summary {
    font-size: 12px;
    line-height: 1.55;
    -webkit-line-clamp: 3;
  }
  #wrap .post .feedname {
    margin-bottom: 7px;
  }
  #wrap .post[data-audio="1"] .leftpan {
    height: 132px;
  }
  #wrap .post[data-audio="1"] .leftpan img {
    width: 96px;
    height: 96px;
  }
  #wrap .post.selected-article {
    border: 2px solid #bf4d29;
    padding: 11px;
  }
}
@media (min-width: 1700px) {
  .page-layout { grid-template-columns: 270px minmax(0, 1fr); }
  .reader-columns { grid-template-columns: minmax(0, 1.12fr) minmax(460px, .88fr); }
  #wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1250px) and (min-width: 761px) {
  .page-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .reader-columns { grid-template-columns: minmax(0, 1fr); }
  #wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #article-detail { display: none; }
}
@media (max-width: 760px) {
  #wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #wrap .post { min-height: 0; }
  #wrap .post .leftpan { height: 175px; }
}


/* Mobile-first refinements */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  body { margin-bottom: 100px; overflow-x: hidden; }
  div#header {
    position: sticky;
    top: 0;
    z-index: 60;
    height: auto;
    min-height: 58px;
    padding: 10px 12px 12px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "mark brand actions"
      "search search search";
    gap: 10px;
    align-items: center;
  }
  .brand-mark { grid-area: mark; font-size: 23px; }
  .brand-name { grid-area: brand; margin: 0; font-size: 21px; }
  .global-search {
    grid-area: search;
    width: 100%;
    min-width: 0;
    height: 40px;
    box-sizing: border-box;
    border-radius: 12px;
  }
  .header-actions { grid-area: actions; margin: 0; gap: 2px; }
  .header-actions button { width: 32px; height: 32px; font-size: 19px; }
  .page-layout { display: block; min-height: 0; padding: 0 0 20px; }
  #category_sidebar {
    position: sticky;
    top: 110px;
    z-index: 30;
    width: 100%;
    height: auto;
    max-height: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 9px 12px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--ember-border);
    border-radius: 0;
    scrollbar-width: none;
  }
  #category_sidebar::-webkit-scrollbar { display: none; }
  #category_sidebar .sidebar-heading { display: none; }
  #category_sidebar .category-filter {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 12px;
    border: 1px solid var(--ember-border);
    background: #fffaf3;
  }
  #category_sidebar .category-filter.active {
    background: var(--ember-accent-soft);
    border-color: #e6b69f;
  }
  #main_content { min-width: 0; }
  #filter {
    position: static;
    padding: 12px 12px 10px;
    margin: 0;
    background: var(--ember-bg);
    border-bottom: 0;
  }
  #filters { width: 100%; gap: 6px; }
  #filters .tab, #filters select {
    min-height: 36px;
    box-sizing: border-box;
    padding: 8px 11px;
    font-size: 12px;
  }
  #filters select { max-width: 42vw; }
  .reader-columns { display: block; min-height: 0; }
  #wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
    padding: 2px 12px 120px;
    border: 0;
  }
  #wrap .post {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas: "cover content";
    align-items: start;
    gap: 0 12px;
    min-height: 0;
    height: auto;
    padding: 11px;
    border-radius: 14px;
    box-sizing: border-box;
  }
  #wrap .post .leftpan {
    grid-area: cover;
    width: 104px;
    height: 104px;
    margin: 0;
    align-self: start;
    border-radius: 10px;
  }
  #wrap .post .leftpan img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
  }
  #wrap .post .rightpan {
    grid-area: content;
    display: flex;
    min-width: 0;
    padding: 0;
    overflow-wrap: anywhere;
  }
  #wrap .post .feedname {
    font-size: 10px;
    line-height: 1.35;
    margin: 0 0 6px;
  }
  #wrap .post h2 {
    font-size: 15px;
    line-height: 1.38;
    margin: 0 0 7px;
    overflow-wrap: anywhere;
  }
  #wrap .post .summary {
    display: -webkit-box;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  #wrap .post[data-audio="1"] .leftpan {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 104px;
  }
  #wrap .post[data-audio="1"] .leftpan img {
    width: 78px;
    height: 78px;
    max-width: 78px;
    max-height: 78px;
    border-radius: 50%;
  }
  #wrap .post .podcast-player {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding-top: 9px;
  }
  #wrap .post .podcast-player .vinyl-disc {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }
  #wrap .post .podcast-player .vinyl-disc:before { inset: 19px; }
  #wrap .post .podcast-controls button { min-width: 0; padding: 8px 12px; }
  #article-detail { display: none !important; }
  #floating_player {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 15px;
    z-index: 80;
  }
  #floating_player .player_meta { display: flex; align-items: center; gap: 7px; }
  #floating_player span#title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }
  #floating_player button#playpausebutton { margin: 0; padding: 7px 10px; }
  #floating_player button#speed, #floating_player button#plus30 { padding: 6px 8px; font-size: 11px; }
  #timeline_wrap { gap: 5px; }
  #chapters { display: none; }
}
@media (max-width: 380px) {
  .brand-name { font-size: 19px; }
  .header-actions button { width: 28px; }
  #wrap .post { grid-template-columns: 86px minmax(0, 1fr); gap: 0 9px; padding: 9px; }
  #wrap .post .leftpan, #wrap .post[data-audio="1"] .leftpan { width: 86px; height: 92px; }
  #wrap .post .leftpan img { width: 100%; height: 100%; }
  #wrap .post[data-audio="1"] .leftpan img { width: 68px; height: 68px; }
  #wrap .post h2 { font-size: 14px; }
  #wrap .post .summary { -webkit-line-clamp: 2; }
  #floating_player button#plus30 { display: none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  div#header { padding-left: 16px; padding-right: 16px; }
  .brand-name { margin-right: 18px; }
  .global-search { width: min(380px, 36vw); }
  .page-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 0; }
  .reader-columns { grid-template-columns: minmax(0, 1fr); }
  #wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #article-detail { display: none; }
}


/* Inline podcast playback: remove the fixed bottom player and keep controls beside the selected card. */
#floating_player { display: none !important; }
#wrap .post[data-audio="1"] .podcast-player {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
#wrap .post[data-audio="1"] .podcast-player .vinyl-disc {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}
#wrap .post[data-audio="1"] .podcast-player .vinyl-disc:before { inset: 19px; }
#wrap .post[data-audio="1"] .podcast-controls {
  margin-left: auto;
  min-width: 0;
  align-items: flex-end;
}
#wrap .post[data-audio="1"] .podcast-controls button {
  min-width: 0;
  padding: 8px 12px;
}
@media (max-width: 560px) {
  #wrap .post[data-audio="1"] .podcast-player { gap: 8px; }
  #wrap .post[data-audio="1"] .podcast-player .vinyl-disc {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
  #wrap .post[data-audio="1"] .podcast-player .vinyl-disc:before { inset: 16px; }
}


/* Inline podcast progress: visible timeline and elapsed/total time in each card. */
.post[data-audio="1"] .podcast-player {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}
.post[data-audio="1"] .podcast-progress {
  order:3;
  display:flex;
  align-items:center;
  gap:9px;
  flex:0 0 100%;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  margin-top:3px;
  color:var(--ember-muted, var(--darkgrey));
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.post[data-audio="1"] .podcast-progress span {
  flex:0 0 auto;
  min-width:36px;
  text-align:center;
}
.post[data-audio="1"] .podcast-progress .podcast-seek {
  appearance:none;
  -webkit-appearance:none;
  flex:1 1 auto;
  width:100%;
  min-width:40px;
  height:5px;
  margin:0;
  padding:0;
  border:0;
  border-radius:999px;
  outline:none;
  cursor:pointer;
  background:linear-gradient(to right,var(--ember-accent, var(--orange)) 0%,var(--ember-accent, var(--orange)) var(--progress, 0%),#d7d0c3 var(--progress, 0%),#d7d0c3 100%);
}
.post[data-audio="1"] .podcast-progress .podcast-seek::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--ember-accent, var(--orange));
  box-shadow:0 1px 4px #0002;
}
.post[data-audio="1"] .podcast-progress .podcast-seek::-moz-range-thumb {
  width:12px;
  height:12px;
  border:0;
  border-radius:50%;
  background:var(--ember-accent, var(--orange));
  box-shadow:0 1px 4px #0002;
}
@media (max-width:560px) {
  .post[data-audio="1"] .podcast-progress { gap:6px; font-size:10px; }
  .post[data-audio="1"] .podcast-progress span { min-width:32px; }
}