/*
 * MarketNote Editorial System 2026
 * Token-first native CSS, informed by shadcn/ui, 21st.dev Joined Pagination,
 * and the Figma Simple Design System navigation/pagination primitives.
 */
:root{
  --mn-canvas:#f3f0e8;--mn-paper:#fbfaf6;--mn-surface:#fff;--mn-ink:#14201c;
  --mn-ink-soft:#3d4a44;--mn-muted:#6b756f;--mn-line:#d8d3c8;--mn-line-strong:#bdb7ab;
  --mn-forest:#123e31;--mn-forest-2:#0b2b22;--mn-copper:#a85f35;--mn-green:#18745b;--mn-red:#b44742;
  --mn-serif:"Noto Serif SC","Songti SC","STSong",Georgia,serif;
  --mn-sans:"Noto Sans SC","DM Sans",system-ui,sans-serif;
  --mn-mono:"DM Sans",ui-monospace,SFMono-Regular,Menlo,monospace;
  --mn-radius:4px;--mn-control:6px;--mn-shadow:0 18px 42px rgba(30,36,32,.1)
}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{background:linear-gradient(rgba(20,32,28,.024) 1px,transparent 1px) 0 0/100% 32px,var(--mn-canvas);color:var(--mn-ink);font-family:var(--mn-sans);text-rendering:optimizeLegibility}
body:before{content:"";position:fixed;inset:0 0 auto;z-index:110;height:2px;pointer-events:none;background:linear-gradient(90deg,var(--mn-copper),var(--mn-forest) 48%,transparent 82%)}
::selection{background:#cde7dc;color:#0a2c22}
a,button,input,textarea,select{transition:color .16s,background-color .16s,border-color .16s,opacity .16s,transform .16s}
:focus-visible{outline:3px solid rgba(168,95,53,.34);outline-offset:3px}
.shell{width:min(1180px,calc(100% - 48px))}
.kicker,.eyebrow,.hero-research-label,.option-card-label{color:var(--mn-copper)!important;font-family:var(--mn-mono);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.button{min-height:40px;border-radius:var(--mn-control);box-shadow:none;font-weight:750}
.button.primary{border-color:var(--mn-forest);background:var(--mn-forest);color:#fff}
.button.primary:hover{border-color:var(--mn-forest-2);background:var(--mn-forest-2);transform:translateY(-1px)}
.button.outline,.button.ghost{border-color:var(--mn-line-strong);background:transparent}
.button.outline:hover,.button.ghost:hover{border-color:var(--mn-forest);background:rgba(18,62,49,.055);color:var(--mn-forest)}

/* Publication masthead */
.site-header{position:sticky;top:0;z-index:70;border-bottom:1px solid var(--mn-line);background:rgba(251,250,246,.96);box-shadow:none;backdrop-filter:blur(14px)}
.topline+.site-header{top:38px}
.site-header .header-top,.site-header .header-bottom{width:min(1180px,calc(100% - 48px))}
.header-top{min-height:76px;padding:11px 0}.site-header.is-condensed .header-top{min-height:64px}
.brand-logo{width:220px;height:auto}
.header-search{max-width:430px;border:1px solid var(--mn-line);border-radius:var(--mn-control);background:var(--mn-surface);box-shadow:none}
.header-search input{min-width:0}.header-search button{border-radius:4px;background:var(--mn-forest)}
.header-bottom{min-height:43px;border-top:1px solid rgba(216,211,200,.68)}.header-bottom nav{gap:2px}
.header-bottom nav a{position:relative;padding:12px 15px;border-radius:0;font-size:13px}
.header-bottom nav a:after{content:"";position:absolute;right:15px;bottom:6px;left:15px;height:2px;background:var(--mn-copper);transform:scaleX(0);transform-origin:left;transition:transform .16s}
.header-bottom nav a:hover:after,.header-bottom nav a.active:after{transform:scaleX(1)}

/* Homepage */
.hero{min-height:auto;grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr);gap:clamp(40px,6vw,84px);padding-top:76px;padding-bottom:76px}
.hero-copy{align-self:center;padding-right:0}.hero-copy:after{display:none}
.hero h1{max-width:670px;margin:20px 0 22px;font-family:var(--mn-serif);font-size:clamp(48px,4.2vw,62px);font-weight:800;line-height:1.07;letter-spacing:-.045em}
.hero h1 em{color:var(--mn-forest);font-style:normal}.hero-copy>p{max-width:600px;color:var(--mn-ink-soft);font-size:16px;line-height:1.9}
.hero-actions{gap:10px;margin-top:30px}.hero-actions .button.text{border-radius:0}.trust-row{border-top:1px solid var(--mn-line);padding-top:20px}.truth-mark{border-radius:50%;background:var(--mn-forest)}
.hero-panel,.hero-research-panel{border:1px solid var(--mn-line-strong)!important;border-radius:var(--mn-radius)!important;background:var(--mn-paper)!important;box-shadow:var(--mn-shadow)!important}
.hero-research-panel:before{display:none}.hero-research-panel .panel-head{border-bottom-color:var(--mn-line)!important;background:var(--mn-forest)!important;color:#fff!important}
.hero-research-panel .panel-head .muted{color:#b9cdc5!important}.hero-research-card{max-width:none;padding:34px 36px 28px}
.hero-research-label{border-radius:2px;background:transparent!important;padding:0}
.hero-research-card h2{max-width:650px;margin:14px 0 12px;color:var(--mn-ink)!important;font-family:var(--mn-serif);font-size:clamp(30px,3vw,43px);line-height:1.18;letter-spacing:-.035em}
.hero-research-card p{color:var(--mn-ink-soft)!important;font-size:14px}
.hero-research-metrics{gap:0;border-block:1px solid var(--mn-line)}
.hero-research-metrics div{border:0!important;border-right:1px solid var(--mn-line)!important;border-radius:0;background:transparent!important}.hero-research-metrics div:last-child{border-right:0!important}
.hero-research-logic{border-radius:0!important;background:transparent!important}
.hero-module-row{gap:0;padding:0;border-top:1px solid var(--mn-line)}
.hero-module-row a{border:0!important;border-right:1px solid var(--mn-line)!important;border-radius:0!important;background:var(--mn-surface)!important;box-shadow:none}.hero-module-row a:last-child{border-right:0!important}
.signal-strip{border-block:1px solid var(--mn-line);background:#ebe6da}.signal-label{border-radius:2px;background:var(--mn-copper)}
.section{padding-top:92px;padding-bottom:92px}.section-heading{margin-bottom:30px;padding-bottom:17px;border-bottom:1px solid var(--mn-line-strong)}
.section-heading h2,.journal-copy h2,.newsletter h2{font-family:var(--mn-serif);font-size:clamp(34px,4vw,50px);letter-spacing:-.035em}
.filter-tabs{border:1px solid var(--mn-line);border-radius:var(--mn-control);background:transparent;padding:3px}.filter-tabs button{border-radius:3px}
.market-view-command,.feature-card,.compact-card,.more-insight,.discussion-list,.poll-card,.trade-card{border:1px solid var(--mn-line);border-radius:var(--mn-radius)!important;background:var(--mn-paper);box-shadow:none!important}
.market-view-command{position:relative;overflow:hidden}.market-view-command:before{content:"DAILY RESEARCH NOTE";position:absolute;top:0;right:0;padding:7px 10px;background:var(--mn-copper);color:#fff;font:800 9px var(--mn-mono);letter-spacing:.14em}
.editorial-grid{gap:22px}.feature-card{overflow:hidden}.feature-content h3,.compact-card h3,.more-insight h3{font-family:var(--mn-serif);letter-spacing:-.02em}
.compact-card:hover,.more-insight:hover{border-color:var(--mn-line-strong);transform:translateY(-2px)}
.tag,.command-tags span,.board-view-meta span{border:0;border-radius:2px!important;background:#dcebe4!important;color:#174b3b!important;font:700 10px var(--mn-mono)}
.options-section,.dark-section{position:relative;background:var(--mn-forest-2)}
.options-section:before,.dark-section:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 40px,linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/40px 100%}
.option-pulse-card,.strategy-library,.option-journal-panel,.trade-card{border-radius:var(--mn-radius)!important;box-shadow:none!important}.strategy-chips button{border-radius:var(--mn-control)}
.newsletter{border-block:1px solid var(--mn-line);background:#e7e0d2}footer{border-top:3px solid var(--mn-copper);background:#0b211a}

/* Complete board: compact Navigation + Joined Pagination */
.board-shell{padding-top:64px}.board-hero{align-items:end;padding:58px 0 28px}
.board-hero h1,.search-hero h1,.market-hero h1{font-family:var(--mn-serif);font-size:clamp(42px,5vw,64px);font-weight:800;letter-spacing:-.045em}
.board-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;margin:0 0 16px;padding:18px 0;border-bottom:1px solid var(--mn-line)}
.board-filter{display:flex;width:100%;min-width:0;max-width:100%;flex-wrap:wrap;gap:6px;overflow:visible;border:0;padding:0}
.board-filter button{min-height:34px;border:1px solid var(--mn-line);border-radius:3px;background:transparent;padding:6px 10px;color:var(--mn-ink-soft);white-space:nowrap}
.board-filter button:hover{border-color:var(--mn-forest);color:var(--mn-forest)}.board-filter button.active{border-color:var(--mn-forest);background:var(--mn-forest);color:#fff}
.board-list{gap:0;border-top:1px solid var(--mn-line-strong)}
.board-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;border:0;border-bottom:1px solid var(--mn-line);border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:28px 4px}
.board-card:before{content:"";position:absolute;inset:0 auto 0 -14px;width:3px;background:var(--mn-copper);opacity:0}.board-card:hover{background:rgba(255,255,255,.42)!important;transform:none}.board-card:hover:before{opacity:1}
.board-card h2{margin:9px 0 8px;font-family:var(--mn-serif);font-size:clamp(22px,2.2vw,29px);letter-spacing:-.025em}.board-card p{max-width:820px;font-size:14px}.board-card footer{border:0}.board-card-actions{align-self:center}
.board-pagination{gap:0;width:max-content;max-width:100%;margin:36px auto 0;border:1px solid var(--mn-line);border-radius:var(--mn-control);overflow:hidden;box-shadow:0 3px 10px rgba(20,32,28,.05)}
.board-pagination button{min-width:40px;height:40px;margin-left:-1px;border:0;border-left:1px solid var(--mn-line);border-radius:0;background:var(--mn-surface);box-shadow:none}
.board-pagination button:first-child{margin-left:0;border-left:0}.board-pagination button:hover:not(:disabled){z-index:1;background:#eeeae1;transform:none}.board-pagination button.active{z-index:2;background:var(--mn-forest);color:#fff}
.board-pagination span{display:grid;place-items:center;min-width:38px;height:40px;border-left:1px solid var(--mn-line);background:var(--mn-surface)}

/* Search + market center */
.search-shell{padding-top:70px}.search-hero{max-width:960px}.search-form{border:1px solid var(--mn-line-strong);border-radius:var(--mn-radius);background:var(--mn-surface);box-shadow:none}
.search-hints button{border-radius:3px;background:transparent}.search-results{gap:0;max-width:1000px;border-top:1px solid var(--mn-line-strong)}
.search-card{border:0;border-bottom:1px solid var(--mn-line);border-radius:0;background:transparent;box-shadow:none;padding:26px 2px}.search-card:hover{background:rgba(255,255,255,.36);box-shadow:none;transform:none}
.search-card-meta span{border-radius:2px}.search-card h2{font-family:var(--mn-serif);font-size:28px}
.feature-shell{padding-top:68px}.market-hero{padding-bottom:32px;border-bottom:1px solid var(--mn-line-strong)}
.market-hero-card,.market-featured,.market-track-panel,.market-score-card,.feature-panel,.market-architecture a{border-radius:var(--mn-radius)!important;box-shadow:none!important}
.market-featured h2,.market-score-card h3,.feature-panel h2{font-family:var(--mn-serif)}

/* Article */
.reading-progress{position:fixed;top:0;left:0;z-index:130;width:0;height:3px;background:var(--mn-copper);transform-origin:left}
.article-shell{padding-top:72px}.article-header{width:min(940px,calc(100% - 48px));text-align:left}
.article-header .back-link{margin-bottom:30px;color:var(--mn-forest);font-weight:700}.article-header .meta.centered,.language-switch{justify-content:flex-start}
.article-header h1{margin:18px 0 20px;font-family:var(--mn-serif);font-size:clamp(44px,5.4vw,72px);font-weight:800;line-height:1.16;letter-spacing:-.045em}
.article-header .dek{max-width:800px;margin:0 0 24px;color:var(--mn-ink-soft);font:400 19px/1.85 var(--mn-serif)}
.followup-callout{display:inline-flex;border:0;border-left:3px solid var(--mn-copper);border-radius:0;background:transparent}.language-switch button{border-radius:3px}
.article-byline{max-width:none;margin:28px 0 44px;padding-block:18px;border-block:1px solid var(--mn-line)}.article-byline>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.round-action{border-radius:4px;background:transparent}
.article-layout{width:min(1080px,calc(100% - 48px));grid-template-columns:190px minmax(0,760px);gap:62px;justify-content:start}.article-rail{display:block!important}
.toc{top:150px;border-left:1px solid var(--mn-line-strong);gap:12px}.toc a{line-height:1.55}
.article-body{color:#2f3d37;font:400 18px/2 var(--mn-serif)}.article-body>p{margin-bottom:28px}
.article-body h2{margin-top:66px;font-family:var(--mn-serif);font-size:32px;line-height:1.45;letter-spacing:-.025em}.article-body h3{font-family:var(--mn-serif)}
.article-body blockquote{border-left:3px solid var(--mn-copper);border-radius:0;background:#e9e4d9;color:#2b3933}
.article-visual-card,.position-card,.attachment-box,.disclaimer,.comment-editor{border-radius:var(--mn-radius)!important;box-shadow:none!important}.numbered-points section>span{color:var(--mn-copper)}
.comments-section{border-top:1px solid var(--mn-line-strong);background:#e9e5dc}.comments-head h2{font-family:var(--mn-serif)}.comment-card{border-color:var(--mn-line)}
.reading-metrics{color:var(--mn-muted);font:500 11px var(--mn-mono)}

/* One restrained reveal effect; content remains readable before observation. */
.js .mn-reveal{opacity:1;transform:translateY(12px)}.js .mn-reveal.is-visible{transform:none;transition:transform .45s}
body.dark{--mn-canvas:#0e1915;--mn-paper:#13231c;--mn-surface:#172921;--mn-ink:#eef5f1;--mn-ink-soft:#c5d0ca;--mn-muted:#94a49c;--mn-line:#2b3d35;--mn-line-strong:#40534a;background:var(--mn-canvas)}
body.dark .site-header{background:rgba(14,25,21,.96)}body.dark .header-search,body.dark .hero-panel,body.dark .hero-research-panel{background:var(--mn-paper)!important}
body.dark .hero-research-card h2,body.dark .hero-research-card p{color:var(--mn-ink)!important}
body.dark .signal-strip,body.dark .newsletter,body.dark .comments-section,body.dark .article-body blockquote{background:#17241e}
body.dark .board-card:hover,body.dark .search-card:hover{background:rgba(255,255,255,.035)!important}body.dark .article-body{color:#ccd7d1}

@media(max-width:1100px){.hero{grid-template-columns:1fr;gap:42px}.hero-copy{max-width:820px}.article-layout{width:min(800px,calc(100% - 48px));grid-template-columns:1fr}.article-rail{display:none!important}}
@media(max-width:900px){
  .shell,.site-header .header-top,.site-header .header-bottom{width:min(100% - 32px,1180px)}.site-header{top:0!important}.topline{display:none}.header-top{min-height:70px}.brand-logo{width:188px}
  .site-header .brand{flex:0 0 188px;width:188px;min-width:188px}.site-header .header-actions{width:auto;min-width:0;margin-left:auto;justify-content:flex-end}
  .board-toolbar{grid-template-columns:1fr}.board-toolbar small{order:-1;padding:0}.board-filter{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;padding-bottom:8px}
}
@media(max-width:700px){
  body{background-image:none}.shell{width:calc(100% - 28px)}.hero{width:calc(100% - 28px);padding-top:44px;padding-bottom:52px}.hero h1{font-size:clamp(40px,12vw,54px)}
  .hero-actions{display:grid}.hero-actions .button{width:100%;justify-content:center}.hero-research-card{padding:26px 20px 22px}.hero-research-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-research-metrics div{padding:11px 8px}
  .hero-module-row{grid-template-columns:1fr}.hero-module-row a{border-right:0!important;border-bottom:1px solid var(--mn-line)!important}.hero-module-row a:last-child{border-bottom:0!important}
  .section{padding-top:64px;padding-bottom:64px}.section-heading{display:block}.section-actions{margin-top:18px}
  .board-shell,.feature-shell,.search-shell{width:calc(100% - 28px);padding-top:34px}.board-hero{padding-top:22px}.board-card{grid-template-columns:1fr;gap:16px;padding:24px 0}
  .board-card-actions{display:grid;grid-template-columns:1fr 1fr}.board-card-actions .button{justify-content:center}.board-pagination{gap:0;overflow-x:auto}.board-pagination button{min-width:36px;height:38px;padding:0 9px}.board-pagination span{min-width:34px;height:38px}
  .search-form{grid-template-columns:1fr}.search-form .button{width:100%}.search-card h2{font-size:24px}.search-card footer{display:grid}
  .article-header,.article-layout{width:calc(100% - 28px)}.article-header{padding-top:10px}.article-header h1{font-size:clamp(36px,10.5vw,49px)}.article-header .dek{font-size:17px}
  .article-byline{align-items:flex-start;gap:18px}.article-byline>div{justify-content:flex-start}.article-body{font-size:17px;line-height:1.95}.article-body h2{margin-top:52px;font-size:27px}
  .mobile-bottom-nav{right:8px;bottom:8px;left:8px;border-radius:8px;background:rgba(251,250,246,.96)}.mobile-bottom-nav a{border-radius:4px}
}
@media(max-width:430px){
  .site-header .header-top{width:calc(100% - 20px)}.site-header .brand{flex-basis:162px;width:162px;min-width:162px}.brand-logo{width:162px}.site-header .header-actions{gap:5px}.site-header .header-actions .button,.site-header .header-actions .icon-button{min-height:36px;padding-inline:9px;font-size:11px}
  .site-header #themeButton,.site-header #authButton,.site-header #loginButton,.site-header .header-actions>.button.primary{display:none!important}
  .hero h1{letter-spacing:-.055em}.hero-research-metrics small{font-size:9px}.hero-research-metrics b{font-size:14px}
  .board-hero h1,.search-hero h1,.market-hero h1{font-size:38px}.board-actions{display:grid;grid-template-columns:1fr 1fr}.board-actions .button{justify-content:center}
  .article-byline{display:grid}.round-action{margin:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.js .mn-reveal{opacity:1;transform:none}}
