/* The article design ("D", 2026-09-29). Markup: engine/article_view.py. Behavior: js/article.js. */
.art{--sky:#CFE8FA;--palm:#D4EDC9;--sun:#FFE2BC}
.art p{font-size:18px;line-height:1.7}
.art h2{font-size:clamp(32px,8vw,52px)}
/* the puma runs along the top as you read */
.runner{position:fixed;left:0;right:0;top:63px;height:30px;z-index:45;pointer-events:none}
.runner i{position:absolute;left:0;right:0;top:13px;height:4px;background:linear-gradient(90deg,var(--yellow) var(--k,0%),rgba(16,32,26,.15) 0)}
.runner img{position:absolute;top:0;left:calc(var(--k,0%) - 15px);width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);object-fit:cover;object-position:50% 12%}
.runner span{position:absolute;right:8px;top:-2px;font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:#fff;padding:3px 7px;border-radius:99px}
.runner b{color:var(--yellow)}
/* the opening: the puma in the grimy photo, a clean stripe wipes across as you scroll */
.sh{margin:0 -20px;height:165vh;position:relative}
.sh-pin{position:sticky;top:63px;height:calc(100vh - 63px);height:calc(100svh - 63px);overflow:hidden;background:#3a3a2a}
.sh-pin>img.bef,.sh-pin>img.aft{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sh-pin>img.aft{clip-path:polygon(0 calc(64% - var(--w,0%)),100% calc(40% - var(--w,0%)),100% calc(40% + var(--w,0%)),0 calc(64% + var(--w,0%)))}
.sh .scrim{position:absolute;inset:0;background:linear-gradient(rgba(255,244,222,.94) 0,rgba(255,244,222,.6) 34%,rgba(255,244,222,0) 54%)}
.sh .puma{position:absolute;right:-8px;bottom:0;height:54%;max-height:520px;filter:drop-shadow(0 16px 14px rgba(0,0,0,.35))}
.sh .t{position:absolute;left:20px;right:20px;top:36px}
.sh .t .crumbs{margin:0 0 10px;font-size:13px}
.sh .t h1{font-size:clamp(38px,10.5vw,84px);max-width:12ch;margin:6px 0 0}
.sh .hint{position:absolute;left:20px;bottom:18px;margin:0;font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
@media (min-width:760px){.sh .puma{right:6%;height:66%}.sh .t{left:40px;top:28px}.sh .scrim{background:linear-gradient(90deg,rgba(255,244,222,.94) 0,rgba(255,244,222,.55) 42%,rgba(255,244,222,0) 62%)}}
/* the puma talks */
.say{display:flex;gap:12px;align-items:flex-start;margin:28px 0}
.say img,.tip img,.chat .a img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 12%;border:2px solid var(--ink);flex:none}
.say p,.tip p{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:14px 16px;margin:0;color:var(--ink)}
.say p{font-size:19px;box-shadow:5px 5px 0 var(--yellow)}
.tip{display:flex;gap:10px;margin:24px 0}
.tip p{font-size:16px!important;box-shadow:5px 5px 0 var(--ink)}
.toc{display:grid;gap:9px;margin:26px 0;padding:18px;border-radius:18px;background:var(--concrete)}
.toc b{font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.toc a{display:flex;gap:12px;align-items:baseline;text-decoration:none;color:var(--ink);font-weight:600;line-height:1.3}
.toc a span{font:700 13px var(--mono);color:var(--blue)}
/* sections on wavy color bands */
.band{margin:0 -20px;padding:36px 20px 42px;border:0;position:relative;background:var(--bg)}
.band.sky{--bg:var(--sky)}.band.palm{--bg:var(--palm)}.band.sun{--bg:var(--sun)}
.band::before{content:"";position:absolute;left:0;right:0;top:-22px;height:24px;background:var(--bg);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V12C60 0 110 0 170 10S290 26 400 8V24Z'/%3E%3C/svg%3E") center/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V12C60 0 110 0 170 10S290 26 400 8V24Z'/%3E%3C/svg%3E") center/100% 100%}
.band>*{max-width:720px}
.band .n{display:block;font:900 64px/.8 var(--display);color:var(--yellow);-webkit-text-stroke:2px var(--ink);margin-bottom:8px}
.band h2{margin-bottom:18px}
.hl{margin:22px 0}.hl mark{background:linear-gradient(transparent 55%,var(--yellow) 55%);font:800 26px/1.15 var(--display);text-transform:uppercase;color:var(--ink);padding:0 2px}
.step{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:16px 18px;margin:14px 0;box-shadow:5px 5px 0 var(--ink)}
.step span{font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.step b{display:block;font:800 24px/1.05 var(--display);text-transform:uppercase;margin:6px 0 8px;color:var(--ink)}
.step p{margin:0;font-size:16px!important}
/* the real price box */
.price{background:var(--ink);color:#fff;margin:0 -20px;padding:42px 20px}
.price h2{color:#fff}.price .kicker{color:var(--yellow)}
.price .addr{display:flex;flex-wrap:wrap;gap:8px;max-width:640px}
.price input{flex:1 1 220px;min-width:0;border:2px solid #fff;border-radius:14px;padding:14px;font:500 16px var(--body)}
.price .small{color:#E9E1D2;font-size:14px}
/* questions as a chat with the puma */
.chat{display:grid;gap:12px}
.chat .q{justify-self:end;max-width:85%;background:var(--yellow);border:2px solid var(--ink);border-radius:18px 18px 4px 18px;padding:12px 14px;margin:0;font-weight:700;color:var(--ink);font-size:17px}
.chat .a{display:flex;gap:10px;align-items:flex-end;max-width:94%}
.chat .a p{background:#fff;border:2px solid var(--ink);border-radius:18px 18px 18px 4px;padding:12px 14px;margin:0;font-size:16px}
.more{padding-block:34px}
/* the ending */
.fin{margin:0 -20px;padding:52px 20px;background:var(--ink);color:#fff;border:0}
.fin h2{color:#fff;font-size:clamp(56px,16vw,120px)}.fin h2 em{font-style:normal;color:var(--yellow)}
.fin .cap{color:#E9E1D2;font-size:13px}
.ba{position:relative;margin:26px 0 8px;border-radius:20px;overflow:hidden;aspect-ratio:4/3;border:2px solid #fff;max-width:720px}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .aft{clip-path:inset(0 0 0 var(--p))}
.ba::after{content:"";position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:#fff}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .l,.ba .r{position:absolute;top:12px;font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;background:rgba(16,32,26,.8);color:#fff;padding:6px 9px;border-radius:8px}
.ba .l{left:12px}.ba .r{right:12px;background:var(--yellow);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.sh{height:auto}.sh-pin{position:relative;height:78vh}.sh-pin>img.aft{clip-path:none}}