/* Siriology.com — light, dark and auto.
   Added 09-20-2026. This sheet loads LAST and never edits his stylesheets:
   together.css, brand.css, unified.css, apple.css, research.css and style.css
   are exactly as he supplied them. Everything here is an override keyed to
   html[data-theme="dark"], plus the same rules under prefers-color-scheme for
   people who never touch the switch.

   Dark values follow Apple's own dark palette, since the site is built in that
   idiom: #000 ground, #1d1d1f panels, #f5f5f7 text, #86868b secondary,
   #2997ff links (the blue Apple lightens to on black). */

:root{
  --s-bg:#fff;
  --s-panel:#f5f5f7;
  --s-ink:#1d1d1f;
  --s-soft:#6e6e73;
  --s-rule:#d2d2d7;
  --s-rule-soft:#e5e5ea;
  --s-link:#0066cc;
  --s-accent:#0071e3;
  --s-header:rgba(255,255,255,.94);
  --s-switch-bg:rgba(0,0,0,.05);
  --s-switch-on:#fff;
  color-scheme:light;
}

html[data-theme="dark"]{
  --s-bg:#000;
  --s-panel:#1d1d1f;
  --s-ink:#f5f5f7;
  --s-soft:#86868b;
  --s-rule:#424245;
  --s-rule-soft:#333336;
  --s-link:#2997ff;
  --s-accent:#2997ff;
  --s-header:rgba(0,0,0,.92);
  --s-switch-bg:rgba(255,255,255,.1);
  --s-switch-on:#3a3a3c;
  color-scheme:dark;
}

/* ---------- the switch ---------- */
.theme-switch{
  display:inline-flex;align-items:center;gap:2px;flex:none;
  background:var(--s-switch-bg);border-radius:980px;padding:3px;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;
  letter-spacing:0;
}
.theme-switch button{
  appearance:none;border:0;background:none;cursor:pointer;
  font:inherit;font-size:12px;font-weight:500;line-height:1;
  color:var(--s-soft);padding:7px 11px;border-radius:980px;
  transition:background .15s,color .15s;min-height:30px;
}
.theme-switch button:hover{color:var(--s-ink)}
.theme-switch button[aria-pressed="true"]{
  background:var(--s-switch-on);color:var(--s-ink);
  box-shadow:0 1px 2px rgba(0,0,0,.14);
}
html[data-theme="dark"] .theme-switch button[aria-pressed="true"]{box-shadow:none}
.theme-switch button:focus-visible{outline:3px solid var(--s-accent);outline-offset:3px}
@media(max-width:650px){
  header .theme-switch{margin:2px 0 8px}
  .theme-switch button{font-size:13px;padding:8px 13px;min-height:34px}
}

/* ---------- dark: the shared shell ---------- */
html[data-theme="dark"]{background:#000}
html[data-theme="dark"] body,
html[data-theme="dark"] :root{color:var(--s-ink)}
html[data-theme="dark"] body{background:var(--s-bg)}
html[data-theme="dark"] header{background:var(--s-header);border-bottom-color:var(--s-rule-soft)}
html[data-theme="dark"] nav a{color:#a1a1a6}
html[data-theme="dark"] nav a:hover{color:var(--s-ink)}
html[data-theme="dark"] a{color:var(--s-link)}
html[data-theme="dark"] footer{background:var(--s-bg);border-top-color:var(--s-rule-soft)}
html[data-theme="dark"] footer p,
html[data-theme="dark"] footer .site-copyright{color:var(--s-soft)}
html[data-theme="dark"] footer .site-copyright{border-top-color:var(--s-rule)}
html[data-theme="dark"] .skip{background:var(--s-panel);color:var(--s-ink)}
/* The wordmark is pure black on transparent (checked: 100% of its opaque
   pixels are #000), so inverting it gives a clean white mark and loses no
   color. Without this it is black artwork on a black ground. */
html[data-theme="dark"] .site-logo img{filter:invert(1)}

/* ---------- dark: the home page ---------- */
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .opening figcaption,
html[data-theme="dark"] .opening-copy>p:not(.eyebrow),
html[data-theme="dark"] .opening .hero-deck,
html[data-theme="dark"] .purpose>p,
html[data-theme="dark"] .purpose .lead,
html[data-theme="dark"] .principles p,
html[data-theme="dark"] .together-heading>p:last-child,
html[data-theme="dark"] details p,
html[data-theme="dark"] .closing>p,
html[data-theme="dark"] .perspective>p{color:var(--s-soft)}
html[data-theme="dark"] .purpose{background:var(--s-panel)}
html[data-theme="dark"] .purpose>p strong,
html[data-theme="dark"] .closing-line strong,
html[data-theme="dark"] .perspective>p strong{color:var(--s-ink)}
html[data-theme="dark"] h1 span,
html[data-theme="dark"] .closing h2 span,
html[data-theme="dark"] .principles span,
html[data-theme="dark"] .opening h1 em,
html[data-theme="dark"] .perspective h2 span{color:var(--s-accent)}
html[data-theme="dark"] .principles{border-top-color:var(--s-rule)}
html[data-theme="dark"] details{border-top-color:var(--s-rule)}
html[data-theme="dark"] details:last-child{border-bottom-color:var(--s-rule)}
html[data-theme="dark"] details[open] summary{color:var(--s-link)}
html[data-theme="dark"] .pill{background:var(--s-accent);color:#000}
html[data-theme="dark"] .pill:hover{background:#0071e3;color:#fff}

/* ---------- dark: the research and essay pages ---------- */
html[data-theme="dark"] .research-title .eyebrow,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .article-meta,
html[data-theme="dark"] .research-art figcaption,
html[data-theme="dark"] caption,
html[data-theme="dark"] .research-body .limitations p,
html[data-theme="dark"] .hero .eyebrow,
html[data-theme="dark"] .dek,
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .article-grid aside .eyebrow{color:var(--s-soft)}
html[data-theme="dark"] blockquote,
html[data-theme="dark"] .research-body .method,
html[data-theme="dark"] .contents,
html[data-theme="dark"] thead{background:var(--s-panel)}
html[data-theme="dark"] .contents a,
html[data-theme="dark"] sup a,
html[data-theme="dark"] .hero-bottom a,
html[data-theme="dark"] .article-grid aside a,
html[data-theme="dark"] .actions li:before{color:var(--s-link)}
html[data-theme="dark"] .timeline>div:before{background:var(--s-accent)}
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] table,
html[data-theme="dark"] hr{border-color:var(--s-rule)}
/* style.css keeps its own variables; point them at the dark palette */
html[data-theme="dark"] body{--paper:#000;--ink:#f5f5f7;--muted:#86868b;--line:#424245}
html[data-theme="dark"] a:hover{color:var(--s-link)}

/* ---------- auto: the same, for anyone who never touches the switch ---------- */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --s-bg:#000; --s-panel:#1d1d1f; --s-ink:#f5f5f7; --s-soft:#86868b;
    --s-rule:#424245; --s-rule-soft:#333336; --s-link:#2997ff; --s-accent:#2997ff;
    --s-header:rgba(0,0,0,.92); --s-switch-bg:rgba(255,255,255,.1); --s-switch-on:#3a3a3c;
    color-scheme:dark; background:#000;
  }
  html:not([data-theme="light"]) body{background:var(--s-bg);color:var(--s-ink);
    --paper:#000;--ink:#f5f5f7;--muted:#86868b;--line:#424245}
  html:not([data-theme="light"]) header{background:var(--s-header);border-bottom-color:var(--s-rule-soft)}
  html:not([data-theme="light"]) nav a{color:#a1a1a6}
  html:not([data-theme="light"]) a{color:var(--s-link)}
  html:not([data-theme="light"]) footer{background:var(--s-bg);border-top-color:var(--s-rule-soft)}
  html:not([data-theme="light"]) footer p,
  html:not([data-theme="light"]) footer .site-copyright{color:var(--s-soft)}
  html:not([data-theme="light"]) footer .site-copyright{border-top-color:var(--s-rule)}
  html:not([data-theme="light"]) .skip{background:var(--s-panel);color:var(--s-ink)}
  html:not([data-theme="light"]) .site-logo img{filter:invert(1)}
  html:not([data-theme="light"]) .eyebrow,
  html:not([data-theme="light"]) .opening figcaption,
  html:not([data-theme="light"]) .opening-copy>p:not(.eyebrow),
  html:not([data-theme="light"]) .opening .hero-deck,
  html:not([data-theme="light"]) .purpose>p,
  html:not([data-theme="light"]) .purpose .lead,
  html:not([data-theme="light"]) .principles p,
  html:not([data-theme="light"]) .together-heading>p:last-child,
  html:not([data-theme="light"]) details p,
  html:not([data-theme="light"]) .closing>p,
  html:not([data-theme="light"]) .perspective>p,
  html:not([data-theme="light"]) .research-title .eyebrow,
  html:not([data-theme="light"]) .subtitle,
  html:not([data-theme="light"]) .article-meta,
  html:not([data-theme="light"]) .research-art figcaption,
  html:not([data-theme="light"]) caption,
  html:not([data-theme="light"]) .research-body .limitations p,
  html:not([data-theme="light"]) .hero .eyebrow,
  html:not([data-theme="light"]) .dek,
  html:not([data-theme="light"]) .section-label,
  html:not([data-theme="light"]) .article-grid aside .eyebrow{color:var(--s-soft)}
  html:not([data-theme="light"]) .purpose,
  html:not([data-theme="light"]) blockquote,
  html:not([data-theme="light"]) .research-body .method,
  html:not([data-theme="light"]) .contents,
  html:not([data-theme="light"]) thead{background:var(--s-panel)}
  html:not([data-theme="light"]) .purpose>p strong,
  html:not([data-theme="light"]) .closing-line strong,
  html:not([data-theme="light"]) .perspective>p strong{color:var(--s-ink)}
  html:not([data-theme="light"]) h1 span,
  html:not([data-theme="light"]) .closing h2 span,
  html:not([data-theme="light"]) .principles span,
  html:not([data-theme="light"]) .opening h1 em,
  html:not([data-theme="light"]) .perspective h2 span,
  html:not([data-theme="light"]) .contents a,
  html:not([data-theme="light"]) sup a,
  html:not([data-theme="light"]) .hero-bottom a,
  html:not([data-theme="light"]) .article-grid aside a{color:var(--s-accent)}
  html:not([data-theme="light"]) .principles,
  html:not([data-theme="light"]) details,
  html:not([data-theme="light"]) th,
  html:not([data-theme="light"]) td,
  html:not([data-theme="light"]) table,
  html:not([data-theme="light"]) hr{border-color:var(--s-rule)}
  html:not([data-theme="light"]) details:last-child{border-bottom-color:var(--s-rule)}
  html:not([data-theme="light"]) details[open] summary{color:var(--s-link)}
  html:not([data-theme="light"]) .pill{background:var(--s-accent);color:#000}
  html:not([data-theme="light"]) .timeline>div:before{background:var(--s-accent)}
}

@media (prefers-reduced-motion: reduce){
  .theme-switch button{transition:none}
}

/* ---------- where Siriology is, elsewhere ----------
   Plain text, the site's own quiet register: no icons, no brand colors.
   YouTube is deliberately absent until he confirms whose channel @Siriology is. */
footer .social{
  display:flex;flex-wrap:wrap;gap:6px 22px;
  width:100%;order:4;margin-top:4px;
  font-size:13px;letter-spacing:0;
}
footer .social a{color:var(--s-soft)}
footer .social a:hover{color:var(--s-link);text-decoration:underline;text-underline-offset:5px}
@media(max-width:650px){
  footer .social{gap:8px 18px;font-size:14px}
}

/* ---------- the wordmark's own indentation ----------
   Measured from the file's alpha channel, not eyeballed: siriology-logo.png is
   2170 x 725, and the opaque mark occupies x 136..2034 — so the PNG carries
   136px of transparent border on each side, 6.27% of its width. Rendered at
   165px in the phone header that is 10.3px of nothing before the "s", which is
   why the logo sat indented against the nav links directly beneath it while the
   header's own padding was identical for both.

   Pulling the image left by exactly its own border lines the mark up with the
   nav, the theme switch and everything else on the page's left edge. The extra
   transparent space simply moves to the right of the mark, where nothing sits.

   ⚠ The tidier fix is to trim the border out of the PNG, which would also fix
   the vertical: the mark sits 128px from the top and 176px from the bottom, so
   it rides ~1.8px high in its box. That needs a new asset and a src change on
   four pages, so it is his call rather than a thing to do quietly. */
.site-logo img{margin-left:-11.9px}          /* header, 190px wide */
footer .site-logo img{margin-left:-10.7px}   /* footer, 170px — wins inside the query below on specificity, as in brand.css */
@media(max-width:650px){.site-logo img{margin-left:-10.3px}}   /* header, 165px */

/* ---- 09-25-2026, Payman: the reader's local date and time under the logo, on every page ---- */
header .site-brand{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:0 0 auto}
header .site-brand .site-logo{order:0}
header .site-brand .site-now{order:1}
.site-now{display:block;font-size:12px;line-height:1.3;letter-spacing:0;color:var(--s-soft,#6e6e73);margin:-6px 0 2px;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:650px){ header .site-brand{order:1} .site-now{font-size:11.5px;margin-top:-4px} }