*{box-sizing:border-box}
body{margin:0;background:#151413;color:#e9e4da;font-family:Georgia,serif}
.wrap{display:flex;align-items:flex-start}
.comic{width:66.666%;padding:28px 22px 80px}
.story{width:33.333%;position:sticky;top:0;height:100vh;overflow-y:auto;padding:34px 30px 80px;background:#efe8da;color:#1e1b17;
       border-left:6px solid #0c0b0a;line-height:1.6;font-size:16px}
.story h1{font-family:'Bangers',Impact,sans-serif;letter-spacing:1.5px;font-size:40px;margin:0 0 4px;color:#7a1f14}
.story .money{font-size:14px;background:#e2d7c1;padding:8px 10px;border-left:4px solid #7a1f14;margin:14px 0}
.story h3{margin:26px 0 6px;font-size:19px}
.story .scene{transition:background .4s;padding:4px 8px;margin:0 -8px;border-radius:4px}
.story .scene.active{background:#f8e7a8}
.story .closing{font-style:italic;margin-top:26px}
.pagehead{font:12px monospace;color:#8a8478;margin:26px 0 6px}
.page{container-type:inline-size;position:relative;width:100%;background:#f6f1e6;box-shadow:0 6px 30px #000a;margin-bottom:34px;overflow:visible}
.pn{position:absolute;cursor:pointer}
.pn .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn .pending{position:absolute;inset:0;background:#3a3631;color:#b8b0a2;font:10px/1.35 monospace;padding:10px;overflow:hidden}
.pn svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pn svg polygon{fill:none;stroke:#0d0c0b;stroke-width:3.5;vector-effect:non-scaling-stroke;stroke-linejoin:miter}
.pn .cut{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.pn.breakout{z-index:20}
.pn.active svg polygon{stroke:#c0392b}
.over{position:absolute;pointer-events:none;z-index:30}
.cap{position:absolute;top:6px;left:6px;max-width:62%;background:#f4e3a1;color:#111;border:2px solid #111;padding:4px 8px;
     font:700 clamp(9px,.8vw,13px)/1.25 'Comic Neue','Comic Sans MS',sans-serif;text-transform:uppercase}
.cap.bottom{top:auto;bottom:6px}
.bal{position:absolute;background:#fff;color:#111;border:2px solid #111;border-radius:50%/42%;padding:9px 14px;max-width:46%;
     text-align:center;font:700 clamp(9px,.85vw,14px)/1.2 'Comic Neue','Comic Sans MS',sans-serif}
.bal:after{content:'';position:absolute;bottom:-11px;left:30%;border:9px solid transparent;border-top-color:#111;border-bottom:0}
.bal.whisper{border-style:dashed}
.bal.shout{border-radius:4px;border-width:3px;clip-path:polygon(0 8%,6% 0,20% 6%,35% 0,50% 7%,65% 0,80% 6%,94% 0,100% 10%,97% 50%,100% 90%,93% 100%,78% 94%,62% 100%,48% 93%,33% 100%,18% 94%,5% 100%,0 90%,3% 50%)}
.bal.radio{border-radius:3px;border-style:double;border-width:4px}
.sfx{position:absolute;font-family:'Bangers',Impact,sans-serif;font-size:5.4cqw;color:#ffd23f;-webkit-text-stroke:2px #111;
     text-shadow:3px 3px 0 #b3261e;transform:rotate(-9deg);letter-spacing:2px;white-space:nowrap}
.sfx.small{font-size:2.4cqw;-webkit-text-stroke:1px #111;text-shadow:2px 2px 0 #b3261e}
.letters{position:absolute;inset:0;width:100%;height:100%;z-index:40;pointer-events:none;overflow:visible}
.letters text{font-family:'Comic Neue','Comic Sans MS',sans-serif;font-weight:700;fill:#141210}
.letters text.cap{letter-spacing:.4px;fill:#20160a}
.titlecard{background:#f6f1e6;color:#1e1b17;padding:22px 26px;margin-bottom:22px;box-shadow:0 6px 30px #000a;border-top:10px solid #7a1f14}
.titlecard .yr{font:700 15px monospace;letter-spacing:3px;color:#7a1f14}
.titlecard .tt{font-family:'Bangers',Impact,sans-serif;font-size:clamp(34px,5vw,64px);letter-spacing:2px;line-height:1}
.castrow{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:16px}
.who{display:flex;gap:10px;align-items:center;font:14px/1.3 'Comic Neue','Comic Sans MS',sans-serif;min-width:200px}
.who img,.who .nopic{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid #1e1b17;background:#ccc}
.who span{color:#5b5348}
.endmoney{background:#f6f1e6;color:#1e1b17;padding:14px 18px;border-left:8px solid #7a1f14;font:15px/1.5 'Comic Neue','Comic Sans MS',sans-serif;box-shadow:0 6px 30px #000a}
@media(max-width:900px){.wrap{display:block}.comic,.story{width:100%}.story{position:static;height:auto}}

/* ---- Life Story site: the comic reader's look (dark table, cream pages, ink panels, caption boxes) ---- */
:root{--table:#151413;--paper:#f6f1e6;--paper2:#efe8da;--ink:#0d0c0b;--red:#7a1f14;--cap:#f4e3a1;--pow:#ffd23f;--powshadow:#b3261e;
  --muted:#8a8478;--hand:'Comic Neue','Comic Sans MS',sans-serif;--bang:'Bangers',Impact,sans-serif}
html{scroll-behavior:smooth}
body{background:var(--table) radial-gradient(#ffffff08 1px,transparent 1.4px) 0 0/7px 7px;min-height:100vh}
a{color:inherit}
.mast{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px max(16px,calc(50vw - 560px));background:var(--ink);border-bottom:4px solid var(--red);box-shadow:0 4px 18px #000c}
.logo{font-family:var(--bang);font-size:38px;letter-spacing:3px;color:var(--pow);-webkit-text-stroke:1.5px #111;text-shadow:3px 3px 0 var(--powshadow);
  text-decoration:none;transform:rotate(-2deg);line-height:1}
.mast nav{display:flex;gap:8px;flex-wrap:wrap}
.navcap{font:700 13px/1 var(--hand);text-transform:uppercase;text-decoration:none;background:var(--cap);color:#111;border:2px solid #111;padding:7px 10px;
  box-shadow:3px 3px 0 #000}
.navcap:hover,.navcap.on{background:#fff}
.navcap.latest{background:var(--red);color:#fff;border-color:#fff}
.site{max-width:1120px;margin:0 auto;padding:22px 16px 60px}
.site .comic{width:auto;padding:0}
.foot{text-align:center;font:12px monospace;color:var(--muted);padding:20px 16px 40px}

/* a "sheet" is a comic page; panels sit on it in a 6-column grid with white gutters */
.sheet{background:var(--paper);padding:14px;box-shadow:0 6px 30px #000a;margin-bottom:26px}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.s1{grid-column:span 1}.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}
.pnl{position:relative;border:3.5px solid var(--ink);padding:18px;overflow:hidden;color:#1e1b17;font:16px/1.5 Georgia,serif;text-decoration:none;display:block}
.pnl.cream{background:var(--paper2)}
.pnl.ink{background:#26231f radial-gradient(#ffffff10 1.2px,transparent 1.6px) 0 0/6px 6px;color:#efe8da}
.pnl.link{transition:transform .15s}
.pnl.link:hover,.tile:hover{transform:rotate(-.6deg) scale(1.01)}
.capbox{display:inline-block;background:var(--cap);color:#111;border:2px solid #111;padding:4px 9px;font:700 13px/1.25 var(--hand);
  text-transform:uppercase;letter-spacing:.4px;margin:0 0 10px}
.capbox.tl{position:absolute;top:10px;left:10px;z-index:2;margin:0}
.btn{display:inline-block;font:700 15px/1 var(--hand);text-transform:uppercase;text-decoration:none;background:#fff;color:#111;border:3px solid #111;
  padding:10px 14px;box-shadow:4px 4px 0 #000;margin:6px 8px 0 0;cursor:pointer}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #000}
.btn.hot{background:var(--pow)}
.cta{margin-top:12px}

/* home */
.home .hero{padding:0;aspect-ratio:2.55/1;background:#222}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.herotitle{position:absolute;right:14px;bottom:14px;max-width:min(560px,70%);background:var(--paper);border:3px solid #111;padding:14px 16px;box-shadow:6px 6px 0 #000c}
.kicker{font:700 13px monospace;letter-spacing:2px;color:var(--red);text-transform:uppercase}
.big{font-family:var(--bang);font-size:clamp(34px,6vw,72px);letter-spacing:2px;line-height:.95;color:#1e1b17}
.ink .big{color:var(--pow);-webkit-text-stroke:1px #111;text-shadow:3px 3px 0 var(--powshadow)}
.lede{font-size:19px;margin:0 0 8px}
.resume p{font-family:var(--hand);font-size:15px}
.resume .btn{font-size:13px}
.faces{display:flex;margin:4px 0 8px}
.faces img{width:62px;height:62px;border-radius:50%;object-fit:cover;border:3px solid #111;margin-right:-12px;background:#ccc}
.bignum{font-family:var(--bang);font-size:76px;line-height:1;color:var(--pow);-webkit-text-stroke:1.5px #111;text-shadow:4px 4px 0 var(--powshadow)}
.sofar p:last-child{margin-bottom:0}

/* issue tiles */
.tile{position:relative;display:block;aspect-ratio:1.75/1;border:3.5px solid var(--ink);overflow:hidden;text-decoration:none;color:#fff;
  transition:transform .15s;background:#26231f radial-gradient(#ffffff12 1.2px,transparent 1.6px) 0 0/6px 6px}
.tile.s4{aspect-ratio:3.6/1}.tile.s6{aspect-ratio:5.4/1}.tile.s3{aspect-ratio:2.7/1}
.tile .bigyr{color:#ffffff1f}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .tcap{position:absolute;top:8px;left:8px;background:var(--cap);color:#111;border:2px solid #111;font:700 12px var(--hand);padding:2px 7px;text-transform:uppercase}
.tile .ttl{position:absolute;left:8px;right:8px;bottom:8px;font-family:var(--bang);font-size:clamp(18px,2.3vw,28px);letter-spacing:1px;line-height:1;
  color:#fff;-webkit-text-stroke:1px #111;text-shadow:2px 2px 0 #000}
.tile.drawn .ttl{background:#0009;padding:6px 8px;margin:-6px -8px}
.tile .bigyr{position:absolute;right:10px;top:4px;font-family:var(--bang);font-size:clamp(34px,5vw,64px);color:#ffffff14;letter-spacing:2px}
.stamp{position:absolute;right:10px;bottom:10px;transform:rotate(-7deg);font:700 12px var(--hand);text-transform:uppercase;color:var(--pow);
  border:2px solid var(--pow);padding:3px 7px;letter-spacing:1px}
.tile .ttl+.stamp,.tile .lead+.stamp{bottom:auto;top:10px}
.tile.read:after{content:'READ';position:absolute;top:8px;right:8px;font:700 11px var(--hand);background:#fff;color:#111;border:2px solid #111;padding:1px 5px}
.tile .lead{position:absolute;left:8px;bottom:40px;font:700 13px var(--hand);color:#e9e4da}
.life .ttl{bottom:12px}
.burst{position:absolute;top:6px;right:8px;font-family:var(--bang);font-size:24px;color:var(--pow);-webkit-text-stroke:1px #111;text-shadow:2px 2px 0 var(--powshadow);
  transform:rotate(8deg)}

/* issue page */
.issuebar{display:flex;justify-content:space-between;align-items:center;font:12px monospace;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:0 0 14px}
.issuebar b{color:var(--pow);font:700 14px var(--hand);letter-spacing:1px}
.previously{background:var(--cap);color:#1e1b17;border:3px solid #111;padding:12px 16px;margin-bottom:22px;box-shadow:0 6px 30px #000a;font:16px/1.5 var(--hand)}
.previously .capbox{background:#fff}
.previously p{margin:0}
.titlecard .sub{font:16px/1.5 Georgia,serif;max-width:760px}
.guided{position:fixed;right:18px;bottom:18px;z-index:90;font-family:var(--bang);font-size:22px;letter-spacing:1px;background:var(--pow);color:#111;
  border:3px solid #111;padding:8px 14px;box-shadow:4px 4px 0 #000;cursor:pointer;transform:rotate(-2deg)}
.back{display:grid;gap:18px;margin:30px 0}
.back .pnl,.prose{box-shadow:0 6px 30px #000a}
.back h4{margin:16px 0 4px;font:700 13px var(--hand);text-transform:uppercase}
.src{margin:0;padding-left:18px;font-size:14px}
details.pnl>summary{cursor:pointer;list-style:none}
details.pnl>summary::-webkit-details-marker{display:none}
details.pnl>summary .capbox{margin:0}
details.pnl>summary:after{content:'\25BE  open';font:700 12px var(--hand);text-transform:uppercase;margin-left:10px;opacity:.7}
details[open].pnl>summary:after{content:'\25B4  close'}
.spoil{font:italic 14px Georgia,serif;opacity:.8;margin-left:6px}
.rolls{width:100%;border-collapse:collapse;font:14px/1.35 var(--hand);margin:12px 0}
.rolls th{text-align:left;font-size:12px;text-transform:uppercase;border-bottom:2px solid #efe8da55;padding:4px 6px}
.rolls td{padding:6px;border-bottom:1px solid #efe8da22;vertical-align:top}
.rolls th:first-child{width:17%}.rolls th:nth-child(3){width:14%}.rolls th:nth-child(4){width:9%}
.rolls{table-layout:fixed}
.rolls tr.imp-headline td{font-weight:700;color:#fff}
.rolls tr.imp-none td{opacity:.6}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.prose{margin-top:18px}
.prose h2{font-family:var(--bang);font-size:34px;letter-spacing:1px;color:var(--red);margin:16px 0 4px;font-weight:400}
.prose h3{margin:22px 0 6px;font-size:18px}
.prose .sum{font-style:italic}
.prose .closing{font-style:italic;margin-top:20px}
/* a year read as a story until its comic is drawn */
.prose.readstory{margin-top:0;padding:22px clamp(16px,5vw,56px) 26px;font:17px/1.65 Georgia,serif}
.prose.readstory>*:not(.capbox){max-width:700px;margin-left:auto;margin-right:auto}
.prose.readstory .money{font:700 14px var(--hand);border-top:2px solid #1e1b1733;padding-top:12px;margin-top:22px}
.issuenav{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;margin-top:26px}
.navpanel{display:block;background:var(--paper);color:#1e1b17;border:3.5px solid #111;padding:12px 14px;text-decoration:none;font-family:var(--bang);
  font-size:22px;letter-spacing:1px;line-height:1.05;box-shadow:0 6px 24px #000a}
.navpanel span{display:block;font:700 12px var(--hand);text-transform:uppercase;letter-spacing:.5px;color:var(--red);margin-bottom:4px}
.navpanel.next{text-align:right}
.navpanel.mid{text-align:center;background:var(--cap);font-size:18px}
.navpanel.off{opacity:.45;font-size:16px}
a.navpanel:hover{background:#fff}
.soonpanel{min-height:420px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:60px 28px 28px}
.soonpanel .bigyr{position:absolute;right:16px;top:8px;font-family:var(--bang);font-size:clamp(70px,14vw,170px);color:#ffffff12;letter-spacing:4px}
.soonpanel .teaser{font:18px/1.5 Georgia,serif;max-width:640px;color:#efe8da}
.soonpanel .stamp{position:static;font-size:22px;border-width:3px;margin:10px 0 6px;padding:6px 12px}
.small{font:13px var(--hand);opacity:.75}

/* the year-in-money chart (single series, so the title names it and there is no legend) */
.chart{margin:18px 0 0;background:var(--paper2);color:#1e1b17;border:3px solid #111;padding:12px 14px}
.chart figcaption{font:700 14px var(--hand);text-transform:uppercase;margin-bottom:6px}
.plot{position:relative}
.chart svg{width:100%;height:auto;display:block}
.chart .g{stroke:#1e1b1722;stroke-width:1}
.chart .median{stroke:#1e1b1788;stroke-width:1.5;stroke-dasharray:5 4}
.chart .ax{font:11px var(--hand);fill:#5b5348}
.chart .line{fill:none;stroke:var(--red);stroke-width:2;stroke-linejoin:round}
.chart .dot,.chart .hov{fill:var(--red);stroke:var(--paper2);stroke-width:2}
.chart .cross{stroke:#1e1b1766;stroke-width:1}
.chart .hit{fill:transparent;cursor:crosshair}
.tip{position:absolute;pointer-events:none;background:#fff;border:2px solid #111;padding:6px 9px;font:13px/1.35 var(--hand);box-shadow:3px 3px 0 #000;white-space:nowrap}
.tbl summary{cursor:pointer;font:700 12px var(--hand);text-transform:uppercase;margin-top:6px}
.tbl table{border-collapse:collapse;font:13px var(--hand);margin-top:6px}
.tbl td,.tbl th{padding:3px 10px;border-bottom:1px solid #1e1b1722;text-align:left}
.note{font:12px var(--hand);opacity:.7;margin:6px 0 0}

/* cast and family tree */
.tree{position:relative;padding:10px 0}
.genrow{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin:0 0 54px;position:relative;z-index:1}
.genrow:last-of-type{margin-bottom:0}
.couple{display:flex;align-items:center;gap:6px}
.wed{font:700 24px var(--hand);color:var(--red)}
.tnode{display:flex;flex-direction:column;align-items:center;width:140px;text-decoration:none;color:#1e1b17;background:var(--paper2);border:3px solid #111;
  padding:10px 6px;text-align:center;font:14px/1.2 var(--hand)}
.tnode img,.tnode .none{width:70px;height:70px;border-radius:50%;object-fit:cover;border:3px solid #111;margin-bottom:6px;background:#ccc}
.none{display:flex;align-items:center;justify-content:center;font:700 26px var(--hand);color:#777;background:#ddd}
.tnode span{font-size:12px;color:#5b5348}
.links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.links path{fill:none;stroke:#111;stroke-width:3}
.people{display:grid;gap:18px}
.person{display:grid;grid-template-columns:120px 1fr;gap:18px;box-shadow:0 6px 30px #000a}
.person .head{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid #111;background:#ccc}
.person .nm{font-family:var(--bang);font-size:34px;letter-spacing:1px;line-height:1}
.person .rel{font:700 14px var(--hand);text-transform:uppercase;color:var(--red);margin:2px 0 6px}
.person p{margin:0 0 10px}
.ages{display:flex;gap:10px;flex-wrap:wrap}
.ages figure{margin:0;text-align:center;font:12px var(--hand)}
.ages img{width:84px;height:84px;object-fit:cover;border:3px solid #111;display:block}
.who-list{columns:2;font:15px/1.6 var(--hand);padding-left:18px}

/* guided (panel by panel) reading */
.guide{position:fixed;inset:0;z-index:200;background:#0b0a09;touch-action:pan-y}
.gview{position:absolute;inset:0 0 64px 0;overflow:hidden}
.gview .page{position:absolute;left:0;top:0;width:1000px;margin:0;transform-origin:0 0;box-shadow:none;
  transition:transform .45s cubic-bezier(.3,.7,.2,1),clip-path .45s cubic-bezier(.3,.7,.2,1)}
.gbar{position:absolute;left:0;right:0;bottom:0;height:64px;display:flex;align-items:center;justify-content:center;gap:16px;background:var(--ink);border-top:4px solid var(--red)}
.gbar button{font-family:var(--bang);font-size:26px;width:52px;height:44px;background:var(--pow);border:3px solid #111;box-shadow:3px 3px 0 #000;cursor:pointer}
.gbar button[data-g=close]{background:#fff;margin-left:20px}
#gcount{font:700 14px var(--hand);color:#efe8da;text-transform:uppercase;min-width:150px;text-align:center}

@media(max-width:760px){
  .grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .s1,.s2,.s3{grid-column:span 1}.s4,.s5,.s6{grid-column:span 2}
  .tile,.tile.s3{aspect-ratio:1/1}.tile.s4,.tile.s6{aspect-ratio:1.8/1}
  .home .hero{aspect-ratio:auto;min-height:520px}
  .home .hero img{height:56%}
  .herotitle{left:10px;right:10px;max-width:none;bottom:10px}
  .resume,.sofar{grid-column:span 2}
  .issuenav{grid-template-columns:1fr 1fr}.navpanel.mid{display:none}
  .person{grid-template-columns:1fr}
  .who-list{columns:1}
  .logo{font-size:30px}
  .mast{position:static;padding:10px 12px}
  .navcap{font-size:11px;padding:6px 7px}
  .genrow{gap:18px}.tnode{width:118px}
  .guided{font-size:18px;right:12px;bottom:12px}
}