/* sachagg.com — shared styles */
@view-transition{navigation:auto}

:root{
  --bg:#151719; --ink:#D6D9DC; --bright:#EAECEF; --muted:#8B9098; --faint:#5C6168;
  --link:#93B6D8; --link-hover:#C9DEF4; --rule:#2A2D31; --card:#1A1D20;
  --c1:#7FA9D2; --c2:#A9A3E3; --c3:#E0B98C; --c4:#F8FAFC;
  --grad:linear-gradient(90deg, var(--c1), var(--c2) 50%, var(--c3));
  --ease:cubic-bezier(.22,.8,.24,1);
}
:root{
  --name-grad:linear-gradient(100deg, #AAB3BE 0%, #F8FAFC 18%, #7FA9D2 36%, #A9A3E3 52%, #E0B98C 66%, #F8FAFC 80%, #AAB3BE 100%);
  --sel:#35485C; --sel-ink:#F2F6FA; --ul:#54718D; --sep:#3A3E43; --wash:rgba(127,169,210,.1); --rule-hi:#3A4552;
  --track:#202327; --aff:#59636E; --shelf1:#2E3236; --shelf2:#222528; --sk1:#212428; --sk2:#2C3036;
  --aura1:.07; --aura2:.05; --blob-a:.16;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F5F1E8; --ink:#2E2C29; --bright:#151412; --muted:#6F6A62; --faint:#A39D93;
  --link:#2F5E8C; --link-hover:#183E66; --rule:#DED7CA; --card:#FBF8F1;
  --c1:#3F74A8; --c2:#7460BE; --c3:#B4782F;
  --name-grad:linear-gradient(100deg, #4A525C 0%, #16191D 18%, #3F74A8 36%, #7460BE 52%, #B4782F 66%, #16191D 80%, #4A525C 100%);
  --sel:#CFDDEB; --sel-ink:#151412; --ul:#9BB3CB; --sep:#C9C1B3; --wash:rgba(63,116,168,.08); --rule-hi:#C4BBAC;
  --track:#E6E0D4; --aff:#A8A196; --shelf1:#C9BFAE; --shelf2:#B6AB98; --sk1:#ECE6DA; --sk2:#E0D9CB;
  --aura1:.10; --aura2:.08; --blob-a:.12;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink); min-height:100vh;
  font:1.05rem/1.72 Charter,"Bitstream Charter","Iowan Old Style",Georgia,serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background-color .5s ease, color .5s ease;
  display:flex; flex-direction:column;
}
main{flex:1 0 auto; width:100%}
::selection{background:var(--sel); color:var(--sel-ink)}
main{position:relative; z-index:1; max-width:42rem; width:100%; margin:0 auto; padding:3.2rem 1.4rem 4rem}
p{margin:0 0 1.15rem}
h1{font-size:2rem; line-height:1.15; letter-spacing:-.015em; font-weight:700; color:var(--bright); margin:0 0 1.3rem}
h2{font-size:1.18rem; letter-spacing:-.01em; font-weight:700; color:var(--bright); margin:2.3rem 0 .7rem}
a{color:var(--link); text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--ul); transition:color .15s ease, text-decoration-color .15s ease}
a:hover{color:var(--link-hover); text-decoration-color:currentColor}
a:focus-visible{outline:2px solid var(--link); outline-offset:2px; border-radius:2px}
.sep{color:var(--sep); margin:0 .5rem; user-select:none}
.muted{color:var(--muted)}
.label{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-variant-numeric:tabular-nums}

/* ambient light, home only: two soft pools that keep drifting */
.aura{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.aura::before, .aura::after{content:""; position:absolute; width:26rem; height:26rem; border-radius:50%; filter:blur(90px); will-change:transform}
.aura::before{background:var(--c1); opacity:var(--aura1); top:-12rem; left:-8rem; animation:drift1 22s ease-in-out infinite alternate}
.aura::after{background:var(--c2); opacity:var(--aura2); bottom:-14rem; right:-9rem; animation:drift2 27s ease-in-out infinite alternate}
@keyframes drift1{0%{transform:translate(0,0) scale(1)} 50%{transform:translate(22vw,10vh) scale(1.2)} 100%{transform:translate(8vw,30vh) scale(.9)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)} 50%{transform:translate(-20vw,-14vh) scale(1.15)} 100%{transform:translate(-34vw,-4vh) scale(.95)}}

.blob{
  position:fixed; left:0; top:0; z-index:0; width:150px; height:150px; margin:-75px 0 0 -75px; border-radius:50%;
  pointer-events:none; opacity:0; transition:opacity .7s ease; will-change:transform;
  background:radial-gradient(circle at 50% 50%, hsla(var(--hue,210), 55%, 62%, var(--blob-a)), hsla(var(--hue,210), 55%, 70%, 0) 68%);
  filter:blur(10px);
}
body.pointer .blob{opacity:1; transition-duration:.25s}

/* scroll progress */
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:20; background:var(--grad); transform-origin:0 50%; transform:scaleX(var(--p,0)); opacity:.85}

/* ---------- header / nav ---------- */
header.site{
  view-transition-name:site-header;
  position:relative; display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:baseline; justify-content:space-between;
  padding-bottom:.95rem; margin-bottom:2.7rem;
}
header.site::after, .rule::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--c1), var(--c2) 22%, var(--rule) 60%);
  transform-origin:0 50%; animation:draw 1.1s var(--ease) .1s both;
}
@keyframes draw{from{transform:scaleX(0)}}
.site-name{font-weight:700; letter-spacing:-.01em}
.site-name a{color:var(--bright); text-decoration:none; background:linear-gradient(100deg, var(--bright) 40%, var(--c1), var(--c2), var(--bright) 60%) 100% 0/250% 100%; -webkit-background-clip:text; background-clip:text; transition:background-position .7s var(--ease)}
.site-name a:hover{-webkit-text-fill-color:transparent; background-position:0 0}
nav{font-size:.92rem}
nav a, .ul{
  position:relative; color:var(--muted); text-decoration:none; padding-bottom:2px;
  background:var(--grad) 0 100%/0 1px no-repeat; transition:color .2s ease, background-size .35s var(--ease);
}
nav a:hover, .ul:hover{color:var(--bright); background-size:100% 1px}
nav a[aria-current="page"]{color:var(--ink); background-size:100% 1px}

.crumb{font-size:.85rem; margin:-.6rem 0 .5rem}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--link-hover)}

footer.site{position:relative; z-index:1; width:100%; max-width:42rem; margin:0 auto; padding:0 1.4rem 3rem; font-size:.85rem; color:var(--faint); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
footer.site a{color:var(--muted)}

/* ---------- motion primitives ---------- */
.js [data-reveal]{opacity:0; transform:translateY(14px); filter:blur(4px); transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1; transform:none; filter:none}

.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}

/* ---------- home ---------- */
main.home{padding-top:20vh}
.name{
  font-size:clamp(2.7rem, 9vw, 3.6rem); letter-spacing:-.025em; line-height:1.08; margin:0 0 1.1rem; padding-bottom:.2em;
  background:var(--name-grad);
  background-size:300% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:flow 14s ease-in-out infinite;
}
@property --f{syntax:'<number>'; inherits:true; initial-value:0}
.name.lit{background:none; animation:flowf 14s ease-in-out infinite}
.name .ch{
  display:inline-block; padding:0 .04em .22em; margin:0 -.04em -.22em; -webkit-text-fill-color:transparent; color:transparent;
  background:var(--name-grad);
  background-size:calc(var(--W) * 3) 100%; background-repeat:no-repeat;
  background-position:calc(var(--f) * var(--W) * -2 - var(--ox)) 0;
  -webkit-background-clip:text; background-clip:text;
  animation:rise .9s var(--ease) both; animation-delay:calc(var(--i) * 45ms + .1s);
}
.name .sp{display:inline-block; width:.26em}
@keyframes flowf{0%,100%{--f:0} 50%{--f:1}}
@keyframes rise{from{opacity:0; transform:translateY(.45em) rotate(4deg); filter:blur(8px)}}
@keyframes flow{0%,100%{background-position:0% center} 50%{background-position:100% center}}
.lede{font-size:1.12rem; color:var(--ink); max-width:34rem; margin-bottom:2.6rem}

.index{list-style:none; margin:0 0 2.6rem; padding:0; border-top:1px solid var(--rule)}
.index li{border-bottom:1px solid var(--rule)}
.index a{
  position:relative; display:grid; grid-template-columns:2.6rem 1fr auto; align-items:baseline; gap:.2rem .6rem;
  padding:1rem .2rem; text-decoration:none; color:var(--ink); overflow:hidden; isolation:isolate;
}
.index a::before{
  content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, var(--wash), transparent);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .5s var(--ease);
}
.index a:hover::before, .index a:focus-visible::before{transform:none}
.index .num{grid-column:1; grid-row:1; font-size:.78rem; color:var(--faint); font-variant-numeric:tabular-nums; letter-spacing:.08em; transition:color .3s}
.index .t{grid-column:2; grid-row:1; font-size:1.25rem; font-weight:700; color:var(--bright); letter-spacing:-.01em; transition:transform .45s var(--ease)}
.index .d{grid-column:2; grid-row:2; font-size:.92rem; color:var(--muted)}
.index .arrow{grid-column:3; grid-row:1 / span 2; align-self:center; color:var(--faint); transition:transform .45s var(--ease), color .3s}
.index a:hover .num{color:var(--c1)}
.index a:hover .t{transform:translateX(.3rem)}
.index a:hover .arrow{transform:translateX(.35rem); color:var(--c2)}
.contact{font-size:.95rem; color:var(--muted)}
.contact a{color:var(--muted)}
.contact a:hover{color:var(--bright)}

.now{margin:0 0 2.2rem}
.now .label{margin:0 0 .5rem}
.now .stamp{letter-spacing:.08em; text-transform:none; color:var(--faint)}
.now ul{list-style:none; margin:0; padding:0}
.now li{position:relative; padding-left:1.1rem; color:var(--ink); font-size:.98rem; line-height:1.9}
.now li::before{content:""; position:absolute; left:0; top:.8em; width:5px; height:5px; border-radius:50%; background:var(--grad)}
.now a{color:var(--ink)}
.now a:hover{color:var(--link-hover)}

/* ---------- cards (debate hub) ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(11.5rem, 1fr)); gap:.8rem; margin:1rem 0 2.2rem}
.card{
  position:relative; display:block; padding:1.05rem 1.1rem 1.1rem; border-radius:10px; text-decoration:none; color:var(--ink);
  background:var(--card); border:1px solid var(--rule); overflow:hidden; isolation:isolate;
  transition:transform .45s var(--ease), border-color .3s ease;
}
.card::before{
  content:""; position:absolute; inset:-1px; z-index:-1; opacity:0; transition:opacity .4s ease;
  background:radial-gradient(260px circle at var(--cx,50%) var(--cy,0%), var(--wash), transparent 70%);
}
.card:hover{transform:translateY(-3px); border-color:var(--rule-hi)}
.card:hover::before{opacity:1}
.card .k{display:block; font-weight:700; color:var(--bright); margin-bottom:.25rem}
.card .v{display:block; font-size:.9rem; color:var(--muted); line-height:1.5}
.card .go{position:absolute; top:1rem; right:1rem; color:var(--faint); transition:transform .4s var(--ease), color .3s}
.card:hover .go{transform:translate(2px,-2px); color:var(--c2)}

.aside{color:var(--muted); font-size:.95rem; margin-top:2.4rem}
.aside a{color:var(--ink)}
.aside a:hover{color:var(--link-hover)}

.stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:.8rem; margin:.4rem 0 1.4rem}
.stat{padding:.9rem 1rem; border-radius:10px; background:var(--card); border:1px solid var(--rule)}
.stat .n{display:block; font-size:2rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.stat .s{display:block; font-size:.85rem; color:var(--muted); line-height:1.4; margin-top:.3rem}
@media (max-width:600px){ .stats{grid-template-columns:1fr} .stat{display:flex; align-items:baseline; gap:.8rem} .stat .s{margin:0} }

/* ---------- rosters (affiliations / voting) ---------- */
.roster{margin:0 0 2.2rem}
.row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.5rem 0}
.row + .row{border-top:1px solid var(--rule)}
.years{color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; font-size:.95rem}
.intro{color:var(--muted); margin:-.5rem 0 1.9rem}
.chain{color:var(--muted); margin:-.5rem 0 1.9rem}
.chain a{color:var(--muted)}
.chain a:hover{color:var(--link-hover)}
.split{display:flex; height:7px; border-radius:4px; overflow:hidden; margin:.3rem 0 .45rem; background:var(--track)}
.split > div{width:0; transition:width 1.4s var(--ease)}
.split.in > div{width:var(--w)}
.no-js .split > div{width:var(--w)}
.split-aff{background:var(--aff)}
.split-neg{background:linear-gradient(90deg, var(--c1), var(--c2))}
.split-labels{display:flex; justify-content:space-between; color:var(--muted); font-size:.95rem; font-variant-numeric:tabular-nums; margin-bottom:1.6rem}
.note{color:var(--muted); font-size:.92rem; margin-top:2rem}
footer.aff{position:relative; display:flex; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1.1rem; font-size:.92rem}
footer.aff::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, var(--c1), var(--rule) 55%)}

/* ---------- reading ---------- */
.spines{display:flex; align-items:flex-end; gap:5px; height:9.5rem; margin:1.6rem 0 2.4rem; padding-bottom:6px; position:relative}
.spines::after{content:""; position:absolute; left:-.4rem; right:-.4rem; bottom:0; height:6px; border-radius:2px; background:linear-gradient(var(--shelf1), var(--shelf2))}
.spine{
  flex:1 1 0; min-width:0; height:var(--h); border-radius:3px 3px 1px 1px; background:var(--sc);
  position:relative; text-decoration:none; transform-origin:50% 100%;
  box-shadow:inset 2px 0 0 rgba(255,255,255,.08), inset -3px 0 0 rgba(0,0,0,.18);
  transition:transform .45s var(--ease), filter .3s;
}
.spine::before{content:""; position:absolute; left:18%; right:18%; top:14%; height:2px; background:rgba(255,255,255,.22); box-shadow:0 5px 0 rgba(255,255,255,.12)}
.spine span{position:absolute; inset:24% 0 8%; writing-mode:vertical-rl; transform:rotate(180deg); font-size:.62rem; letter-spacing:.06em; color:rgba(255,255,255,.72); display:flex; align-items:center; justify-content:center; overflow:hidden; white-space:nowrap}
.spine:hover, .spine:focus-visible{transform:translateY(-10px) rotate(-2deg); filter:brightness(1.18)}
.js .spines .spine{animation:shelve .9s var(--ease) both; animation-delay:calc(var(--i) * 60ms + .2s)}
@keyframes shelve{from{transform:translateY(-30px); opacity:0}}

.book{display:grid; grid-template-columns:4px 1fr; gap:0 1rem; padding:.9rem 0; scroll-margin-top:2rem}
.book + .book{border-top:1px solid var(--rule)}
.book::before{content:""; grid-row:1 / span 4; border-radius:2px; background:var(--sc); opacity:.75}
.book .bt{font-weight:700; color:var(--bright)}
.book .ba{font-size:.9rem; color:var(--muted)}
.book .bd{font-size:.95rem; margin-top:.15rem}
.book .tag{justify-self:start; margin-top:.45rem; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c3); border:1px solid rgba(224,185,140,.35); border-radius:99px; padding:.05rem .55rem}
.book:target{animation:flash 1.6s ease}
@keyframes flash{0%,40%{background:var(--wash)} 100%{background:transparent}}

.epigraph{margin:0 0 .5rem; padding:.2rem 0 .2rem 1.1rem; position:relative; min-height:4.6rem}
.epigraph::before{content:""; position:absolute; left:0; top:.35rem; bottom:.35rem; width:2px; border-radius:2px; background:linear-gradient(var(--c1), var(--c2), var(--c3))}
.epigraph blockquote{margin:0; font-style:italic; color:var(--bright); font-size:1.05rem}
.epigraph figcaption{font-size:.85rem; color:var(--muted); margin-top:.2rem}
.epigraph > *{transition:opacity .6s ease, filter .6s ease, transform .6s var(--ease)}
.epigraph.out > *{opacity:0; filter:blur(4px); transform:translateY(4px)}

/* ---------- writing ---------- */
.soon{display:inline-flex; align-items:center; gap:.55rem; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:-.3rem 0 2rem}
.soon i{width:7px; height:7px; border-radius:50%; background:var(--c3); box-shadow:0 0 0 0 rgba(224,185,140,.6); animation:pulse 2.2s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(224,185,140,0)} 100%{box-shadow:0 0 0 0 rgba(224,185,140,0)}}
.drafts{margin:0 0 2rem}
.draft{display:grid; grid-template-columns:1fr auto; gap:.55rem 1rem; padding:1.05rem 0; border-top:1px solid var(--rule)}
.draft:last-child{border-bottom:1px solid var(--rule)}
.bar{height:.8rem; border-radius:4px; background:linear-gradient(90deg, var(--sk1) 0%, var(--sk2) 40%, var(--sk1) 80%) 0 0/300% 100%; animation:shimmer 2.4s linear infinite}
.bar.t{height:1.05rem; width:var(--w); grid-column:1; grid-row:1}
.bar.s{width:calc(var(--w) * .8); grid-column:1; grid-row:2}
.bar.dt{width:3.6rem; grid-column:2; grid-row:1}
@keyframes shimmer{from{background-position:100% 0} to{background-position:-200% 0}}
.cursor{display:inline-block; width:.55ch; height:1.05em; vertical-align:-.15em; margin-left:.12em; background:var(--c1); animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

@media (max-width:600px){
  main.home{padding-top:12vh}
  .spines{height:7.5rem; gap:3px}
  .spine span{display:none}
}
@media (hover:none){ .blob{display:none} }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; scroll-behavior:auto !important}
  .name{background-position:30% center}
}

/* ---------- theme toggle ---------- */
.theme{
  appearance:none; border:0; background:none; padding:.2rem; margin:0 0 0 .7rem; cursor:pointer; color:var(--muted);
  vertical-align:-.2em; line-height:0; border-radius:50%; transition:color .2s ease;
}
.theme:hover{color:var(--bright)}
.theme:focus-visible{outline:2px solid var(--link); outline-offset:2px}
.theme svg{width:15px; height:15px; transition:transform .6s var(--ease)}
:root[data-theme="light"] .theme svg{transform:rotate(180deg)}

/* ---------- easter egg: the abyss ---------- */
.abyss{
  position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.2rem;
  background:radial-gradient(circle at 50% 45%, rgba(8,9,10,.94), rgba(4,5,6,.99) 70%); opacity:0; transition:opacity .9s ease; cursor:pointer;
}
.abyss.on{opacity:1}
.abyss svg{width:min(58vw, 340px); overflow:visible}
.abyss .lid{transform-box:fill-box; transform-origin:50% 50%; transform:scaleY(.04); transition:transform 1.1s var(--ease) .35s}
.abyss.on .lid{transform:scaleY(1)}
.abyss.blink .lid{transition:transform .12s ease-in; transform:scaleY(.04)}
.abyss figure{margin:0; max-width:30rem; padding:0 1.4rem; text-align:center; color:#D6D9DC; opacity:0; transform:translateY(6px); transition:opacity 1s ease 2.2s, transform 1s var(--ease) 2.2s}
.abyss.on figure{opacity:1; transform:none}
.abyss blockquote{margin:0; font-style:italic; font-size:1.08rem; line-height:1.6}
.abyss figcaption{margin-top:.5rem; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:#8B9098}

/* ---------- easter egg: simulacra ---------- */
.ghost{pointer-events:none; z-index:2; opacity:0; transition:opacity .8s ease; user-select:none}
.ghost .name, .ghost .name .ch{animation:none !important}
.ghost [data-reveal]{opacity:1 !important; transform:none !important; filter:none !important}
body.simulating .ghost{opacity:var(--go)}
.ghost.g1{--go:.55; color:var(--c1); animation:jit1 2.2s steps(6) infinite}
.ghost.g2{--go:.42; color:var(--c2); animation:jit2 2.7s steps(5) infinite}
.ghost.g3{--go:.3; color:var(--c3); animation:jit3 3.2s steps(7) infinite}
.ghost.g4{--go:.2; color:var(--bright); animation:jit4 1.9s steps(4) infinite}
.ghost *{color:inherit !important; -webkit-text-fill-color:currentColor !important; border-color:currentColor !important}
main.real{transition:filter .8s ease, opacity .8s ease}
body.simulating main.real{filter:blur(1.4px); opacity:.6}
@keyframes jit1{0%{transform:translate(-12px,5px)} 30%{transform:translate(14px,-4px)} 60%{transform:translate(-7px,-9px)} 100%{transform:translate(10px,7px)}}
@keyframes jit2{0%{transform:translate(20px,-10px) skewX(-2deg)} 40%{transform:translate(-18px,8px)} 80%{transform:translate(6px,15px) skewX(2deg)} 100%{transform:translate(-22px,-5px)}}
@keyframes jit3{0%{transform:translate(-30px,16px) scale(1.02)} 50%{transform:translate(26px,-18px) scale(.98)} 100%{transform:translate(-10px,-24px) scale(1.03)}}
@keyframes jit4{0%{transform:translate(3px,-2px); clip-path:inset(10% 0 60% 0)} 25%{transform:translate(-40px,0); clip-path:inset(40% 0 35% 0)} 50%{transform:translate(35px,2px); clip-path:inset(70% 0 8% 0)} 75%{transform:translate(-18px,-3px); clip-path:inset(25% 0 55% 0)} 100%{transform:translate(28px,1px); clip-path:inset(55% 0 20% 0)}}
.simtoast{
  position:fixed; left:50%; bottom:2rem; z-index:40; width:min(30rem, calc(100vw - 2rem)); transform:translate(-50%, 12px);
  padding:1.1rem 1.3rem; border-radius:12px; background:var(--card); border:1px solid var(--rule);
  box-shadow:0 12px 40px rgba(0,0,0,.35); opacity:0; transition:opacity .7s ease, transform .7s var(--ease);
}
body.simulating .simtoast.show{opacity:1; transform:translate(-50%, 0)}
.simtoast blockquote{margin:0; font-style:italic; color:var(--bright); font-size:.98rem; line-height:1.6}
.simtoast .who{margin:.45rem 0 0; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.simtoast .aside2{margin:.2rem 0 0; font-size:.85rem; color:var(--c3); opacity:0; transform:translateY(4px); transition:opacity .6s ease, transform .6s var(--ease)}
.simtoast.reveal .aside2{opacity:1; transform:none}

/* ---------- easter egg: sous rature ---------- */
.rature{position:absolute; left:0; top:0; width:0; height:0; z-index:30; pointer-events:none; transition:opacity .8s ease}
.rature:not(.on){opacity:0}
.rature .x{
  position:absolute; height:2px; border-radius:2px; background:var(--c3); opacity:.9;
  transform:rotate(var(--rot)) scaleX(0); transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.6,.05,.3,1); transition-delay:var(--d);
}
.rature.on .x{transform:rotate(var(--rot)) scaleX(1)}