/* ChartHorizon — The Weekly Tape
   Cool-newsprint financial-broadsheet theme. Single source of truth for the index and every page.
   Type: Newsreader, self-hosted under /assets/fonts (zero third-party requests). */

@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('/assets/fonts/newsreader.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader'; font-style:italic; font-weight:200 800; font-display:swap;
  src:url('/assets/fonts/newsreader-italic.woff2') format('woff2');
}

:root{
  --paper:#f5f4f1; --ink:#17150f; --gold:#c8a24a; --gold-ink:#7d641e;
  --rule:#ddd9d0; --rule-strong:#17150f; --thead:#ecebe6;
  --muted:#6b6356; --muted-2:#857f74;
  --quote-bg:#efede7; --quote-ink:#4a443a; --card:#fbfbf9;
  --bull:#39744b; --bear:#a8503f;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  max-width:760px; margin:0 auto; padding:0 22px;
  background:var(--paper); color:var(--ink);
  font:18px/1.62 var(--serif);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

/* ---- a11y utilities ---- */
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
.skip-link{position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:20; padding:10px 16px;
  background:var(--ink); color:var(--paper); font:700 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border:none; border-radius:999px; opacity:0; pointer-events:none}
.skip-link:focus-visible{opacity:1; pointer-events:auto; outline:2px solid var(--gold); outline-offset:2px}

/* ---- article typography ---- */
h1{font:600 clamp(34px,4.6vw,42px)/1.1 var(--serif); letter-spacing:-.6px; margin:.55em 0 .12em; text-wrap:balance}
h2{font:650 25px/1.25 var(--serif); letter-spacing:-.2px; margin:1.6em 0 .4em; padding-top:1.1em; border-top:1px solid var(--rule); text-wrap:balance}
/* broadsheet section opener: a short gold tick sits on the hairline that opens each section */
h2::before{content:""; position:absolute; margin-top:-1.1em; width:34px; border-top:2px solid var(--gold)}
h2{position:relative}
p{margin:.75em 0; text-wrap:pretty}
strong{color:var(--ink)}
.dek{color:var(--muted); font-style:italic; font-size:18px; line-height:1.5; margin:.2em 0 1.35em}
a{color:var(--gold-ink); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
a:hover{color:var(--ink); border-bottom-color:var(--gold)}
img{max-width:100%; height:auto; border-radius:6px; margin:18px 0; box-shadow:0 1px 14px rgba(0,0,0,.10)}
table{border-collapse:collapse; width:100%; font:14px/1.45 var(--sans); margin:14px 0; font-variant-numeric:tabular-nums lining-nums}
td,th{border:1px solid var(--rule); padding:8px 12px; text-align:left}
th{background:var(--thead); font-weight:600}
/* read marks for post tables — always paired with a glyph + word, never color alone (Read-Mark Rule) */
.mark-bull{color:var(--bull); font-weight:700}
.mark-bear{color:var(--bear); font-weight:700}
hr{border:none; border-top:1px solid var(--rule); margin:34px 0}
/* broadsheet pull quote: tone fill inside a full hairline — no accent side-stripe */
blockquote{border:1px solid var(--rule); background:var(--quote-bg); padding:12px 18px; margin:20px 0; border-radius:4px; color:var(--quote-ink)}
blockquote p{margin:.3em 0}
.post-disclaimer{font:italic 13px/1.55 var(--sans); color:var(--muted)}

/* ---- broadsheet masthead ---- */
.site-head{padding:38px 0 0; text-align:center}
.site-head .brand{display:inline-flex; align-items:center; gap:13px; text-decoration:none; color:inherit; border:none}
.site-head .mark{flex:none; width:clamp(30px,3.4vw,38px); height:auto}
.site-head .word{font:700 clamp(30px,4.4vw,42px)/1 var(--serif); letter-spacing:.1em; text-transform:uppercase}
.masthead-sub{font:11px/1 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-top:12px}
/* classic broadsheet tramline: a thick rule with a hairline riding 3px beneath it */
.masthead-rule{position:relative; border-top:2.5px solid var(--rule-strong); margin-top:15px}
.masthead-rule::after{content:""; position:absolute; left:0; right:0; top:3px; border-top:1px solid var(--rule-strong)}
.masthead-motto{font:italic 400 14px/1 var(--serif); color:var(--muted); text-align:center; padding:11px 0 1px}
.dateline{display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; padding:10px 0; border-bottom:1px solid var(--rule);
  font:11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; font-variant-numeric:tabular-nums}
.dateline .site-nav{display:flex; gap:16px}
/* padding + negative margin keeps the layout identical while lifting tap targets ≥24px (WCAG 2.5.8) */
.dateline .site-nav a{color:var(--muted); text-decoration:none; border:none; padding:9px 4px; margin:-9px -4px}
.dateline .site-nav a:hover{color:var(--ink)}
.dateline .site-nav a.active,.dateline .site-nav a[aria-current="page"]{color:var(--ink); font-weight:600}
.dateline .edition{margin-left:auto; color:var(--muted)}
.dateline .support{display:inline-flex; align-items:center; gap:6px; color:var(--gold-ink); text-decoration:none; border:none; letter-spacing:.06em; padding:9px 4px; margin:-9px -4px}
.dateline .support svg{width:13px; height:13px; fill:currentColor; flex:none}
.dateline .support:hover{color:var(--ink)}
@media (max-width:560px){
  .site-head .word{font-size:24px}
  .masthead-sub{letter-spacing:.18em}
  .dateline{justify-content:center; gap:8px 14px}
  .dateline .edition{margin-left:0}
}

.site-foot{margin-top:54px; padding:22px 0 46px; border-top:1px solid var(--rule); font:13px/1.62 var(--sans); color:var(--muted)}
.site-foot strong{color:var(--ink)}
.site-foot .legal-links{margin-top:8px}
.site-foot a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--rule)}
.site-foot a:hover{color:var(--ink)}

/* ---- index front page ---- */
.index-standfirst{font:italic 400 19px/1.5 var(--serif); color:var(--muted); margin:1.3em 0 1.7em; max-width:62ch; text-wrap:pretty}
/* section rule: a small caps label riding a strong hairline, broadsheet-style (an h2, so it carries the outline) */
.section-rule{display:flex; align-items:center; gap:14px; margin:0; padding-top:0; border-top:none;
  font:700 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.section-rule::before{content:none}
.section-rule::after{content:""; flex:1; border-top:2px solid var(--rule-strong)}

/* ---- index post list ---- */
.post-list{list-style:none; padding:0; margin:6px 0 0}
.post-list li{padding:20px 0; border-top:1px solid var(--rule)}
.post-list li:first-child{border-top:none}
.post-list .post-date{display:block; font:700 11px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); font-variant-numeric:tabular-nums}
.post-list .post-headline{margin:0}
.post-list .post-link{display:inline-block; margin:.16em 0 0; font:600 25px/1.18 var(--serif); letter-spacing:-.2px; color:var(--ink); border:none; text-wrap:balance}
.post-list .post-link:hover{color:var(--gold-ink)}
.post-list .post-excerpt{margin:.3em 0 0; color:var(--muted)}
/* front-page lead: the most recent post reads as the broadsheet lead story, not a list row */
.post-list li:first-child{padding:16px 0 28px}
.post-list li:first-child .post-link{font-size:clamp(30px,3.8vw,38px); line-height:1.1; letter-spacing:-.5px; margin-top:.1em}
.post-list li:first-child .post-excerpt{font-size:19px; line-height:1.5; max-width:60ch}

/* ---- post body: broadsheet drop cap on the first paragraph ---- */
.post-body>p:first-of-type::first-letter{
  float:left; font:600 64px/48px var(--serif); color:var(--gold-ink);
  padding:4px 9px 0 0;
}

/* ---- legal pages (Impressum / Datenschutz) ---- */
.legal{font-size:15px}
.legal h1{margin:.4em 0 .1em}
.legal h2{font-size:20px; border-top:none; padding-top:0; margin:1.7em 0 .3em}
.legal p{color:var(--muted); margin:.3em 0}
.legal strong{color:var(--ink)}
.legal .ph{color:var(--gold-ink)}
.legal .note{margin:18px 0 30px; padding:14px 18px; border:1px solid color-mix(in srgb,var(--gold) 35%,transparent); border-radius:10px; background:var(--quote-bg); font:13px/1.55 var(--sans); color:var(--muted)}
.legal .note strong{color:var(--gold-ink)}
.legal a.link{color:var(--gold-ink); border-bottom:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.legal a.link:hover{color:var(--ink)}
.legal .back{display:inline-block; margin-top:36px}

/* ---- /dashboard/ — coming-soon notice (broadsheet, no hero-CTA) ---- */
.notice-head{text-align:center; margin-top:.4em}
.kicker{font:700 12px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); margin:0}
.notice-head h1{margin:.16em 0 .1em}
.notice-head .dek{max-width:36ch; margin-left:auto; margin-right:auto}
.notice-rule{width:54px; border-top:2px solid var(--gold); margin:16px auto 0}
.dash-reads{margin:30px 0; padding:18px 18px 20px; border:1px solid var(--rule); border-radius:12px; background:var(--card); text-align:center}
.dash-reads .label{display:block; font:700 11px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:13px}
.dash-reads .fx-chips{justify-content:center}
.dash-close{text-align:center; font-style:italic; color:var(--muted); margin:30px 0 4px; text-wrap:balance}
.dash-close strong{font-style:normal; color:var(--ink)}

/* download block — three platform buttons (active link or "Coming soon" state) */
.dl{margin:34px 0 6px; text-align:center}
.dl-label{display:block; font:700 11px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:15px}
.dl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:440px; margin:0 auto}
.dl-btn{display:flex; flex-direction:column; align-items:center; gap:9px; padding:18px 10px 15px; border:1px solid var(--rule); border-radius:12px; background:var(--card); color:var(--ink); text-decoration:none; transition:border-color .14s, box-shadow .14s, transform .04s}
.dl-os-ico{width:27px; height:27px; fill:var(--ink); transition:fill .14s, opacity .14s}
.dl-os{font:700 15px/1 var(--sans)}
.dl-sub{font:600 10px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap; font-variant-numeric:tabular-nums lining-nums}
/* active state: real download link */
a.dl-btn:hover{border-color:var(--gold); box-shadow:0 2px 10px rgba(23,21,15,.09)}
a.dl-btn:hover .dl-os-ico{fill:var(--gold-ink)}
a.dl-btn:hover .dl-sub{color:var(--gold-ink)}
a.dl-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
a.dl-btn:active{transform:translateY(1px)}
/* coming-soon state: not yet downloadable */
.dl-btn--soon{background:var(--quote-bg); border-style:dashed; cursor:default}
.dl-btn--soon .dl-os-ico{fill:var(--muted-2); opacity:.6}
.dl-btn--soon .dl-os{color:var(--muted)}
.dl-note{font:italic 14px/1.5 var(--serif); color:var(--muted); margin:16px auto 0; max-width:42ch; text-wrap:balance}
/* first-run helper for unsigned builds — collapsed by default, launched state only */
.dl-firstrun{max-width:50ch; margin:16px auto 0; text-align:left; font:14px/1.55 var(--sans); color:var(--muted)}
.dl-firstrun summary{cursor:pointer; text-align:center; font:600 11px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); list-style:none}
.dl-firstrun summary::-webkit-details-marker{display:none}
.dl-firstrun summary::after{content:" ▾"; color:var(--muted-2)}
.dl-firstrun[open] summary::after{content:" ▴"}
.dl-firstrun p{margin:13px 0 8px}
.dl-firstrun ul{margin:0; padding-left:1.15em; list-style:disc}
.dl-firstrun li{margin:5px 0}
.dl-firstrun b{color:var(--ink); font-weight:700}
.dl-firstrun code{font:12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--quote-bg); border:1px solid var(--rule); border-radius:4px; padding:1px 5px}
@media (max-width:420px){ .dl-grid{gap:8px} .dl-btn{padding:14px 6px 12px} .dl-os{font-size:14px} .dl-sub{font-size:9px; letter-spacing:.06em} }

/* dashboard product page — screenshot plates set as plates on the sheet */
.board{margin:30px 0}
.board img{width:100%; margin:0; display:block; border:1px solid var(--rule); border-radius:10px; box-shadow:0 1px 16px rgba(23,21,15,.10)}
.board figcaption{font:italic 15px/1.5 var(--serif); color:var(--muted); text-align:center; margin-top:11px; text-wrap:balance}
/* hero breaks out wider than the 760px column, bounded so it never causes horizontal scroll */
.board-hero{--bleed:clamp(0px, calc((100vw - 716px)/2 - 16px), 160px); margin:26px calc(-1*var(--bleed)) 32px}
.board-hero img{border-radius:12px}
@media (prefers-reduced-motion:no-preference){
  .board img{transition:box-shadow .25s ease}
  .board img:hover{box-shadow:0 6px 30px rgba(23,21,15,.13)}
}

/* ---- FX Map page (/fx/) ---- */
.fxmap{margin:18px 0 6px}
.fx-section-head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px; margin:0 0 14px}
/* an h2 visually set as the board's small-caps label — resets the global h2 chrome */
.fx-section-title{font:700 13px/1.2 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin:0; padding-top:0; border-top:none}
.fx-section-title::before{content:none}
.fxmap-meta{font:11.5px/1.4 var(--sans); letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.fx-board,.fx-pairs{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.fx-pairs{margin-top:14px}
.fx-col,.fx-pairshelf{border:1px solid var(--rule); border-radius:10px; padding:14px 16px; background:var(--card)}
.fx-col--bull{border-color:color-mix(in srgb,var(--bull) 40%,transparent)}
.fx-col--bear{border-color:color-mix(in srgb,var(--bear) 40%,transparent)}
.fx-col-head{display:flex; align-items:center; gap:8px; font:700 11.5px/1 var(--sans); letter-spacing:.07em; text-transform:uppercase; margin-bottom:12px}
.fx-col--bull .fx-col-head{color:var(--bull)}
.fx-col--bear .fx-col-head{color:var(--bear)}
.fx-count{font:600 11px/1 var(--sans); color:var(--muted); background:var(--quote-bg); border:1px solid var(--rule); border-radius:999px; padding:3px 7px; letter-spacing:0}
.fx-chips{display:flex; flex-wrap:wrap; gap:7px}
.fx-chip{font:13px/1 var(--sans); padding:8px 11px; border-radius:999px; background:var(--quote-bg); border:1px solid var(--rule); color:var(--ink); white-space:nowrap}
.fx-chip b{font-weight:700; margin-left:2px}
.fx-col--bull .fx-chip b{color:var(--bull)}
.fx-col--bear .fx-chip b{color:var(--bear)}
.fx-neutral-row{display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:12px}
.fx-neutral-label{font:700 11px/1 var(--sans); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-right:2px}
.fx-chip--flat b{color:var(--muted)}
.fx-pairshelf-head{font:700 11.5px/1 var(--sans); letter-spacing:.07em; text-transform:uppercase; margin-bottom:3px}
.fx-pairshelf-head--bull{color:var(--bull)}
.fx-pairshelf-head--bear{color:var(--bear)}
.fx-pairshelf-note{font:11.5px/1.4 var(--sans); color:var(--muted); margin-bottom:11px}
.fx-pairlist{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.fx-pair{display:flex; flex-direction:column; gap:3px; padding:9px 11px; border-radius:8px; background:var(--quote-bg); border:1px solid var(--rule)}
.fx-pair-nm{font:600 13px/1 var(--sans); color:var(--ink)}
.fx-pair-sp{font:11.5px/1 var(--sans); color:var(--muted)}
.fx-pair--bull .fx-pair-sp{color:var(--bull)}
.fx-pair--bear .fx-pair-sp{color:var(--bear)}
/* clickable pair tiles — open the per-pair chart overlay */
button.fx-pair{margin:0; width:100%; text-align:left; font-family:inherit; cursor:pointer; position:relative; transition:border-color .12s, box-shadow .12s, transform .04s}
button.fx-pair::after{content:"\203A"; position:absolute; top:8px; right:11px; font:600 14px/1 var(--sans); color:var(--muted-2); opacity:.55; transition:opacity .12s, transform .12s}
button.fx-pair:hover{box-shadow:0 1px 6px rgba(23,21,15,.08)}
button.fx-pair:hover::after{opacity:1; transform:translateX(2px)}
button.fx-pair--bull:hover{border-color:var(--bull)}
button.fx-pair--bull:hover::after{color:var(--bull)}
button.fx-pair--bear:hover{border-color:var(--bear)}
button.fx-pair--bear:hover::after{color:var(--bear)}
button.fx-pair:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
button.fx-pair:active{transform:translateY(1px)}
.fx-pair-hint{color:var(--gold-ink)}
.fx-empty{font:italic 13px/1.5 var(--sans); color:var(--muted); margin:2px 0 0}
.fx-method{margin:16px 0 0}
.fx-method p{font:12.5px/1.55 var(--sans); color:var(--muted); margin:.4em 0}
.fx-method strong{color:var(--ink)}
.fx-rate-wrap{overflow-x:auto}
/* ledger numerals: aligned figures across every FX data surface (font: shorthand resets variant-numeric, so set it per element) */
.fxmap-meta,.fx-count,.fx-chip,.fx-chip b,.fx-pair-sp,.fx-pair-nm,.fx-rate-table{font-variant-numeric:tabular-nums lining-nums}
.fx-rate-table{border-collapse:collapse; width:100%; font:13px/1.4 var(--sans); margin:0}
.fx-rate-table th,.fx-rate-table td{border:1px solid var(--rule); padding:8px 11px; text-align:left; white-space:nowrap}
.fx-rate-table th{background:var(--thead); font:600 11px/1.2 var(--sans); letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.fx-rate-cur{font-weight:700}
.fx-rate-value{background:var(--quote-bg); font-weight:600}
.fx-rate-bias{font-weight:700; text-align:right}
.fx-rate-bias--bull{color:var(--bull)}
.fx-rate-bias--bear{color:var(--bear)}
.fx-rate-bias--flat{color:var(--muted)}

/* ---- embedded market widgets (TradingView, /fx/ only — see privacy.html §6) ---- */
.tv-widget{margin:14px 0 8px}
.tv-ticker{margin:6px 0 4px}
.tv-widget .tradingview-widget-container{border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:var(--card)}
.tradingview-widget-copyright{font:11px/1.4 var(--sans); color:var(--muted); padding:7px 11px; text-align:right}
.tradingview-widget-copyright a{color:var(--muted); border:none}
.tradingview-widget-copyright a:hover{color:var(--ink)}

/* per-pair chart overlay (TradingView Advanced Chart) — a native <dialog>: the platform
   supplies the focus trap, Escape handling and focus restore; ::backdrop dims the sheet */
.fx-modal{flex-direction:column; width:min(960px,calc(100vw - 48px)); height:min(78vh,720px); padding:0;
  background:var(--card); border:1px solid var(--rule); border-radius:12px;
  box-shadow:0 18px 60px rgba(23,21,15,.35); overflow:hidden; color:inherit}
.fx-modal[open]{display:flex}
.fx-modal::backdrop{background:rgba(23,21,15,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.fx-modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:3px solid var(--gold); border-bottom:1px solid var(--rule)}
.fx-modal[data-dir="bull"] .fx-modal-head{border-top-color:var(--bull)}
.fx-modal[data-dir="bear"] .fx-modal-head{border-top-color:var(--bear)}
.fx-modal-title{font:700 15px/1 var(--sans); letter-spacing:.03em; color:var(--ink)}
.fx-modal-x{appearance:none; width:30px; height:30px; border-radius:8px; border:1px solid var(--rule); background:var(--quote-bg); color:var(--muted); font:13px/1 var(--sans); cursor:pointer}
.fx-modal-x:hover{color:var(--ink); border-color:var(--gold)}
.fx-modal-body{flex:1; min-height:0}
.fx-modal-body .tradingview-widget-container,.fx-modal-body .tradingview-widget-container__widget{height:100%; width:100%}
.fx-modal-foot{font:11px/1.4 var(--sans); color:var(--muted); padding:6px 14px; text-align:right; border-top:1px solid var(--rule)}
.fx-modal-foot a{color:var(--muted); border:none}
.fx-modal-foot a:hover{color:var(--ink)}

@media (max-width:560px){
  .fx-board,.fx-pairs{grid-template-columns:1fr}
  .fx-modal{width:calc(100vw - 24px); height:82vh}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}