/* OnerightAI · Maxims — shared stylesheet (article pages + listing page).
   Themes: light (default) and dark (Markets navy + yellow accent) via <html data-theme="dark">.
   Text size: <html data-font="s|m|l"> scales everything set in rem. */
:root { --bg:#ffffff; --ink:#1f2328; --head:#16233b; --muted:#6b7280; --line:#e5e7eb; --link:#1d4f91; --link-line:#9db4d6;
        --soft:#f8fafc; --card:#ffffff; --chip:#eef2f7; --chip-ink:#16233b; --accent:#16233b; --accent-ink:#ffffff;
        --box-line:#cbd5e1; --dek:#4b5563; color-scheme: light; }
html[data-theme="dark"] { --bg:#0a1024; --ink:#e3e7f1; --head:#ffffff; --muted:#9aa4bb; --line:#1e2848; --link:#ffd666; --link-line:#7d6a2e;
        --soft:#121a35; --card:#111935; --chip:#18234a; --chip-ink:#d8def0; --accent:#ffd54a; --accent-ink:#0a1024;
        --box-line:#2a3560; --dek:#b9c1d6; color-scheme: dark; }
html { font-size:17px; -webkit-text-size-adjust:100%; }
html[data-font="s"] { font-size:15px; }
html[data-font="l"] { font-size:19.5px; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--ink); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased; transition: background-color .2s, color .2s; }
a { color:var(--link); text-decoration:underline; text-decoration-color:var(--link-line); text-underline-offset:2px; }
a:hover { text-decoration-color:var(--link); }
.wrap { max-width:720px; margin:0 auto; padding:0 20px; }

/* --- site header / footer (replaceable partials) --- */
header.site { border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:10; }
header.site .wrap { max-width:1080px; display:flex; align-items:center; min-height:56px; gap:16px; }
.brand { font-weight:700; font-size:18px; color:var(--head); text-decoration:none; letter-spacing:-.01em; }
.crumbs { font-size:14px; color:var(--muted); margin-right:auto; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--head); }
footer.site { border-top:1px solid var(--line); margin-top:24px; }
footer.site .wrap { max-width:1080px; padding:20px; font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
footer.site a { color:var(--muted); }

/* --- reader controls (self-contained; move into the real header when integrating) --- */
.reader-controls { display:flex; align-items:center; gap:10px; }
.reader-controls .sizes { display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.reader-controls button { font:inherit; color:var(--muted); background:transparent; border:0; cursor:pointer; line-height:1; }
.reader-controls .sizes button { padding:6px 9px; font-weight:600; }
.reader-controls .sizes button[data-font="s"] { font-size:12px; }
.reader-controls .sizes button[data-font="m"] { font-size:14px; }
.reader-controls .sizes button[data-font="l"] { font-size:16.5px; }
.reader-controls .sizes button[aria-pressed="true"] { background:var(--chip); color:var(--head); }
.reader-controls .theme { border:1px solid var(--line); border-radius:999px; padding:6px 13px; font-size:13px; font-weight:600; }
.reader-controls button:hover { color:var(--head); }
.reader-controls button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.chip { display:inline-block; font-size:13px; line-height:1.3; padding:5px 11px; border-radius:999px; background:var(--chip);
        color:var(--chip-ink); text-decoration:none; border:1px solid transparent; white-space:nowrap; }
.chip:hover { border-color:var(--box-line); }
.chip.primary { background:var(--accent); color:var(--accent-ink); }
.chip.person { background:transparent; border-color:var(--box-line); }

/* --- article --- */
.article { padding:28px 20px 40px; }
.tagrow { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:6px; }
.article h1 { font-size:clamp(1.65rem, 4.6vw, 2.35rem); line-height:1.15; letter-spacing:-.015em; color:var(--head);
              text-align:center; margin:14px 0 14px; }
.byline { text-align:center; font-size:.82rem; color:var(--muted); margin:0 0 4px; }
.btn-pdf { display:inline-block; margin-left:8px; padding:3px 12px; border:1px solid var(--head); border-radius:6px;
           color:var(--head); font-weight:600; text-decoration:none; font-size:.8rem; }
.btn-pdf:hover { background:var(--head); color:var(--bg); }
.maxim { font-size:.92rem; border-left:3px solid var(--accent); padding:2px 0 2px 14px; margin:26px 0 14px; }
.dek { font-size:1.18rem; line-height:1.5; color:var(--dek); margin:0 0 30px; }
.article p { margin:0 0 1.06em; }
.article h2, .article h3 { font-size:1.35rem; line-height:1.3; color:var(--head); margin:2.4rem 0 .7rem; letter-spacing:-.01em; }
.article ol, .article ul { padding-left:24px; margin:0 0 1.2rem; }
.article li { margin-bottom:.6rem; }
.article table { border-collapse:collapse; width:100%; font-size:.88rem; margin:0 0 1.2rem; }
.article th, .article td { border:1px solid var(--box-line); padding:8px 10px; text-align:left; vertical-align:top; }
.article th { background:var(--soft); color:var(--head); }
.onething { background:var(--soft); border:1px solid var(--box-line); border-left:4px solid var(--accent); border-radius:4px;
            padding:16px 20px; margin:30px 0; }
.onething p { margin:0 !important; }
.h { font-size:1.06rem; font-weight:700; color:var(--head); margin:2.3rem 0 .6rem; }
.h.small { font-size:.9rem; margin:1.5rem 0 .35rem; }
.sources { font-size:.82rem; line-height:1.5; color:var(--ink); opacity:.9; padding-left:20px; }
.sources li { margin-bottom:.4rem; }
.author { font-size:.88rem; color:var(--muted); margin-top:1.5rem !important; }
.disclaimer { font-size:.74rem; line-height:1.6; color:var(--muted); }
.back { margin-top:2rem; font-size:.9rem; }

/* --- listing --- */
.listing { max-width:1080px; padding:34px 20px 40px; }
.listing h1 { font-size:clamp(1.65rem, 4vw, 2.25rem); color:var(--head); margin:0 0 8px; letter-spacing:-.015em; line-height:1.2; }
.listing .intro { color:var(--dek); max-width:680px; margin:0 0 22px; }
.filters { display:grid; grid-template-columns:auto 1fr; gap:10px 14px; align-items:start; margin:0 0 26px; }
.filters .label { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-top:7px; }
.filters .row { display:flex; flex-wrap:wrap; gap:8px; }
.filters .chip { cursor:pointer; font:inherit; font-size:13px; }
.filters .chip[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }
.filters .chip[disabled] { opacity:.45; cursor:default; }
.filters .n { opacity:.7; margin-left:4px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.card { border:1px solid var(--line); border-radius:10px; padding:16px 18px; background:var(--card); display:flex; flex-direction:column; gap:8px; }
.card:hover { border-color:var(--box-line); }
.card .no { font-size:11.5px; color:var(--muted); letter-spacing:.06em; }
.card h2 { font-size:1.06rem; line-height:1.3; margin:0; letter-spacing:-.005em; }
.card h2 a { color:var(--head); text-decoration:none; }
.card h2 a::after { content:""; }
.card h2 a:hover { text-decoration:underline; }
.card .mx { font-size:.86rem; color:var(--dek); margin:0; font-style:italic; }
.card .by { font-size:.82rem; color:var(--muted); margin:auto 0 0; }
.card .by a { color:var(--muted); text-decoration:none; }
.card .by a:hover { color:var(--head); }
.empty { color:var(--muted); }
@media (max-width:640px) { .crumbs { display:none; } .brand { margin-right:auto; } .filters { grid-template-columns:1fr; }
                           .filters .chip[disabled] { display:none; }
                           .filters .label { padding-top:0; } }
@media print { header.site, footer.site, .reader-controls, .btn-pdf { display:none !important; } }

/* ===== Markets section chrome + listing additions ===================== */

/* brand is now the shared inline logo (currentColor, adapts to theme) */
.brand { display:flex; align-items:center; }
.brand .logo-mark { height:22px; width:auto; display:block; color:var(--head); }

/* --- featured carousel --- */
.carousel { margin:0 0 30px; }
.carousel .frame { position:relative; overflow:hidden; border:1px solid var(--line);
                   border-radius:12px; background:var(--card); }
.carousel .track { display:flex; transition:transform .35s ease; }
.carousel .slide { flex:0 0 100%; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); }
.carousel figure { margin:0; background:var(--soft); }
.carousel img { display:block; width:100%; height:100%; aspect-ratio:16/9; object-fit:cover; }
.carousel .body { padding:18px 20px 20px; display:flex; flex-direction:column;
                  gap:7px; justify-content:center; min-width:0; }
.carousel .no { font-size:11.5px; letter-spacing:.06em; color:var(--muted); }
.carousel h3 { font-size:1.18rem; line-height:1.28; margin:0; letter-spacing:-.008em; }
.carousel h3 a { color:var(--head); text-decoration:none; }
.carousel h3 a:hover { text-decoration:underline; }
.carousel .mx { font-size:.86rem; font-style:italic; color:var(--dek); margin:0; }
.carousel .by { font-size:.8rem; color:var(--muted); margin:0; }
.carousel .go { font-size:.84rem; font-weight:600; color:var(--link); margin-top:2px; }
.carousel .nav { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px; }
.carousel .arrow { width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
                   background:transparent; color:var(--muted); font:inherit; cursor:pointer;
                   display:grid; place-items:center; flex:none; }
.carousel .arrow:hover { color:var(--head); border-color:var(--box-line); }
.carousel .dots { display:flex; gap:7px; }
.carousel .dots button { width:8px; height:8px; padding:0; border-radius:50%; border:0;
                         background:var(--box-line); cursor:pointer; }
.carousel .dots button[aria-current="true"] { background:var(--accent); }
@media (min-width:720px) { .carousel .slide { grid-template-columns:55% 1fr; }
                           .carousel .body { padding:22px 26px; } }

/* --- search --- */
.search { position:relative; max-width:460px; margin:0 0 14px; }
.search input { width:100%; font:inherit; font-size:.94rem; padding:10px 38px 10px 15px;
                border:1px solid var(--line); border-radius:999px;
                background:var(--card); color:var(--ink); }
.search input::placeholder { color:var(--muted); }
.search input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.search .clear { position:absolute; right:6px; top:50%; transform:translateY(-50%);
                 width:28px; height:28px; border:0; border-radius:50%; background:transparent;
                 color:var(--muted); font:inherit; font-size:15px; cursor:pointer; }
.search .clear:hover { color:var(--head); }
.search .clear[hidden] { display:none; }
.count { font-size:.82rem; color:var(--muted); margin:0 0 16px; }

/* --- grid additions --- */
.card .dk { font-size:.83rem; line-height:1.45; color:var(--muted); margin:0;
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.alsorow { grid-column:1/-1; display:flex; align-items:center; gap:12px; margin:14px 0 0;
           font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.alsorow::before, .alsorow::after { content:""; flex:1; height:1px; background:var(--line); }
.alsorow[hidden] { display:none; }

/* --- maxim authors --- */
.authors { margin:40px 0 0; padding-top:28px; border-top:1px solid var(--line); }
.authors h2 { font-size:1.06rem; color:var(--head); margin:0 0 6px; letter-spacing:-.01em; }
.authors .note { font-size:.8rem; color:var(--muted); max-width:620px; margin:0 0 14px; }
.authors ul { list-style:none; padding:0; margin:0;
              display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:0 26px; }
.authors li { display:flex; align-items:baseline; gap:10px; padding:9px 0;
              border-bottom:1px solid var(--line); }
.authors .nm { flex:1; min-width:0; font:inherit; font-weight:600; color:var(--head);
               background:none; border:0; padding:0; text-align:left; cursor:pointer; }
.authors .nm:hover { text-decoration:underline; }
.authors .ct { font-size:.8rem; color:var(--muted); white-space:nowrap; }
.authors .wk { font-size:.78rem; white-space:nowrap; }

/* --- back to top --- */
.totop { position:fixed; right:16px; bottom:16px; width:44px; height:44px; border-radius:50%;
         border:1px solid var(--box-line); background:var(--card); color:var(--head);
         display:grid; place-items:center; cursor:pointer; z-index:20;
         opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s ease;
         box-shadow:0 2px 10px rgba(0,0,0,.14); }
.totop.show { opacity:1; visibility:visible; }
.totop:hover { border-color:var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .carousel .track { transition:none; }
  .totop { transition:none; }
}
@media print { .carousel, .search, .count, .authors, .totop { display:none !important; } }

/* --- listing: supplied title + introduction --- */
.listing .lede { font-size:1.12rem; font-weight:700; color:var(--head);
                 max-width:680px; margin:0 0 14px; line-height:1.4; }
.listing .intro p { margin:0 0 12px; }
.listing .intro .edit-note { font-size:.82rem; font-style:italic; color:var(--muted); margin:0; }
.listing .intro { margin-bottom:28px; }

/* Category of the slide's artwork. The image itself is alt="" — this line
   carries the meaning instead, for every reader rather than only some. */
.carousel .cat { font-size:.74rem; letter-spacing:.07em; text-transform:uppercase;
                 color:var(--muted); margin:0; }

/* The back-to-top button is fixed bottom-right, which is exactly where the
   footer's link row ends. Reserve space so it never sits on top of them. */
footer.site .wrap { padding-bottom:64px; }

/* The empty-topic chip is kept deliberately, as a signal of what is coming.
   The base stylesheet hid disabled chips below 640px, which would have made
   that choice true only on desktop. */
@media (max-width:640px) { .filters .chip[disabled] { display:inline-block; } }

/* Article chips are labels, not links — no hover affordance that suggests
   otherwise. The breadcrumb and "All maxims" are the way back. */
.tagrow .chip:hover { border-color:transparent; }
.tagrow .chip.person:hover { border-color:var(--box-line); }

/* Intro runs the full width of the listing rather than two thirds of it. */
.listing .lede, .listing .intro { max-width:none; }

/* ===== list / grid toggle ============================================== */
.viewbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; }
.viewbar .count { margin:0; }
.viewbar .count[hidden] + .viewtoggle { margin-left:auto; }
.viewtoggle { display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; flex:none; }
.viewtoggle button { font:inherit; font-size:12.5px; font-weight:600; padding:6px 13px;
                     border:0; background:transparent; color:var(--muted); cursor:pointer; }
.viewtoggle button:hover { color:var(--head); }
.viewtoggle button[aria-pressed="true"] { background:var(--chip); color:var(--head); }

/* Whole card is the link target. The hook was already in the stylesheet. */
.card { position:relative; }
.card h2 a::after { content:""; position:absolute; inset:0; }
.card .by a { position:relative; z-index:1; }

/* List: one full-width row per maxim. Stays a CSS grid so the order-based
   primary-first sort and the full-width divider keep working. */
.grid[data-view="list"] { grid-template-columns:1fr; gap:0; }
.grid[data-view="list"] .card { display:grid; grid-template-columns:58px 1fr; gap:3px 14px;
      border:0; border-bottom:1px solid var(--line); border-radius:0;
      padding:15px 4px; background:transparent; }
.grid[data-view="list"] .card:hover { background:var(--soft); }
.grid[data-view="list"] .card .no { grid-column:1; grid-row:1; padding-top:4px; }
.grid[data-view="list"] .card h2 { grid-column:2; grid-row:1; font-size:1.02rem; }
.grid[data-view="list"] .card .mx { grid-column:2; grid-row:2; }
.grid[data-view="list"] .card .dk { display:none; }
.grid[data-view="list"] .card .by { grid-column:2; grid-row:3; margin:2px 0 0; }
.grid[data-view="list"] .alsorow { margin:18px 0 8px; }
@media (max-width:520px) {
  .grid[data-view="list"] .card { grid-template-columns:1fr; gap:3px; }
  .grid[data-view="list"] .card .no,
  .grid[data-view="list"] .card h2,
  .grid[data-view="list"] .card .mx,
  .grid[data-view="list"] .card .by { grid-column:1; }
  .grid[data-view="list"] .card .no { grid-row:1; padding-top:0; }
}

/* ===== carousel controls, on the artwork =============================== */
.carousel .frame { position:relative; }
/* Box matching the image region: full width and 16:9 on phones, the left
   column at full height from 720px up. */
.carousel .nav { position:absolute; left:0; top:0; width:100%; aspect-ratio:16/9;
                 pointer-events:none; margin:0; display:block; }
@media (min-width:720px) { .carousel .nav { width:55%; height:100%; aspect-ratio:auto; } }
.carousel .arrow { position:absolute; top:50%; transform:translateY(-50%); pointer-events:auto;
                   width:34px; height:34px; border-radius:50%; flex:none;
                   background:rgba(10,16,36,.55); color:#fff; border:1px solid rgba(255,255,255,.4);
                   backdrop-filter:blur(2px); }
.carousel .arrow:hover { background:rgba(10,16,36,.78); color:#fff; border-color:#fff; }
.carousel .arrow.prev { left:10px; }
.carousel .arrow.next { right:10px; }
.carousel .dots { position:absolute; left:0; right:0; bottom:10px; justify-content:center;
                  pointer-events:auto; }
.carousel .dots button { width:7px; height:7px; background:rgba(255,255,255,.55);
                         box-shadow:0 0 0 1px rgba(10,16,36,.35); }
.carousel .dots button[aria-current="true"] { background:#fff; }
/* Keeps the dots readable over a pale image. */
.carousel figure::after { content:""; position:absolute; left:0; right:0; bottom:0; height:46px;
                          background:linear-gradient(to top, rgba(10,16,36,.34), transparent);
                          pointer-events:none; }
.carousel figure { position:relative; }

/* Footer is centred: one disclosure line, then the links. */
footer.site .wrap { flex-direction:column; align-items:center; justify-content:center;
                    text-align:center; gap:6px; padding-bottom:64px; }

/* List view puts the author on the maxim line and drops the "Maxim by"
   label — two lines per row instead of three. Grid view keeps its own line. */
/* \A0 is a non-breaking space: a hex escape eats the whitespace that ends it,
   so a plain space here would vanish, and the nbsp also stops the dash being
   stranded at the end of a wrapped line. */
.grid[data-view="list"] .card .mx::after { content:" \2014\A0" attr(data-by);
                                           font-style:normal; color:var(--muted); }
.grid[data-view="list"] .card .by { display:none; }
.grid[data-view="list"] .card { padding:13px 4px; }

/* Section headings below the grid, one step up from where they were. */
.authors h2, .purpose h2 { font-size:1.2rem; }

/* Purpose reads at normal body size, unlike the authors note above it,
   which is a one-line caveat rather than something to sit and read. */
.purpose { margin:36px 0 0; padding-top:28px; border-top:1px solid var(--line); }
.purpose p { margin:0 0 12px; }
.purpose p:last-child { margin-bottom:0; }