/* ====== Base / Theme ====== */
/* Let the UA know we support both for built-in controls */
:root { color-scheme: light dark; }

/* THEME: Light (default) */
:root{
--bg: #ffffff;
--fg: #0f172a;
--muted: #475569;
--soft: #e2e8f0;
--accent: #111827;
--pill: #0f172a;
--pill-bg: #e5e7eb;
--pill-active: #111827;
--pill-active-bg: #d1d5db;
--link: #111827;
--link-hover: #fc4747;
--brand: #111827;
--badge: #f1f5f9;
--shadow: 0 6px 24px rgba(15, 23, 42, .08);
}

/* THEME: Dark */
html[data-theme="dark"]{
--bg:#0b1020;
--fg:#e5e7eb;
--muted:#9ca3af;
--soft:#1f2937;
--accent:#f8fafc;
--pill:#f9fafb;
--pill-bg:#111827;
--pill-active:#0b1020;
--pill-active-bg:#e5e7eb;
--link:#e5e7eb;
--link-hover: #fc4747;
--brand:#f8fafc;
--badge:#0f172a;
--shadow: 0 8px 28px rgba(2,6,23,.6);
}

/* THEME: Auto -> we only set a flag; JS will keep html[data-theme="auto"] and mirror system with [data-theme-active] */
@media (prefers-color-scheme: dark) {
html[data-theme="auto"]{
    /* mirror dark when OS is dark */
    --bg:#0b1020;
    --fg:#e5e7eb;
    --muted:#9ca3af;
    --soft:#1f2937;
    --accent:#f8fafc;
    --pill:#f9fafb;
    --pill-bg:#111827;
    --pill-active:#0b1020;
    --pill-active-bg:#e5e7eb;
    --link:#e5e7eb;
    --link-hover:#fc4747;
    --brand:#f8fafc;
    --badge:#0f172a;
    --shadow: 0 8px 28px rgba(2,6,23,.6);
}
}

/* Toggle styling */
.theme-toggle{
display:flex; gap:.35rem; align-items:center;
border:1px solid var(--soft); padding:.25rem; border-radius:.75rem; background:var(--bg);
}
.theme-btn{
appearance:none; border:1px solid transparent; background:transparent; color:var(--fg);
font: 600 .85rem/1 ui-sans-serif, system-ui; padding:.35rem .6rem; border-radius:.55rem;
cursor:pointer;
}
.theme-btn[aria-pressed="true"]{
background: var(--badge);
border-color: var(--soft);
}
.theme-btn:focus-visible{ outline:2px solid var(--link-hover); outline-offset:2px; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color: var(--fg);
    background: var(--bg);
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* ====== Top bar ====== */
.topbar {
    position: sticky; top: 0; z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--soft);
    box-shadow: var(--shadow);
}
.topbar-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: .65rem 1rem;
}
.brand { font-weight: 800; letter-spacing:.5px; color: var(--brand); }
.tagline { font-size:.85rem; color: var(--muted); margin-left:.5rem; }
.nav-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.pill {
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--soft);
    background: var(--pill-bg);
    color: var(--pill);
    padding: .35rem .7rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .9rem;
    transition: transform .08s ease;
    white-space: nowrap;
}
.pill:hover { transform: translateY(-1px); }
.pill.active {
    background: var(--pill-active-bg);
    color: var(--pill-active);
    border-color: transparent;
    box-shadow: var(--shadow);
}

/* ====== Layout ====== */
.wrap { max-width: var(--maxw); margin: 1.2rem auto; padding: 0 1rem; }
.ticker {
    display: grid; grid-template-columns: auto 1fr; gap:.75rem;
    align-items: baseline; border: 1px solid var(--soft);
    padding:.5rem .75rem; border-radius: .75rem; background: var(--badge);
}
.ticker b { font-size:.8rem; letter-spacing:.08em; text-transform: uppercase; color: var(--muted); }
.ticker a { margin-right:1rem }

.grid {
    display: grid;
    grid-template-columns: 1fr minmax(0, 560px) 320px; /* L | Center | R */
    gap: 1.2rem;
    margin-top: 1rem;
}

/* ====== Grid placement helpers ====== */
.grid > .left  { grid-column: 1; }
.grid > .main  { grid-column: 2; }
.grid > .aside { grid-column: 3; }

/* ====== Breakpoints ====== */
@media (max-width: 1100px){
  /* two columns: left + main; aside spans full width below */
  .grid{ grid-template-columns: 1fr minmax(0, 520px); }
  .grid > .aside{ grid-column: 1 / -1; order: 3; }
}

@media (max-width: 800px){
  /* one column: MAIN first, then headlines, then aside */
  .grid{ grid-template-columns: 1fr; }
  .grid > .main  { order: 1; grid-column: 1; }
  .grid > .left  { order: 2; grid-column: 1; }
  .grid > .aside { order: 3; grid-column: 1; }
  .grid > .main  { order: 1; }
  .grid > .left  { order: 2; }
  .grid > .aside { order: 3; }
}

/* ====== Columns / Lists ====== */
.col { border: 1px solid var(--soft); border-radius: .9rem; padding: .6rem .8rem; background: var(--bg); }
.section-title {
    font-size:.8rem; letter-spacing:.08em; text-transform: uppercase; color: var(--muted);
    margin: .2rem 0 .6rem;
}
.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li {
    padding:.4rem 0;
    border-top: 1px dashed var(--soft);
    display: flex; gap:.5rem; align-items: baseline;
}
.linklist li:first-child { border-top: 0; }
.tag { font-size:.72rem; padding:.12rem .45rem; border-radius:.5rem; border:1px solid var(--soft); color: var(--muted); }
.timestamp { font-size:.72rem; color: var(--muted); margin-left:auto; }

/* ====== Main Headline ====== */
.hero {
    border: 1px solid var(--soft);
    border-radius: .9rem;
    padding: 1rem 1.2rem;
    background: var(--bg);
    box-shadow: var(--shadow);
}
.hero h1 {
    margin: .2rem 0 .4rem;
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    line-height: 1.15;
    letter-spacing:.2px;
    color: var(--accent);
}
.hero .meta { color: var(--muted); font-size:.9rem; margin-bottom:.5rem; }
.hero .deck { max-width: var(--reading); color: var(--fg); }

/* ====== Book module ====== */
.book {
    position: sticky; top: 5rem;
    border: 1px solid var(--soft);
    border-radius: .9rem; background: var(--bg);
    padding: .9rem;
    box-shadow: var(--shadow);
}
.book h3 { margin:.1rem 0 .4rem; font-size:1rem }
.book .cover {
    width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius:.5rem;
    border: 1px solid var(--soft);
    margin-bottom:.6rem;
}
.book .buy { display:block; text-align:center; font-weight:700; padding:.5rem .8rem;
    border-radius:.65rem; border:1px solid var(--soft); background: var(--badge); }
.book .note { color: var(--muted); font-size:.78rem; margin-top:.5rem }

/* ====== Utility (hide/show via filtering) ====== */
.hidden { display: none !important; }

.lang-switcher select{
  padding:.25rem .5rem;
  border:1px solid var(--soft);
  border-radius:.5rem;
  background:var(--bg);
  color:var(--fg);
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Footer */
footer { color: var(--muted); font-size:.85rem; padding:2rem 0; text-align:center; }