/* ═══════════════════════════════════════════════════════════
   Swisstocks — editorial stylesheet (PHP mirror)
   Mirrors src/styles.css design tokens of the TanStack app:
   paper/ink palette, editorial red, hard rules, no radius.
   ═══════════════════════════════════════════════════════════ */
:root {
  --paper:   oklch(0.972 0.006 85);
  --paper-2: oklch(0.928 0.007 80);
  --ink:      oklch(0.15 0 0);
  --ink-soft: oklch(0.28 0 0);
  --muted-fg: oklch(0.42 0 0);
  --rule:    oklch(0.15 0 0);
  --border:  oklch(0.15 0 0 / 0.18);
  --red:     oklch(0.55 0.2 27);
  --red-ink: oklch(0.46 0.19 27);
  --font-sans: Arial, Helvetica, sans-serif;
  --font-mono: "Courier New", ui-monospace, monospace;
}
/* Fallback for browsers without oklch (very old) */
@supports not (color: oklch(0.5 0 0)) {
  :root {
    --paper:#f5f4ef; --paper-2:#e9e7df; --ink:#1c1c1c; --ink-soft:#3d3d3d;
    --muted-fg:#5c5c5c; --rule:#1c1c1c; --border:rgba(28,28,28,.18);
    --red:#c22a1e; --red-ink:#a02218;
  }
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; border-color:var(--border); }
html { font-family:var(--font-sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-y:scroll; }                 /* keep scrollbar gutter on short pages → identical alignment */
@supports (scrollbar-gutter: stable) {
  html { overflow-y:auto; scrollbar-gutter:stable; }
}
body { background:var(--paper); color:var(--ink); font-family:var(--font-sans); line-height:1.5; min-height:100vh; display:flex; flex-direction:column; }
main { flex:1; }
h1,h2,h3,h4,h5,h6 { font-weight:700; letter-spacing:-0.01em; }
::selection { background:var(--ink); color:var(--paper); }
a { color:inherit; }
img { max-width:100%; display:block; }
ul,ol { list-style:none; }

/* ── layout utilities ── */
.container   { max-width:72rem; margin:0 auto; padding-left:1.5rem; padding-right:1.5rem; }
.rule-t      { border-top:1px solid var(--rule); }
.rule-b      { border-bottom:1px solid var(--rule); }
.rule-double-b { border-bottom:3px double var(--rule); }
.eyebrow     { font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; }
.text-red    { color:var(--red); }
.text-muted  { color:var(--muted-fg); }
.mono        { font-family:var(--font-mono); }
.red-dot     { display:inline-block; width:8px; height:8px; background:var(--red); vertical-align:middle; transform:translateY(-1px); margin-right:8px; }

/* ── header ── */
.brand-logo { height: 52px; width: auto; }
.brand-logo-footer { height: 34px; width: auto; }

.site-header { border-bottom:1px solid var(--rule); background:var(--paper); }
.header-brand { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-top:2rem; padding-bottom:1rem; }
.header-brand a { text-decoration:none; }
.brand-word { font-size:1.9rem; font-weight:900; letter-spacing:-0.02em; line-height:1; }
.brand-word .st-red { color:var(--red); }
.brand-tag { margin-top:.35rem; font-size:12px; color:var(--muted-fg); }
.site-nav  { border-top:1px solid var(--rule); background:var(--ink); }
.site-nav ul { display:flex; flex-wrap:wrap; align-items:center; column-gap:2rem; row-gap:.5rem; padding-top:.75rem; padding-bottom:.75rem; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:var(--paper); }
.site-nav a { text-decoration:none; color:var(--paper); }
.site-nav a:hover, .site-nav a.active { color:var(--red); }

/* ── hero / sections ── */
.section     { padding-top:3.5rem; padding-bottom:3.5rem; }
.section-lg  { padding-top:3.5rem; padding-bottom:3.5rem; }
@media(min-width:768px){ .section-lg { padding-top:5rem; padding-bottom:5rem; } }

.h-display { font-size:2.5rem; font-weight:900; line-height:1.05; letter-spacing:-0.02em; }
@media(min-width:768px){ .h-display { font-size:3.75rem; } }
.h-section { font-size:1.5rem; font-weight:700; }
@media(min-width:768px){ .h-section { font-size:1.875rem; } }
.lede { font-size:1rem; line-height:1.65; color:var(--muted-fg); }
@media(min-width:768px){ .lede { font-size:1.125rem; } }

.underline-red { position:relative; display:inline-block; }
.underline-red::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:6px; background:var(--red); opacity:.7; }

/* ── grid helpers ── */
.grid { display:grid; gap:2.5rem; }
@media(min-width:768px){
  .md-cols-12 { grid-template-columns:repeat(12,1fr); }
  .md-span-4 { grid-column:span 4; } .md-span-5 { grid-column:span 5; }
  .md-span-7 { grid-column:span 7; } .md-span-8 { grid-column:span 8; }
  .md-cols-2 { grid-template-columns:repeat(2,1fr); }
  .md-cols-3 { grid-template-columns:repeat(3,1fr); }
}
@media(min-width:1024px){ .lg-cols-3 { grid-template-columns:repeat(3,1fr); } }

/* ── buttons / links ── */
.btn-solid { display:inline-block; border:1px solid var(--ink); background:var(--ink); color:var(--paper); padding:.625rem 1.25rem; font-weight:700; font-size:.875rem; text-decoration:none; }
.btn-solid:hover { background:var(--red); border-color:var(--red); }
.btn-outline { display:inline-block; border:1px solid var(--ink); padding:.625rem 1.25rem; font-weight:700; font-size:.875rem; text-decoration:none; }
.btn-outline:hover { background:var(--red); border-color:var(--red); color:var(--paper); }
.link-red { color:var(--red-ink); border-bottom:1px solid var(--red); padding-bottom:2px; text-decoration:none; }
.link-red:hover { color:var(--red); }
.link-plain { text-decoration:underline; text-underline-offset:4px; }

/* ── dark band ── */
.band-dark { background:var(--ink); color:var(--paper); }
.band-dark .rule-t { border-top-color:oklch(0.972 0.006 85 / .3); }
@supports not (color: oklch(0.5 0 0)) { .band-dark .rule-t { border-top-color:rgba(245,244,239,.3); } }
.band-dark .text-soft { color:rgba(245,244,239,.75); }
.band-dark .btn-inverse { display:inline-block; border:1px solid var(--paper); background:var(--paper); color:var(--ink); padding:.5rem 1rem; font-weight:700; font-size:.875rem; text-decoration:none; }
.band-dark .btn-inverse:hover { background:var(--red); border-color:var(--red); color:var(--paper); }
.band-dark .btn-ghost { display:inline-block; border:1px solid rgba(245,244,239,.5); color:var(--paper); padding:.5rem 1rem; font-size:.875rem; text-decoration:none; }
.band-dark .btn-ghost:hover { border-color:var(--red); color:var(--red); }

/* ── footer ── */
.site-footer { border-top:1px solid var(--rule); margin-top:6rem; background:var(--paper); }
.footer-grid { display:grid; gap:2rem; padding-top:2.5rem; padding-bottom:2.5rem; font-size:.875rem; }
@media(min-width:768px){ .footer-grid { grid-template-columns:repeat(4,1fr); } .footer-about { grid-column:span 2; } }
.footer-grid ul { margin-top:.5rem; }
.footer-grid li { margin-top:.25rem; }
.footer-grid a { text-decoration:none; }
.footer-grid a:hover { text-decoration:underline; }
.footer-legal { border-top:1px solid var(--rule); }
.footer-legal-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; padding-top:1rem; padding-bottom:1rem; font-size:12px; color:var(--muted-fg); }

/* ── page-specific components ── */
.focus-list li { display:flex; gap:.75rem; border-bottom:1px solid var(--border); padding-bottom:.75rem; margin-top:.75rem; font-size:.875rem; }
.focus-list .idx { width:1.5rem; flex-shrink:0; font-family:var(--font-mono); font-size:12px; color:var(--red); }

.svc-tile { border-top:1px solid var(--rule); padding-top:1rem; }
.svc-tile h4 { font-size:1.125rem; }
.svc-tile .n { font-family:var(--font-mono); font-size:12px; color:var(--red); }
.svc-tile p { margin-top:.5rem; font-size:.875rem; line-height:1.6; color:var(--muted-fg); }

.stream { display:grid; gap:1.5rem; padding:2.5rem 0; border-bottom:1px solid var(--rule); }
@media(min-width:768px){ .stream { grid-template-columns:repeat(12,1fr); } .stream > .stream-head { grid-column:span 4; } .stream > .stream-bullets { grid-column:span 8; } }
.stream h2 { font-size:1.5rem; font-weight:900; line-height:1.15; margin-top:.5rem; }
@media(min-width:768px){ .stream h2 { font-size:1.875rem; } }
.stream .lede-sm { margin-top:.75rem; font-size:.875rem; font-style:italic; color:var(--muted-fg); }
.stream-bullets li { display:grid; grid-template-columns:1.25rem 1fr; gap:.75rem; font-size:.875rem; line-height:1.6; margin-top:.5rem; }
.stream-bullets li::before { content:""; margin-top:.65rem; height:1px; background:var(--red); display:block; }

.timeline li { display:grid; gap:1rem; border-bottom:1px solid var(--border); padding:1.5rem 0; }
@media(min-width:768px){ .timeline li { grid-template-columns:10rem 1fr; } }
.timeline .when { font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.15em; color:var(--muted-fg); }
.timeline .role-title { font-size:1.125rem; font-weight:700; line-height:1.3; }
.timeline .role-org { font-size:.875rem; color:var(--muted-fg); }
.timeline .role-bullets { margin-top:.75rem; padding-left:1.25rem; list-style:disc; font-size:.875rem; line-height:1.6; }
.timeline .role-bullets li { display:list-item; border:0; padding:0; margin-top:.375rem; grid-template-columns:none; }

.glance dl div { display:grid; grid-template-columns:7rem 1fr; gap:.75rem; border-bottom:1px solid var(--border); padding-bottom:.75rem; margin-top:.75rem; font-size:.875rem; }
.glance dt { color:var(--muted-fg); }
.glance dd { font-weight:600; }

.pub { display:grid; gap:.75rem; border-bottom:1px solid var(--border); padding-bottom:1rem; margin-top:1rem; }
@media(min-width:768px){ .pub { grid-template-columns:1fr auto; align-items:end; } }
.pub h3 { font-size:1.25rem; line-height:1.25; margin-top:.25rem; }
@media(min-width:768px){ .pub h3 { font-size:1.5rem; } }
.pub .meta { margin-top:.25rem; font-family:var(--font-mono); font-size:12px; color:var(--muted-fg); }
.lang-links { display:flex; align-items:center; gap:.5rem; }
.lang-links a { display:inline-flex; height:2.25rem; min-width:2.25rem; align-items:center; justify-content:center; border:1px solid var(--ink); padding:0 .5rem; font-size:12px; font-weight:700; text-decoration:none; }
.lang-links a:hover { background:var(--red); border-color:var(--red); color:var(--paper); }

.principles li { display:grid; grid-template-columns:3rem 1fr; gap:1rem; border-bottom:1px solid var(--border); padding-bottom:1rem; margin-top:1rem; font-size:.875rem; }
.principles .n { font-family:var(--font-mono); font-size:12px; color:var(--red); }
.principles p { margin-top:.25rem; color:var(--muted-fg); }

.channel { display:grid; grid-template-columns:6rem 1fr; gap:1rem; border-bottom:1px solid var(--border); padding-bottom:1rem; margin-top:1.5rem; }
.channel .k { font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.15em; color:var(--muted-fg); }
.channel .v { font-size:1.25rem; font-weight:700; }
.channel .v a { text-decoration:underline; text-underline-offset:4px; }
.note-box { border:1px solid var(--ink); padding:1.5rem; }
.note-box + .note-box { margin-top:1.5rem; }
.note-box p { margin-top:.75rem; font-size:.875rem; line-height:1.6; }

.dl-grid dt { font-weight:600; }
.dl-grid dd { margin-top:.25rem; font-size:.875rem; }

/* misc spacing helpers */
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}
.pb-3{padding-bottom:.75rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}
.pb-4{padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.flex{display:flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:end}
.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-10{gap:2.5rem}
.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-md{max-width:28rem}
.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}
.font-bold{font-weight:700}.font-black{font-weight:900}.font-semibold{font-weight:600}
.text-center{text-align:center}.space-y-6 > * + *{margin-top:1.5rem}