/* Siriology.com — Siri's life canvas. 09-24-2026.
   Built on the site's own tokens (--s-*, theme.css) so it follows the light/dark switch.
   The mark colors: grey for MEANT to be; for MAKE to be, the Siri palette warming toward
   the present and ending in orange; strokes painted in the same palette. */

:root{
  --lc-meant:#8e8e93;
  --lc-meant-edge:rgba(0,0,0,.18);
  --lc-paper:var(--s-panel,#f5f5f7);
  --lc-axis:var(--s-rule,#d2d2d7);
  --lc-halo:var(--s-ink,#1d1d1f);
  --lc-make:linear-gradient(135deg,#5e5ce6 0%,#bf5af2 38%,#ff375f 70%,#ff9f0a 100%);
}
html[data-theme="dark"]{ --lc-meant:#8e8e93; --lc-meant-edge:rgba(255,255,255,.22); }
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){ --lc-meant:#8e8e93; --lc-meant-edge:rgba(255,255,255,.22); }
}

.lc-page{max-width:1120px;margin:0 auto;padding-block:26px 90px;padding-inline:24px;text-align:left}
.lc-intro{max-width:820px;margin:0 auto 26px;text-align:center}
.lc-intro h1{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.045em;line-height:1.06;margin:6px 0 14px;text-wrap:balance}
.lc-intro h1 span{color:var(--s-accent,#0071e3)}
.lc-deck{font-size:clamp(18px,2.1vw,22px);line-height:1.5;color:var(--s-soft,#6e6e73);margin:0 auto 10px;max-width:680px;text-wrap:pretty}
.lc-perspective{font-size:15px;color:var(--s-soft,#6e6e73);font-style:italic;margin:0}

/* ---- the marks, used in the legend, the lists and the filters ---- */
.mk{display:inline-block;flex:none;width:16px;height:16px;border-radius:50%;vertical-align:middle}
.mk.sm{width:11px;height:11px}
.mk-meant{background:var(--lc-meant);box-shadow:inset 0 0 0 1px var(--lc-meant-edge)}
.mk-make{background:var(--lc-make)}
.mk-arc{width:34px;height:11px;border-radius:8px 3px 9px 4px;background:var(--lc-make);opacity:.9;transform:rotate(-4deg)}
.mk-arc.sm{width:22px;height:8px}
.mk-site{background:var(--s-bg,#fff);box-shadow:inset 0 0 0 3px var(--s-accent,#0071e3)}
.mk-news{background:transparent;box-shadow:inset 0 0 0 2px var(--lc-meant)}
.mk-next{width:34px;height:34px;border:2px dashed var(--s-soft,#6e6e73);background:transparent;position:relative}
.mk-next::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font-weight:700;color:var(--s-soft,#6e6e73);font-size:16px}

.lc-legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.lc-legend > div{display:flex;gap:10px;align-items:flex-start;background:var(--lc-paper);border-radius:14px;padding:12px 14px}
.lc-legend .mk{margin-top:4px}
.lc-legend p{margin:0;font-size:14px;line-height:1.45;color:var(--s-soft,#6e6e73);text-wrap:pretty}
.lc-legend b{display:block;color:var(--s-ink,#1d1d1f);font-weight:650;font-size:15px}

/* ---- the stage ---- */
.lc-stage{background:var(--lc-paper);border-radius:24px;padding:14px 14px 16px;margin:0 0 40px}
.lc-controls{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;padding:4px 4px 10px}
.lc-controls .seg{display:inline-flex;background:var(--s-bg,#fff);border-radius:980px;padding:3px;gap:2px}
.lc-controls .seg button,.pill-ctl{font:inherit;font-size:14px;border:0;border-radius:980px;padding:8px 14px;min-height:40px;cursor:pointer;background:transparent;color:var(--s-soft,#6e6e73)}
.lc-controls .seg button[aria-pressed="true"]{background:var(--s-ink,#1d1d1f);color:var(--s-bg,#fff)}
.pill-ctl{background:var(--s-accent,#0071e3);color:#fff;font-weight:550}
.pill-ctl[aria-pressed="true"]{background:var(--s-ink,#1d1d1f);color:var(--s-bg,#fff)}
.lc-play{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lc-speed{font-size:13px;color:var(--s-soft,#6e6e73);display:inline-flex;align-items:center;gap:8px}
.lc-speed input{width:110px;accent-color:var(--s-accent,#0071e3)}
.lc-filters{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--s-soft,#6e6e73)}
.lc-filters label{display:inline-flex;align-items:center;gap:6px;min-height:32px;cursor:pointer}
.lc-filters input{accent-color:var(--s-accent,#0071e3);width:17px;height:17px;margin:0}

.lc-canvas{position:relative;width:100%;min-height:300px}
.lc-canvas svg{display:block;width:100%;height:auto;overflow:visible;touch-action:manipulation}
.lc-canvas .axis line{stroke:var(--lc-axis);stroke-width:1}
.lc-canvas .axis text{fill:var(--s-soft,#6e6e73);font-size:11px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.lc-canvas .spine{stroke:var(--lc-axis);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 7}
.lc-canvas .lanelabel{fill:var(--s-soft,#6e6e73);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.lc-mark{cursor:pointer;outline:none}
.lc-mark .hit{fill:transparent;stroke:none}
.lc-mark .halo{fill:none;stroke:var(--lc-halo);stroke-width:2;opacity:0}
.lc-mark.sel .halo,.lc-mark:focus-visible .halo{opacity:1}
.lc-mark .dot-meant{fill:var(--lc-meant);stroke:var(--lc-meant-edge);stroke-width:1}
.lc-mark .dot-site{fill:var(--s-bg,#fff);stroke:var(--s-accent,#0071e3);stroke-width:3.5}
.lc-mark .dot-news{stroke:var(--s-bg,#fff);stroke-width:1.5}
.lc-mark .next{fill:none;stroke:var(--s-soft,#6e6e73);stroke-width:2;stroke-dasharray:4 4}
.lc-mark .next-q{fill:var(--s-soft,#6e6e73);font-weight:700;font-size:15px;text-anchor:middle;dominant-baseline:central}
.lc-mark .stroke-body{fill:none;stroke-linecap:round;opacity:.88}
.lc-mark .stroke-sheen{fill:none;stroke:#fff;stroke-linecap:round;opacity:.28}
.lc-mark.sel .stroke-body,.lc-mark:focus-visible .stroke-body{opacity:1}
.lc-mark:hover .dot,.lc-mark:focus-visible .dot{filter:brightness(1.08)}
.lc-canvas g.lc-mark{transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
.lc-canvas .off{opacity:0;pointer-events:none}
.lc-canvas.playing .lc-mark:not(.shown){opacity:.14}
.lc-canvas.playing .lc-mark.shown{opacity:1}

/* ---- the detail card ---- */
.lc-detail{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;background:var(--s-bg,#fff);border-radius:18px;padding:18px 20px;margin-top:10px}
.lc-detail .mk{margin-top:6px}
.lc-detail .when{font-size:13.5px;color:var(--s-soft,#6e6e73);margin:0 0 4px;font-variant-numeric:tabular-nums}
.lc-detail h3{font-size:clamp(19px,2.3vw,24px);letter-spacing:-.02em;line-height:1.25;margin:0 0 8px;font-weight:650;text-wrap:balance}
.lc-detail p.what{font-size:16.5px;line-height:1.55;margin:0 0 10px;color:var(--s-ink,#1d1d1f);text-wrap:pretty;max-width:68ch}
.lc-detail .src{font-size:14px;margin:0 0 12px;color:var(--s-soft,#6e6e73)}
.lc-detail .nav{display:flex;gap:8px;flex-wrap:wrap}
.lc-detail .nav button,.lc-detail .nav a{font:inherit;font-size:14px;border:1px solid var(--s-rule,#d2d2d7);background:var(--s-bg,#fff);color:var(--s-ink,#1d1d1f);border-radius:980px;padding:8px 14px;min-height:40px;cursor:pointer;display:inline-flex;align-items:center;text-decoration:none}
.lc-detail .nav a.go{background:var(--s-accent,#0071e3);border-color:transparent;color:#fff}
.lc-noscript{font-size:15px;color:var(--s-soft,#6e6e73)}

/* ---- news and the full list ---- */
.lc-news,.lc-story{max-width:820px;margin:0 auto 44px}
.lc-news h2,.lc-story h2,.lc-next h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.035em;margin:0 0 8px;text-wrap:balance}
.lc-note{font-size:14px;color:var(--s-soft,#6e6e73);margin:0 0 16px;text-wrap:pretty}
.lc-empty{background:var(--lc-paper);border-radius:14px;padding:16px 18px;color:var(--s-soft,#6e6e73);margin:0}
.lc-newslist,.lc-list{list-style:none;margin:0;padding:0}
.lc-newslist li,.lc-list li{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:14px 0;border-top:1px solid var(--s-rule-soft,#e5e5ea)}
.lc-newslist li:first-child,.lc-list li:first-child{border-top:0}
.lc-newslist .mk,.lc-list .mk{justify-self:center;margin-top:6px}
.lc-newslist a{font-weight:600;color:var(--s-ink,#1d1d1f);font-size:17px;line-height:1.35}
.lc-newslist p{margin:3px 0 0;font-size:13.5px;color:var(--s-soft,#6e6e73)}
.lc-list .when{font-size:13px;color:var(--s-soft,#6e6e73);margin:0 0 2px;font-variant-numeric:tabular-nums}
.lc-list h3{font-size:18px;margin:0 0 4px;font-weight:650;letter-spacing:-.015em;line-height:1.3}
.lc-list p{font-size:16px;line-height:1.55;margin:0;text-wrap:pretty}
.lc-list .src{font-size:13px;color:var(--s-soft,#6e6e73);margin-top:4px}
.lc-list li.flash{animation:lcflash 1.8s ease}
@keyframes lcflash{0%{background:color-mix(in srgb,var(--s-accent,#0071e3) 16%,transparent)}100%{background:transparent}}

.lc-next{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.lc-next .mk-next{margin-bottom:8px}
.lc-next p{font-size:18px;line-height:1.55;color:var(--s-soft,#6e6e73);text-wrap:pretty;max-width:60ch}
.lc-next .cta{margin-top:14px}

@media (max-width:860px){ .lc-legend{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:650px){
  .lc-page{padding-block:16px 60px;padding-inline:16px}
  .lc-legend{grid-template-columns:1fr;gap:8px}
  .lc-stage{padding:10px 8px 12px;border-radius:18px}
  .lc-controls{justify-content:flex-start}
  .lc-detail{padding:14px 14px;grid-template-columns:1fr}
  .lc-detail .mk{display:none}
}
@media (prefers-reduced-motion: reduce){
  .lc-canvas g.lc-mark{transition:none}
  .lc-list li.flash{animation:none}
}

/* ---- the circle, 09-24-2026 (his vision: not linear, scattered, the present at the center) ---- */
.lc-canvas{display:flex;justify-content:center}
.lc-canvas svg{max-width:760px}
.lc-canvas .rings circle{fill:none;stroke:var(--lc-axis);stroke-width:1;stroke-dasharray:2 6;opacity:.8}
.lc-canvas .rings text{fill:var(--s-soft,#6e6e73);font-size:10.5px;letter-spacing:.06em;opacity:.75}
.lc-mark .orb{filter:drop-shadow(0 6px 18px rgba(255,120,60,.35))}
.lc-mark .orb-t1{fill:#fff;font-weight:700;font-size:15px;text-anchor:middle;letter-spacing:-.01em}
.lc-mark .orb-t2{fill:#fff;font-weight:500;font-size:12px;text-anchor:middle;opacity:.95}
.lc-mark .next{fill:none;stroke:var(--s-soft,#6e6e73);stroke-width:1.5;stroke-dasharray:3 6;opacity:.7}
.lc-howto{margin:0;font-size:13.5px;color:var(--s-soft,#6e6e73);text-wrap:pretty}
@media (max-width:520px){ .lc-mark .orb-t1{font-size:11.5px} .lc-mark .orb-t2{font-size:9.5px} }

/* ---- 09-24-2026, his layout: canvas left, news right at the same height, the story below both ---- */
.lc-intro h1{margin-bottom:6px}
.lc-sub{font-size:clamp(19px,2vw,24px);font-weight:600;letter-spacing:-.02em;color:var(--s-accent,#0071e3);margin:0 0 12px;text-wrap:balance}
.lc-duo{display:grid;grid-template-columns:1fr;gap:14px}
.lc-newspane{background:var(--s-bg,#fff);border-radius:18px;display:flex;flex-direction:column;min-height:0}
.lc-newshead{padding:16px 18px 8px;border-bottom:1px solid var(--s-rule-soft,#e5e5ea)}
.lc-newshead h2{font-size:21px;letter-spacing:-.02em;margin:0 0 4px}
.lc-newshead .lc-note{margin:0;font-size:13px}
.lc-newsscroll{overflow:auto;max-height:340px;padding:4px 14px 10px;-webkit-overflow-scrolling:touch}
.lc-newspane .lc-newslist li{cursor:pointer;border-radius:12px;padding:12px 8px;grid-template-columns:22px 1fr}
.lc-newspane .lc-newslist li:hover{background:var(--lc-paper)}
.lc-newspane .lc-newslist li.sel{background:color-mix(in srgb,var(--s-accent,#0071e3) 12%,transparent)}
.lc-newspane .lc-newslist a{font-size:15.5px}
.lc-newspane .lc-empty{margin:12px 4px}
.lc-detail .src a.read{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:980px;background:var(--s-accent,#0071e3);color:#fff;text-decoration:none;font-weight:550}
.lc-canvas .rings text{font-size:12.5px;font-weight:600;opacity:1}
.lc-mark .orb-t1,.lc-mark .orb-t2{paint-order:stroke;stroke:rgba(80,20,40,.28);stroke-width:3px;stroke-linejoin:round}
.lc-mark .orb-t1{font-weight:750}
@media (min-width:980px){
  .lc-duo{grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);align-items:stretch}
  .lc-canvas{align-items:center}
  .lc-newspane{position:relative}
  .lc-newsscroll{position:absolute;inset:auto 0 0 0;top:var(--lc-head,92px);max-height:none}
  .lc-detail{margin-top:14px}
}

/* ---- 09-24-2026, his word: "put back" the legend's explanations. They are the canvas's own key now,
   beside the marks, and each doubles as its show/hide switch. Visible before the script runs. ---- */
.lc-key{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin:0 0 12px}
.lc-key label,.lc-key p{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:start;margin:0;background:var(--s-bg,#fff);border-radius:14px;padding:10px 12px;font-size:13.5px;line-height:1.45;color:var(--s-soft,#6e6e73);cursor:pointer;text-wrap:pretty}
.lc-key p{grid-template-columns:auto 1fr;cursor:default}
.lc-key b{display:block;color:var(--s-ink,#1d1d1f);font-weight:650;font-size:14.5px}
.lc-key .mk{margin-top:3px}
.lc-key input{accent-color:var(--s-accent,#0071e3);width:17px;height:17px;margin:2px 0 0}
.lc-key label:has(input:not(:checked)){opacity:.55}
.lc-key .mk-news{width:11px;height:11px;margin-top:5px;background:linear-gradient(90deg,var(--lc-meant) 50%,#ff9f0a 50%);box-shadow:0 0 0 1.5px var(--s-bg,#fff),0 0 0 2.5px var(--lc-meant-edge)}
.lc-canvas .rings .rim{stroke-dasharray:none;opacity:.5}
.lc-canvas .rings .now{fill:var(--s-accent,#0071e3);font-size:11.5px;font-weight:700;letter-spacing:.14em}
.lc-howto b{color:var(--s-ink,#1d1d1f)}
.lc-canvas .rings text{paint-order:stroke;stroke:var(--s-bg,#fff);stroke-width:4px;stroke-linejoin:round}
.lc-howto .lc-keysite{white-space:nowrap}
.lc-howto .mk-site.sm{box-shadow:inset 0 0 0 2.5px var(--s-accent,#0071e3)}
.lc-canvas .ring-labels{pointer-events:none}
@media (min-width:760px){
  .lc-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 22px}
}
.lc-stage{scroll-margin-top:calc(var(--lc-hdr,0px) + 8px)}

/* ---- the heart and the next mark, 09-24-2026: "move the question outside the circle" ---- */
.lc-mark.lc-heart{cursor:pointer}
.lc-canvas.playing .lc-heart{opacity:1}
.lc-mark .next-mark{fill:var(--s-bg,#fff);stroke:#ff9f0a;stroke-width:2;stroke-dasharray:3 4}
.lc-mark .next-q{fill:#ff9f0a;font-weight:700;text-anchor:middle}
.lc-mark .next-t{fill:var(--s-ink,#1d1d1f);font-weight:600;text-anchor:middle;paint-order:stroke;stroke:var(--s-bg,#fff);stroke-width:4px;stroke-linejoin:round}
.lc-mark.sel .next-mark,.lc-mark:focus-visible .next-mark{stroke-dasharray:none;stroke-width:2.5}

/* ---- 09-25-2026: a headline published automatically wears a neutral OPEN RING until it is marked,
   because grey or color says something about Siri, and the software never decides that. ---- */
.mk-open{background:transparent;box-shadow:inset 0 0 0 2px var(--lc-meant)}
.lc-mark .dot-open{fill:var(--s-bg,#fff);stroke:var(--lc-meant);stroke-width:2}

/* ---- 09-25-2026, Payman: the whole story in a scroll box, sortable, newest first by default ---- */
.lc-storyhead{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;justify-content:space-between;margin-bottom:12px}
.lc-storyhead h2{margin:0 0 4px}
.lc-storycount{margin:0;font-size:14px;color:var(--s-soft,#6e6e73)}
.lc-sort{display:inline-flex;align-items:center;gap:2px;background:var(--lc-paper);border-radius:980px;padding:3px;font-size:13.5px}
.lc-sort[hidden]{display:none}
.lc-sort span{color:var(--s-soft,#6e6e73);padding:0 8px 0 10px}
.lc-sort button{font:inherit;border:0;background:transparent;color:var(--s-soft,#6e6e73);border-radius:980px;padding:8px 13px;min-height:38px;cursor:pointer}
.lc-sort button[aria-pressed="true"]{background:var(--s-bg,#fff);color:var(--s-ink,#1d1d1f);box-shadow:0 1px 2px rgba(0,0,0,.14);font-weight:600}
.lc-storybox{max-height:min(640px,70vh);overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--s-rule-soft,#e5e5ea);border-radius:18px;padding:4px 18px;background:var(--s-bg,#fff);overscroll-behavior:contain}
.lc-storybox:focus-visible{outline:2px solid var(--s-accent,#0071e3);outline-offset:2px}
@media (max-width:520px){ .lc-storybox{padding:2px 12px;max-height:65vh} .lc-sort span{display:none} }