/* willytai.com — hub pages (home, demos, articles). Sits on gazette.css. Sept 2026. */
.siteline{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);min-width:1ch}
.siteline .cur{color:var(--accent)}
/* hero */
.hero2{display:grid;grid-template-columns:1.35fr 1fr;gap:0 44px;padding:34px 0 30px;border-bottom:1px solid var(--ink)}
.hero2 h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.4vw,52px);line-height:1.04;letter-spacing:-.018em;color:var(--ink);margin:0 0 18px;text-wrap:balance}
.hero2 .sub{font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--body);margin:0 0 18px;max-width:56ch}
.rotor{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--muted);margin:0 0 22px;min-height:1.6em}
.rotor a{color:var(--accent);border-bottom:1px solid transparent;transition:opacity .25s ease,border-color .2s}
.rotor a:hover{border-color:var(--accent)}
.rotor a.fade{opacity:0}
.hero2 .ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn2{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--bg);padding:12px 22px;font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.btn2:hover{background:var(--accent);color:#fff}
.btn2.ghost{background:none;color:var(--ink);border:1px solid var(--ink)}
.btn2.ghost:hover{color:var(--accent);border-color:var(--accent);background:none}
.hero2 .side{border-left:1px solid var(--rule);padding-left:34px;display:flex;flex-direction:column;gap:14px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--ink)}
.stats div{padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div:nth-child(2n){border-right:none}.stats div:nth-child(n+3){border-bottom:none}
.stats b{display:block;font-family:var(--serif);font-size:26px;font-weight:600;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.stats span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero2 .side p{font-family:var(--serif);font-size:14.5px;line-height:1.55;color:var(--body);margin:0}
.hero2 .side .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted);line-height:1.6}
/* one-time reveal: base state is visible; the keyframe only supplies the start */
@keyframes rise{from{opacity:0;transform:translateY(10px);filter:blur(6px)}}
.reveal>*{animation:rise .7s cubic-bezier(.22,1,.36,1) both}
.reveal>*:nth-child(1){animation-delay:.05s}.reveal>*:nth-child(2){animation-delay:.15s}.reveal>*:nth-child(3){animation-delay:.25s}.reveal>*:nth-child(4){animation-delay:.35s}
/* section head */
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:18px;border-bottom:3px solid var(--ink);padding:26px 0 10px;margin-bottom:14px;flex-wrap:wrap}
.shead h2{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:-.014em;margin:0}
.shead .pn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent);margin-right:12px}
.shead .more{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--accent)}
.shead .more:hover{text-decoration:underline}
/* chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;align-items:center}
.chips .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);margin-right:4px}
.chip{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* demo grid */
.demogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 26px}
.dcard{display:flex;flex-direction:column;border-top:1px solid var(--ink);padding-top:14px}
.dcard[hidden]{display:none}
.dcard .tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;display:flex;gap:8px;align-items:center}
.dcard .tag .tr{color:var(--muted)}
.dcard h3{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.15;margin:0 0 8px;color:var(--ink)}
.dcard h3 a:hover{color:var(--accent)}
.dcard p{font-family:var(--serif);font-size:14px;line-height:1.5;color:var(--body);margin:0 0 12px;flex:1}
.dcard .links{display:flex;gap:16px;align-items:center;font-family:var(--ui);font-size:12px;font-weight:600}
.dcard .links .go{color:var(--accent)}
.dcard .links .go:hover{text-decoration:underline}
.dcard .links .cs{color:var(--muted)}
.dcard .links .cs:hover{color:var(--ink)}
.demo-slot{position:relative;border:1px solid var(--ink);background:var(--card);aspect-ratio:16/10;overflow:hidden;margin-bottom:12px}
.demo-slot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.dcard:hover .demo-slot img{transform:scale(1.025)}
.demo-slot .run{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;font:600 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--bg);background:var(--ink);border:0;padding:10px 12px;text-align:left;cursor:pointer;opacity:.92}
.demo-slot .run:hover{background:var(--accent);opacity:1}
.demo-slot .run .kb{font-family:var(--mono);font-weight:400;letter-spacing:.04em;opacity:.8;text-transform:none}
.demo-slot iframe{width:100%;height:100%;border:0;display:block;background:var(--bg)}
.demo-slot .close{position:absolute;top:8px;right:8px;z-index:2;font:600 11px var(--ui);letter-spacing:.06em;color:var(--ink);background:var(--card);border:1px solid var(--ink);padding:5px 9px;cursor:pointer}
.demo-slot .close:hover{background:var(--ink);color:var(--bg)}
.dcard.is-live{grid-column:1/-1}
.dcard.is-live .demo-slot{aspect-ratio:auto;height:min(78vh,720px)}
.dcard.is-live .demo-slot img,.dcard.is-live .demo-slot .run{display:none}
/* series band */
.seriesband{display:grid;grid-template-columns:1.2fr 1fr;gap:0 40px;padding:6px 0 26px;border-bottom:1px solid var(--ink)}
.seriesband .lead h3{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.15;margin:0 0 10px}
.seriesband .lead h3 a:hover{color:var(--accent)}
.seriesband .lead p{font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--body);margin:0 0 12px}
.seriesband ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule);padding-left:26px}
.seriesband ol li{padding:9px 0;border-bottom:1px solid var(--line)}
.seriesband ol li>a{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:baseline}
.seriesband ol li:last-child{border-bottom:none}
.seriesband ol .n{font-family:var(--mono);font-size:11px;color:var(--accent)}
.seriesband ol .t{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);line-height:1.25}
.seriesband ol a:hover .t{color:var(--accent)}
.seriesband ol .d{font-family:var(--ui);font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
/* record strip */
.record{display:grid;grid-template-columns:repeat(3,1fr);gap:0 30px;padding:4px 0 26px;border-bottom:1px solid var(--ink)}
.record .r .who{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.record .r .what{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--body)}
.record .r .what b{color:var(--ink);font-weight:600}
/* writing list */
.writelist{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;padding:0 0 24px;border-bottom:1px solid var(--ink)}
.writelist a{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.writelist a .m{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted);line-height:1.5}
.writelist a .t{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink);line-height:1.25}
.writelist a:hover .t{color:var(--accent)}
.writelist a .d{font-family:var(--ui);font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}
/* bring */
.bring{display:grid;grid-template-columns:repeat(3,1fr);gap:0 30px;padding:4px 0 28px;border-bottom:1px solid var(--ink)}
.bring .b .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--accent);margin-bottom:8px}
.bring .b h3{font-family:var(--serif);font-size:19px;font-weight:600;margin:0 0 8px;line-height:1.2}
.bring .b p{font-family:var(--serif);font-size:14.5px;line-height:1.55;color:var(--body);margin:0}
.pull2{text-align:center;padding:50px 0}
.pull2 p{font-family:var(--serif);font-style:italic;font-weight:500;font-size:28px;line-height:1.36;color:var(--ink);margin:0 auto 18px;max-width:30ch}
/* page head (subpages) */
.phead{padding:26px 0 18px;border-bottom:1px solid var(--ink)}
.phead .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.phead h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4vw,46px);line-height:1.06;letter-spacing:-.016em;margin:0 0 12px;text-wrap:balance}
.phead .deck{font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--body);max-width:64ch;margin:0}
.earlier{padding:8px 0 26px}
.earlier a{display:grid;grid-template-columns:1fr 2fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);align-items:baseline}
.earlier a .t{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink)}
.earlier a:hover .t{color:var(--accent)}
.earlier a .d{font-family:var(--ui);font-size:12.5px;color:var(--muted)}
.honest2{font-family:var(--ui);font-size:12.5px;line-height:1.6;color:var(--muted);border:1px solid var(--line);padding:12px 14px;margin:18px 0 0}
.honest2 b{color:var(--ink)}
@media(max-width:1023px){
 .hero2{grid-template-columns:1fr}.hero2 .side{border-left:none;padding-left:0;border-top:1px solid var(--rule);padding-top:18px;margin-top:18px}
 .demogrid{grid-template-columns:repeat(2,1fr)}.seriesband,.writelist{grid-template-columns:1fr}.record,.bring{grid-template-columns:1fr;gap:16px 0}
}
@media(max-width:639px){.demogrid{grid-template-columns:1fr}.dcard.is-live .demo-slot{height:70vh}.stats b{font-size:22px}.pull2 p{font-size:21px}}
.mono{font-family:var(--mono)}
.dcard{scroll-margin-top:72px}
/* operating picture (hero side) */
.hero2 .byline2{font-family:var(--serif);font-size:13.5px;line-height:1.55;color:var(--muted);margin:22px 0 0;max-width:56ch}
.oppic{display:flex;flex-direction:column;gap:10px;color:inherit;border-left:1px solid var(--rule);padding-left:34px}
.op-head{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted)}
.op-head .op-go{color:var(--accent);letter-spacing:.06em;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.oppic:hover .op-go{transform:translateX(3px)}
.opsvg{width:100%;height:auto;display:block;background:var(--card);border:1px solid var(--ink)}
.opsvg .ln{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.opsvg .ln .fl line{stroke:var(--line);}
.opsvg .ln .win line{stroke:var(--line);stroke-dasharray:2 3}
.opsvg .ln .riser{stroke:var(--tech);stroke-width:1.4;opacity:.55}
.opsvg .ln .pipe{stroke:var(--tech);stroke-width:1.6}
.opsvg .ln .pipe.flow{stroke:var(--card);stroke-dasharray:3 6;animation:opflow 1.4s linear infinite}
@keyframes opflow{to{stroke-dashoffset:-18}}
.opsvg .pt circle{fill:var(--tech);stroke:var(--card);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:oppulse 2.6s ease-in-out infinite}
.opsvg .pt:nth-child(2) circle{animation-delay:.4s}.opsvg .pt:nth-child(3) circle{animation-delay:.9s}.opsvg .pt:nth-child(4) circle{animation-delay:1.3s}.opsvg .pt:nth-child(5) circle{animation-delay:1.8s}.opsvg .pt:nth-child(6) circle{animation-delay:2.2s}
@keyframes oppulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.opsvg .pt text{font-family:var(--mono);font-size:7.5px;letter-spacing:.04em;fill:var(--muted)}
.opsvg .pt.hot circle{fill:var(--accent);animation:ophot 1.1s ease-in-out infinite}
@keyframes ophot{0%,100%{transform:scale(1)}50%{transform:scale(1.7)}}
.opsvg .pt.hot text{fill:var(--accent);font-weight:600}
.op-tick{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--body);border-top:1px solid var(--line);padding-top:8px;min-height:2.6em}
.op-tick .op-pt{color:var(--accent);font-weight:600;letter-spacing:.04em}
.op-tick.fade .op-msg,.op-tick.fade .op-pt{opacity:0}
.op-tick .op-msg,.op-tick .op-pt{transition:opacity .25s ease}
[data-theme="dark"] .opsvg{background:var(--card)}
@media(max-width:1023px){.oppic{border-left:none;padding-left:0;border-top:1px solid var(--rule);padding-top:18px;margin-top:18px}}
.opsvg .gd{fill:var(--rule);opacity:.7}
.opsvg .tb text{font-family:var(--mono);font-size:6.5px;letter-spacing:.08em;fill:var(--muted)}
/* episode states on the operating picture */
.opsvg .pt.lit circle{fill:var(--tech)}
.opsvg.strip .pt text{font-size:8px;fill:var(--ink);font-weight:600}
.opsvg.strip a.pt{cursor:pointer}
.opsvg.strip a.pt:hover text{fill:var(--accent)}
.opsvg.strip a.pt:hover circle{fill:var(--accent)}
.oppic[data-st="alarm"] .opsvg .riser,.oppic[data-st="alarm"] .opsvg .pipe{stroke:var(--wt-observe,#C08A2E)}
.oppic[data-st="alarm"] .opsvg .pipe.flow{animation-duration:.7s}
.oppic[data-st="hold"] .opsvg .riser,.oppic[data-st="hold"] .opsvg .pipe{stroke:var(--wt-observe,#C08A2E)}
.oppic[data-st="hold"] .opsvg .pipe.flow{animation-play-state:paused}
.oppic[data-st="ok"] .opsvg .riser,.oppic[data-st="ok"] .opsvg .pipe{stroke:var(--ok)}
.oppic[data-st="alarm"] .op-tick .op-pt,.oppic[data-st="hold"] .op-tick .op-pt{color:var(--wt-observe,#C08A2E)}
.oppic[data-st="ok"] .op-tick .op-pt{color:var(--ok)}
.op-tick .op-st{grid-column:1/-1;font-size:9.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.op-tick .op-st:empty{display:none}
.opsvg .riser,.opsvg .pipe,.op-tick .op-pt{transition:stroke .4s ease,color .4s ease}
/* demos page strip */
.phead-strip{display:grid;grid-template-columns:1.1fr 1fr;gap:0 44px;align-items:end}
.phead-strip .strip{display:flex;flex-direction:column;gap:8px;padding-bottom:4px}
.phead-strip .op-head .muted{color:var(--muted)}
@media(max-width:1023px){.phead-strip{grid-template-columns:1fr}.phead-strip .strip{margin-top:18px}}
/* hero v3: headline, then the product */
.hero3{padding:30px 0 26px;border-bottom:1px solid var(--ink)}
.hero3-top{display:grid;grid-template-columns:1.25fr 1fr;gap:0 48px;align-items:end;margin-bottom:24px}
.hero3 h2{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.8vw,58px);line-height:1.02;letter-spacing:-.02em;color:var(--ink);margin:0;text-wrap:balance}
.hero3-aside .sub{font-family:var(--serif);font-size:16.5px;line-height:1.5;color:var(--body);margin:0 0 16px}
.hero3-aside .ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.hero3-aside .rotor{margin:0}
.feature{margin:0}
.feature .demo-slot{aspect-ratio:16/9;border:1px solid var(--ink);background:#FBFAF7;position:relative;overflow:hidden}
.feature .demo-slot img{object-fit:contain;object-position:center;background:#FBFAF7}
.feature .demo-slot .run{font-size:12px;padding:12px 16px}
.feature.is-live .demo-slot{aspect-ratio:auto;height:min(80vh,760px)}
.feature.is-live .demo-slot img,.feature.is-live .demo-slot .run{display:none}
.feature figcaption{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:baseline;padding:10px 0 0;font-family:var(--ui);font-size:12.5px;line-height:1.5;color:var(--muted)}
.feature figcaption .fk{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--accent)}
.feature figcaption .ft b{color:var(--ink);font-family:var(--serif);font-size:14px}
.feature figcaption .fl{color:var(--accent);font-weight:600;white-space:nowrap}
.feature figcaption .fl:hover{text-decoration:underline}
.hero3 .byline2{font-family:var(--serif);font-size:13.5px;line-height:1.55;color:var(--muted);margin:18px 0 0;max-width:80ch}
@media(max-width:1023px){.hero3-top{grid-template-columns:1fr;gap:16px 0}.feature figcaption{grid-template-columns:1fr}.feature .demo-slot{aspect-ratio:16/10}}
.strip-grid{display:grid;grid-template-columns:1fr 150px;gap:0 16px;align-items:start}
.strip-key{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.strip-key li{border-bottom:1px solid var(--line)}
.strip-key a{display:grid;grid-template-columns:24px 1fr;gap:6px;padding:6px 0;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ink);line-height:1.3}
.strip-key a:hover{color:var(--accent)}
.strip-key .n{font-family:var(--mono);font-size:10px;color:var(--accent);font-weight:400}
.strip-note{font-family:var(--ui);font-size:11.5px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.opsvg.strip .tb{display:none}
.opsvg.strip .pt text{font-size:8.5px;font-weight:600;fill:var(--accent)}
@media(max-width:639px){.strip-grid{grid-template-columns:1fr}}