/* ============================================================
   "Дефіцит уваги" — bilingual critical edition of Simon (1971)
   Aesthetic: a worn monochrome typescript on a tired terminal —
   typewriter monospace, black-and-white, faint scanlines, grain
   and fade. Plus a clean @media print (a typed manuscript).
   ============================================================ */

:root{
  --ink:#16161a;
  --soft:#3c3c40;
  --muted:#6c6c70;
  --faint:#8d8d90;
  --paper:#e9e7e0;
  --paper-hi:#f0eee7;
  --paper-edge:#dddbd3;
  --rule:#b4b3ac;
  --rule-soft:#c8c7bf;
  --desk:#23231f;
  --line:#15151a;          /* hairlines/keylines, near-black */

  --mono:"Cousine","Courier New",ui-monospace,monospace;
  --leafw:1000px;
  --readw:680px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; }

body{
  margin:0;
  font-family:var(--mono);
  font-size:16px; line-height:1.72; color:var(--ink);
  background-color:var(--desk);
  background-image:
    radial-gradient(circle at 20% 0%, #2c2c27, transparent 55%),
    radial-gradient(circle at 85% 90%, #1b1b18, transparent 55%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
/* worn-terminal scanlines over everything (screen only) */
body::before{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.055) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
::selection{ background:rgba(20,20,20,.22); }
a{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px;
   text-decoration-color:rgba(0,0,0,.35); }
a:hover{ text-decoration-color:var(--ink); }

/* ---------- the sheet ---------- */
.leaf{
  position:relative; max-width:var(--leafw); margin:0 auto 3rem;
  background:var(--paper);
  box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 18px 50px rgba(0,0,0,.5);
  padding:clamp(2rem,5vw,4rem) clamp(1.1rem,5vw,4.5rem) 3rem;
}
.leaf::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 58%, rgba(0,0,0,.10) 100%),  /* worn/photocopy vignette */
    radial-gradient(circle at 88% 10%, rgba(0,0,0,.06), transparent 7%),
    radial-gradient(circle at 12% 72%, rgba(0,0,0,.05), transparent 6%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.leaf > *{ position:relative; z-index:1; }

/* ---------- top bar (desk) ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.5rem clamp(1rem,4vw,2.2rem);
  background:#1a1a17; color:#cfcdc4; border-bottom:1px solid #000;
}
.brand{ letter-spacing:.04em; font-size:.84rem; color:#e6e4da; text-transform:none;
  display:flex; align-items:baseline; gap:.45rem; }
.brand .mark{ color:#e6e4da; }
.nav{ display:flex; gap:clamp(.5rem,2vw,1.3rem); align-items:center; flex-wrap:wrap; }
.nav a{ font-size:.74rem; letter-spacing:.04em; text-transform:none; color:#9b9a90; text-decoration:none; }
.nav a:hover, .nav a.active{ color:#fff; }

.modes{ display:inline-flex; border:1px solid #4a4a42; }
.modes button{ font-family:var(--mono); font-size:.68rem; letter-spacing:.03em; text-transform:none;
  padding:.16rem .5rem; border:0; border-left:1px solid #4a4a42; cursor:pointer; background:transparent; color:#9b9a90; }
.modes button:first-child{ border-left:0; }
.modes button.on{ background:#cfcdc4; color:#16160f; }

/* ---------- hero = title plate ---------- */
.hero{ text-align:center; padding:clamp(1.4rem,5vw,3.4rem) 0 1.4rem; border-bottom:1px solid var(--line); }
.hero .kicker{ letter-spacing:.12em; font-size:.74rem; text-transform:none; color:var(--muted); }
.hero h1{ font-weight:700; font-size:clamp(1.6rem,4.2vw,2.7rem); line-height:1.12; letter-spacing:-.01em;
  margin:1.3rem auto .5rem; max-width:24ch; }
.hero h1 .en{ display:block; }
.hero h2.ua{ font-weight:400; font-style:italic; font-size:clamp(1rem,2.3vw,1.35rem); color:var(--soft);
  margin:0 auto 1.6rem; max-width:34ch; }
.hero .byline{ letter-spacing:.05em; font-size:.82rem; text-transform:none; color:var(--soft); }
.hero .byline b{ color:var(--ink); }
.hero .pullquote{ max-width:54ch; margin:2rem auto; padding-top:1.5rem; border-top:1px solid var(--rule); }
.hero .pullquote .en{ font-style:italic; color:var(--muted); font-size:.92rem; }
.hero .pullquote .ua{ display:block; font-weight:700; font-size:clamp(1.1rem,2.4vw,1.45rem); line-height:1.4; margin-top:.5rem; }
.hero .cite{ font-size:.76rem; color:var(--muted); max-width:66ch; margin:1.5rem auto 0; }
.hero-actions{ margin-top:1.8rem; display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.btn{ font-size:.74rem; letter-spacing:.05em; text-transform:none; padding:.45rem 1rem;
  border:1px solid var(--ink); color:var(--ink); text-decoration:none; transition:.14s; }
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn.primary{ background:var(--ink); color:var(--paper); }
.btn.primary:hover{ background:transparent; color:var(--ink); }

/* ---------- running-head / apparatus ---------- */
.apparatus{
  position:sticky; top:2.3rem; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin:0 0 1rem; padding:.45rem .1rem; background:linear-gradient(var(--paper),var(--paper) 72%, transparent);
  border-bottom:1px solid var(--line);
  letter-spacing:.04em; font-size:.72rem; text-transform:none; color:var(--muted);
}
.apparatus .secnav{ display:flex; gap:1rem; flex-wrap:wrap; }
.apparatus .secnav a{ color:var(--soft); text-decoration:none; }
.apparatus .secnav a:hover, .apparatus .secnav a.active{ color:var(--ink); text-decoration:underline; }
.apparatus .modes{ border-color:var(--rule); }
.apparatus .modes button{ color:var(--soft); border-left-color:var(--rule); }
.apparatus .modes button.on{ background:var(--ink); color:var(--paper); }

/* ---------- the edition ---------- */
.edition{ padding:1.2rem 0 2rem; }
.blk{ display:grid; grid-template-columns:3rem 1fr; gap:.2rem;
  padding:var(--blk-gap,.85rem) 0; border-top:1px solid var(--rule-soft); scroll-margin-top:6rem; }
.blk:first-of-type{ border-top:0; }
.blk:hover{ background:rgba(0,0,0,.035); }
.blk-num{ font-size:.72rem; color:var(--faint); padding-top:.3rem; user-select:none; }
.blk-num a{ color:var(--faint); text-decoration:none; }
.blk:hover .blk-num a{ color:var(--ink); }

.blk-body{ display:grid; gap:0; }
body[data-mode="both"] .blk-body{ grid-template-columns:1fr 1fr; }
body[data-mode="both"] .col-en{ padding-right:clamp(1rem,2.4vw,2rem); }
body[data-mode="both"] .col-ua{ padding-left:clamp(1rem,2.4vw,2rem); border-left:1px solid var(--rule); }
body[data-mode="en"] .blk-body, body[data-mode="ua"] .blk-body{ grid-template-columns:minmax(0,var(--readw)); justify-content:center; }
body[data-mode="en"] .col-ua, body[data-mode="ua"] .col-en{ display:none; }

.col{ min-width:0; text-align:left; font-size:var(--col-size,14.5px); line-height:var(--col-lead,1.74); }
.col p{ margin:0 0 var(--col-pgap,.9em); }
.col p:last-child{ margin-bottom:0; }
.col-en{ color:var(--soft); }
.col-ua{ color:var(--ink); }
.spk{ font-weight:700; text-transform:none; letter-spacing:.02em; color:var(--ink); margin-right:.4rem; }
sup.fn{ font-size:.7em; }
sup.fn a{ color:var(--ink); text-decoration:none; font-weight:700; }

/* section / part divider */
.divider{ text-align:center; margin:2.4rem 0 1.2rem; padding:1rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.divider .en{ display:block; letter-spacing:.05em; text-transform:none; font-weight:700; font-size:.92rem; color:var(--ink); }
.divider .ua{ display:block; font-style:italic; font-size:1.05rem; color:var(--soft); margin-top:.25rem; }

/* subheading */
.subhead{ text-align:center; padding:1.5rem 0 .3rem; }
.subhead .blk-num{ display:none; }
.subhead .cells{ display:block; }
.subhead .en{ font-style:italic; font-weight:700; font-size:1.05rem; color:var(--ink); }
.subhead .ua{ font-style:italic; font-size:.9rem; color:var(--muted); margin-top:.1rem; }
body[data-mode="en"] .subhead .ua, body[data-mode="ua"] .subhead .en{ display:none; }

/* references / footnotes */
.refs{ padding:1rem 0; }
.refs h3{ letter-spacing:.06em; text-transform:none; font-size:.9rem; color:var(--ink); text-align:center; margin:1.4rem 0; }
.refs h3::before, .refs h3::after{ content:"+"; margin:0 .8rem; color:var(--faint); }
.ref{ display:grid; grid-template-columns:2rem 1fr; gap:.4rem; padding:.45rem 0; border-bottom:1px dotted var(--rule); font-size:.82rem; scroll-margin-top:6rem; }
.ref .n{ color:var(--ink); }
.ref .n a{ color:var(--ink); text-decoration:none; }
.ref .en{ color:var(--ink); }
.ref .ua{ display:block; color:var(--muted); font-style:italic; font-size:.78rem; margin-top:.1rem; }
.ref:target{ background:rgba(0,0,0,.06); }

/* ---------- generic pages ---------- */
.page{ padding:1.2rem 0 2rem; }
.page-head{ text-align:center; border-bottom:1px solid var(--line); padding-bottom:1.6rem; margin-bottom:2rem; }
.page-head .kicker{ letter-spacing:.12em; text-transform:none; font-size:.74rem; color:var(--muted); }
.page-head h1{ font-weight:700; font-size:clamp(1.5rem,4vw,2.4rem); margin:.6rem 0; }
.page-head p{ max-width:64ch; margin:0 auto; color:var(--soft); font-style:italic; font-size:.92rem; }

.group-label{ letter-spacing:.06em; text-transform:none; font-size:.86rem; color:var(--ink); text-align:center; margin:2.2rem 0 1.2rem; }
.group-label::before, .group-label::after{ content:"——"; color:var(--rule); margin:0 .7rem; letter-spacing:0; }
.people{ display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:1.7rem 2rem; }
.person{ display:grid; grid-template-columns:88px 1fr; gap:1rem; border-top:2px solid var(--ink); padding-top:.9rem; }
.portrait{ margin:0; }
.portrait img{ width:88px; height:auto; display:block; border:1px solid var(--ink);
  filter:grayscale(1) contrast(1.05) brightness(1.02); background:var(--paper-edge); }
.portrait figcaption{ font-size:.58rem; line-height:1.3; color:var(--faint); margin-top:.35rem; }
.portrait figcaption a{ color:var(--muted); text-decoration:none; }
.portrait figcaption a:hover{ color:var(--ink); text-decoration:underline; }
.portrait.mono{ width:88px; height:110px; border:1px solid var(--rule); background:var(--paper-edge);
  display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 3px var(--paper); }
.portrait.mono span{ font-size:1.7rem; font-weight:700; color:var(--faint); letter-spacing:.04em; }
.pbody{ min-width:0; }
.person .nm{ font-weight:700; font-size:1.1rem; line-height:1.2; }
.person .nm-ua{ font-style:italic; color:var(--muted); font-size:.86rem; }
.person .dates{ font-size:.74rem; color:var(--faint); margin-left:.4rem; }
.person .role{ letter-spacing:.02em; font-size:.74rem; color:var(--soft); margin:.45rem 0 .65rem; }
.person .bio{ font-size:.84rem; margin:0 0 .7rem; }
.person .contrib{ font-size:.8rem; color:var(--soft); border-left:2px solid var(--rule); padding-left:.8rem; font-style:italic; }
.person .contrib b{ font-style:normal; letter-spacing:.04em; font-size:.68rem; color:var(--ink); display:block; margin-bottom:.15rem; }
.plist{ margin-top:.7rem; }
.plist b{ display:block; font-size:.7rem; letter-spacing:.03em; color:var(--ink); margin-bottom:.25rem; }
.plist ul{ margin:0; padding-left:1.05rem; }
.plist li{ font-size:.78rem; color:var(--soft); margin-bottom:.18rem; line-height:1.4; }
@media (max-width:540px){ .person{ grid-template-columns:1fr; } }

.mentioned{ columns:2; column-gap:2.6rem; margin-top:.5rem; }
@media (max-width:640px){ .mentioned{ columns:1; } }
.mentioned .m{ break-inside:avoid; margin-bottom:1rem; }
.mentioned .m b{ font-size:.95rem; }
.mentioned .m .mua{ font-style:italic; color:var(--muted); font-size:.8rem; }
.mentioned .m p{ margin:.15rem 0 0; font-size:.82rem; color:var(--soft); }
.photo-note{ margin:2.4rem auto 0; max-width:64ch; text-align:center; font-size:.72rem; font-style:italic;
  color:var(--faint); border-top:1px solid var(--rule-soft); padding-top:1rem; }

.term{ display:grid; grid-template-columns:minmax(210px,.8fr) 1.4fr; gap:1.6rem; padding:1.1rem 0; border-top:1px solid var(--rule-soft); }
.term:first-child{ border-top:0; }
.term:hover{ background:rgba(0,0,0,.035); }
.term .heads .en{ font-style:italic; color:var(--soft); font-size:.88rem; }
.term .heads .arrow{ color:var(--faint); margin:0 .35rem; }
.term .heads .ua{ display:block; font-weight:700; font-size:1.05rem; color:var(--ink); margin-top:.25rem; }
.term .note{ color:var(--soft); font-size:.9rem; }
@media (max-width:680px){ .term{ grid-template-columns:1fr; gap:.5rem; } }

.prose{ max-width:var(--readw); margin:0 auto; }
.prose p{ margin:0 0 1.1rem; font-size:.92rem; }
.prose h3{ text-transform:none; letter-spacing:.08em; font-size:1rem; margin:2rem 0 .7rem; }
.prose code{ font-size:.86em; background:var(--paper-edge); padding:.08em .35em; border:1px solid var(--rule-soft); }
.prose .pipeline{ font-size:.78rem; background:var(--paper-edge); border:1px solid var(--rule); border-left:3px solid var(--ink); padding:1rem 1.2rem; overflow-x:auto; color:var(--soft); }

/* colophon */
.foot{ max-width:var(--leafw); margin:0 auto; padding:0 clamp(1.1rem,5vw,4.5rem) 3rem;
  display:flex; justify-content:space-between; gap:1.4rem; flex-wrap:wrap;
  letter-spacing:.04em; text-transform:none; font-size:.7rem; color:#9b9a90; }
.foot a{ color:#cdccc3; }
.foot .big{ text-transform:none; font-style:italic; font-size:.92rem; color:#dedcd2; letter-spacing:0; }

.toast{ position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%) translateY(1.5rem);
  background:var(--ink); color:var(--paper); text-transform:none; letter-spacing:.05em; font-size:.74rem;
  padding:.45rem .9rem; opacity:0; pointer-events:none; transition:.2s; z-index:99; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- responsive ---------- */
@media (max-width:820px){
  body{ font-size:15px; }
  body[data-mode="both"] .blk-body{ grid-template-columns:1fr; }
  body[data-mode="both"] .col-en{ padding:0 0 .6rem; border-bottom:1px dotted var(--rule); margin-bottom:.6rem; }
  body[data-mode="both"] .col-ua{ padding:0; border-left:0; }
  .blk{ grid-template-columns:1fr; }
  .blk-num{ padding-top:0; }
  .apparatus .secnav{ display:none; }
}

/* ============================================================
   PRINT — a clean typed manuscript, black on white
   ============================================================ */
@media print{
  @page{ margin:18mm 16mm; }
  html, body{ background:#fff !important; color:#000 !important; font-size:10.5pt; line-height:1.4; }
  body::before{ display:none !important; }                 /* no scanlines */
  .topbar, .apparatus, .hero-actions, .toast, .modes, .blk-ideas, .blk-hs{ display:none !important; }
  .leaf{ max-width:none; margin:0; padding:0; box-shadow:none !important; background:#fff !important; }
  .leaf::after{ display:none !important; }                 /* no grain/vignette */
  a{ color:#000 !important; text-decoration:none; }

  .hero{ border:0; padding:0 0 8mm; break-after:page; }
  .hero h1{ font-size:20pt; } .hero h2.ua{ font-size:13pt; }
  .hero .pullquote{ border-color:#000; }

  .edition{ padding:0; }
  .blk{ break-inside:avoid; border-top:1px solid #bbb; padding:3mm 0; }
  body[data-mode] .blk-body{ grid-template-columns:1fr 1fr !important; }   /* always parallel in print */
  body[data-mode] .col-en, body[data-mode] .col-ua{ display:block !important; }
  .col-en{ padding-right:6mm; color:#222; }
  .col-ua{ padding-left:6mm; border-left:1px solid #999; color:#000; }
  .col{ font-size:9pt; line-height:1.42; }
  .blk-num{ color:#777; }

  .divider{ break-before:page; border-color:#000; }
  .subhead{ break-after:avoid; }
  .refs{ break-before:page; }
  .ref{ break-inside:avoid; }

  /* show the destination of footnote links in the references */
  .foot{ border-top:1px solid #000; margin-top:6mm; padding:4mm 0 0; color:#000; }
  .foot a{ color:#000; }
}

/* ============================================================
   POLISH PASS — beauty layer (overrides above; screen only)
   ============================================================ */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes rise  { from{opacity:0; transform:translateY(11px)} to{opacity:1; transform:none} }

/* finer, quieter scanlines */
body::before{ background:repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 3px); }

/* hero kicker → terminal prompt with a blinking cursor */
.hero .kicker::before{ content:"> "; color:var(--muted); }
.hero .kicker::after{ content:"▮"; margin-left:.18em; color:var(--ink); animation:blink 1.15s step-end infinite; }

/* one orchestrated load reveal of the title plate */
.hero > *{ animation:rise .62s both; }
.hero .kicker{ animation-delay:.02s } .hero h1{ animation-delay:.12s }
.hero h2.ua{ animation-delay:.22s } .hero .byline{ animation-delay:.30s }
.hero .pullquote{ animation-delay:.40s } .hero .cite{ animation-delay:.48s }
.hero-actions{ animation-delay:.56s }
@media (prefers-reduced-motion: reduce){ .hero > *{ animation:none } .hero .kicker::after{ animation:none } }

/* the pull-quote becomes the centrepiece */
.hero h1{ letter-spacing:-.012em; }
.hero .pullquote{ border-top:none; padding-top:2.2rem; position:relative; }
.hero .pullquote::before{ content:"“"; position:absolute; top:-.05em; left:50%; transform:translateX(-50%);
  font-size:3rem; line-height:1; color:var(--rule); }
.hero .pullquote .ua{ font-size:clamp(1.3rem,3vw,1.85rem); line-height:1.36; }
.hero .pullquote .en{ display:block; margin-bottom:.2rem; }

/* uniform portrait cards — same size whether photo or monogram */
.portrait img{ width:90px; height:116px; object-fit:cover; object-position:center 20%;
  box-shadow:2px 2px 0 rgba(0,0,0,.18); }
.portrait.mono{ width:90px; height:116px; box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--rule-soft), 2px 2px 0 rgba(0,0,0,.10); }
.portrait.mono span{ font-size:1.55rem; }
.person{ grid-template-columns:90px 1fr; }

/* section dividers: more air + a quiet pair of ticks */
.divider{ margin:3.2rem 0 1.5rem; }
.divider .en::before, .divider .en::after{ content:"·"; color:var(--faint); margin:0 .7em; }

/* warmer hover on reading blocks + a marginal tick */
.blk:hover{ background:linear-gradient(90deg, rgba(0,0,0,.045), transparent 78%); }
.blk-num a{ transition:color .14s; }

/* glossary terms: a touch more separation */
.term .heads .ua{ letter-spacing:-.01em; }

/* people grid: gentle lift on hover */
.person{ transition:transform .16s ease; }
.person:hover{ transform:translateY(-2px); }

/* ---- reader settings ---- */
.ap-right{ display:flex; align-items:center; gap:.55rem; position:relative; }
.readset{ position:relative; }
.rs-toggle{ font-family:var(--mono); font-size:.82rem; letter-spacing:.02em; line-height:1;
  padding:.2rem .5rem; border:1px solid var(--rule); background:transparent; color:var(--soft); cursor:pointer; }
.rs-toggle[aria-expanded="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.rs-panel{ position:absolute; right:0; top:calc(100% + .5rem); z-index:60; width:230px;
  background:var(--paper); border:1px solid var(--ink); box-shadow:4px 4px 0 rgba(0,0,0,.18);
  padding:.7rem .8rem; text-transform:none; letter-spacing:0; }
.rs-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
.rs-row > span{ font-size:.72rem; color:var(--muted); }
.rs-group{ display:inline-flex; border:1px solid var(--rule); }
.rs-group button, .rs-reset button{ font-family:var(--mono); font-size:.7rem; padding:.18rem .42rem;
  border:0; border-left:1px solid var(--rule); background:transparent; color:var(--soft); cursor:pointer; line-height:1.1; }
.rs-group button:first-child{ border-left:0; }
.rs-group button.on{ background:var(--ink); color:var(--paper); }
.rs-group[data-set="s"] button[data-v="small"]{ font-size:.66rem; }
.rs-group[data-set="s"] button[data-v="mid"]{ font-size:.82rem; }
.rs-group[data-set="s"] button[data-v="large"]{ font-size:.98rem; }
.rs-reset{ text-align:right; margin-top:.2rem; }
.rs-reset button{ border:1px solid var(--rule); color:var(--muted); }
@media (max-width:820px){ .rs-panel{ width:200px; } .ap-label{ display:none; } }

/* ---- ideas page ---- */
.idea{ padding:1.7rem 0; border-top:1px solid var(--rule); }
.idea:first-child{ border-top:0; }
.idea-head{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
.idea-ua{ font-weight:700; font-size:1.35rem; color:var(--ink); }
.idea-en{ font-style:italic; font-size:.9rem; color:var(--muted); }
.idea-exp{ margin:.6rem 0 .8rem; max-width:72ch; color:var(--soft); font-size:.96rem; }
.idea-see{ font-size:.8rem; color:var(--muted); margin-bottom:.8rem; }
.idea-see a{ font-family:var(--mono); margin-left:.35rem; text-decoration:none; color:var(--ink); }
.idea-see a:hover{ text-decoration:underline; }
.idea-src > b{ display:block; font-size:.72rem; letter-spacing:.04em; color:var(--ink); margin-bottom:.45rem; }
.idea-src ul{ margin:0; padding:0; list-style:none; display:grid; gap:.6rem; max-width:78ch; }
.idea-src li{ font-size:.88rem; padding-left:.9rem; border-left:2px solid var(--rule-soft); }
.idea-src li a{ color:var(--ink); text-decoration:underline; text-decoration-color:rgba(0,0,0,.32); }
.idea-src li a:hover{ text-decoration-color:var(--ink); }
.src-meta{ display:block; color:var(--muted); font-size:.76rem; margin-top:.05rem; }
.src-type{ font-family:var(--mono); font-size:.7rem; }
.src-note{ display:block; color:var(--faint); font-size:.78rem; font-style:italic; margin-top:.05rem; }

/* ---- in-text idea previews (toggleable) ---- */
.marks-toggle{ font-size:.92rem; line-height:1; padding:.14rem .42rem; border:1px solid var(--rule);
  background:transparent; cursor:pointer; }
.marks-toggle[aria-pressed="false"]{ opacity:.4; filter:grayscale(1); }
.blk-ideas{ grid-column:2; margin-top:.6rem; display:flex; gap:.45rem; flex-wrap:wrap; }
.idea-pill{ position:relative; font-family:var(--mono); font-size:.7rem; color:var(--muted);
  border:1px dashed var(--rule); padding:.12rem .5rem; text-decoration:none; transition:.14s; }
.idea-pill:hover, .idea-pill:focus-visible{ color:var(--ink); border-color:var(--ink); border-style:solid; outline:none; }
.idea-pill:hover::after, .idea-pill:focus-visible::after{
  content:attr(data-gist); position:absolute; left:0; top:calc(100% + .4rem); z-index:40;
  width:min(320px,74vw); background:var(--paper); border:1px solid var(--ink); box-shadow:4px 4px 0 rgba(0,0,0,.16);
  padding:.6rem .72rem; font-size:.75rem; line-height:1.5; color:var(--soft); white-space:normal; }
body.marks-off .blk-ideas{ display:none; }
@media (max-width:820px){ body[data-mode="both"] .blk-ideas{ grid-column:1; } }

/* ---- hindsight notes: predictions / assessments graded from 2026 ---- */
.hs-toggle{ font-size:.92rem; line-height:1; padding:.14rem .42rem; border:1px solid var(--rule);
  background:transparent; cursor:pointer; }
.hs-toggle[aria-pressed="false"]{ opacity:.4; filter:grayscale(1); }
.blk-hs{ grid-column:2; margin-top:.7rem; display:grid; gap:.55rem; max-width:78ch; }
.hs{ border-left:3px solid var(--ink); background:rgba(0,0,0,.035); padding:.55rem .75rem; }
.hs-prediction{ border-left-style:solid; }
.hs-assessment{ border-left-style:dotted; }
.hs-tag{ font-family:var(--mono); font-size:.64rem; letter-spacing:.04em; padding:.08rem .4rem; border:1px solid var(--ink); }
.hs-prediction .hs-tag{ background:var(--ink); color:var(--paper); }
.hs-assessment .hs-tag{ background:transparent; color:var(--ink); }
.hs-verdict{ font-family:var(--mono); font-size:.66rem; color:var(--muted); margin-left:.5rem; }
.hs-hit .hs-verdict{ color:var(--ink); font-weight:600; }
.hs-miss .hs-verdict{ color:var(--muted); }
.hs-miss .hs-tag{ box-shadow:none; }
.hs-note{ margin:.4rem 0 0; font-size:.84rem; line-height:1.5; color:var(--soft); }
body.hs-off .blk-hs{ display:none; }
@media (max-width:820px){ body[data-mode="both"] .blk-hs{ grid-column:1; } }