/* SellSip: inner pages (blog post, tool result, 404). Loads after tokens.css + styles.css. */
.page{padding:72px 0 96px;background:var(--bg);color:var(--text-on-dark,var(--sec-alt-ink))}
.crumbs{font:700 13px/1.4 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--label,var(--card-label));margin:0 0 18px}
.crumbs a{color:inherit;text-decoration:none}.crumbs a:hover{text-decoration:underline}
/* ---------- blog post ---------- */
.post__head{max-width:900px}
.post__title{font:900 clamp(48px,7vw,92px)/.92 'Sofia Sans Extra Condensed',Impact,'Arial Narrow',sans-serif;text-transform:uppercase;margin:0 0 20px}
.post__title em{font-style:normal;color:var(--ss-welcome-red)}
[data-mode="night"] .post__title em{color:var(--ss-ember)}
.post__dek{font:400 21px/1.5 'Sofia Sans',system-ui,sans-serif;max-width:720px;margin:0 0 26px;opacity:.86}
.byline{display:flex;gap:14px;align-items:center;font:700 13px/1.4 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.byline img{width:52px;height:52px;border-radius:50%;background:var(--ss-crema);border:2px solid currentColor}
.post__hero{margin:40px 0 0;position:relative}
.post__hero img{display:block;width:100%;height:auto;border-radius:6px;border:2px solid var(--ss-roast-black);box-shadow:10px 10px 0 var(--ss-welcome-red)}
.post__hero figcaption{font:400 italic 15px/1.4 'Instrument Serif',Georgia,serif;margin-top:16px;opacity:.8}
.post__grid{display:grid;grid-template-columns:minmax(0,680px) 320px;gap:72px;margin-top:56px;align-items:start}
.prose{font:400 19px/1.7 'Sofia Sans',system-ui,sans-serif}
.prose h2{font:900 40px/1 'Sofia Sans Extra Condensed',Impact,sans-serif;text-transform:uppercase;margin:44px 0 12px}
.prose p{margin:0 0 20px}
.prose blockquote{margin:30px 0;padding:22px 26px;background:var(--ss-copy-blue);color:var(--ss-white);border-radius:18px;font:400 26px/1.3 'Instrument Serif',Georgia,serif}
[data-mode="night"] .prose blockquote{background:var(--ss-night-slip);color:var(--ss-crema)}
.prose ol{padding-left:0;list-style:none;counter-reset:n}
.prose ol li{counter-increment:n;position:relative;padding-left:52px;margin:0 0 14px}
.prose ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;font:700 17px/1.7 'JetBrains Mono',monospace;color:var(--ss-welcome-red)}
[data-mode="night"] .prose ol li::before{color:var(--ss-ember)}
.prose a{color:var(--ss-copy-blue)}[data-mode="night"] .prose a{color:var(--ss-ember)}
.aside{position:sticky;top:100px;display:grid;gap:24px}
.aside .receipt{position:relative;width:auto;transform:rotate(1.2deg)}
.aside__mug{width:180px;margin:-10px 0 0 auto;display:block}
.related{border-top:2px solid currentColor;margin-top:72px;padding-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.related a{color:inherit;text-decoration:none}.related h3{font:900 26px/1.05 'Sofia Sans Extra Condensed',sans-serif;text-transform:uppercase;margin:6px 0}
.related .tag{font:700 12px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ss-copy-blue)}
[data-mode="night"] .related .tag{color:var(--ss-ember)}
/* ---------- tool result ---------- */
.result{display:grid;grid-template-columns:1fr 460px;gap:72px;align-items:start}
.result__title{font:900 clamp(56px,8vw,112px)/.9 'Sofia Sans Extra Condensed',Impact,sans-serif;text-transform:uppercase;margin:0 0 18px}
.result__title em{font-style:normal;color:var(--ss-welcome-red)}[data-mode="night"] .result__title em{color:var(--ss-ember)}
.result__lede{font:400 21px/1.5 'Sofia Sans',sans-serif;max-width:560px;margin:0 0 28px}
.next{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:12px;max-width:580px}
.next li{display:flex;gap:16px;padding:16px 18px;background:var(--card);color:var(--card-ink);border:2px solid var(--ss-roast-black);border-radius:6px;font:500 17px/1.45 'Sofia Sans',sans-serif}
.next b{font:700 15px/1.6 'JetBrains Mono',monospace;color:var(--ss-copy-blue)}[data-mode="night"] .next b{color:var(--ss-ember)}
.share{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.share small{font:500 13px/1.4 'JetBrains Mono',monospace;opacity:.75;flex-basis:100%}
.result__paper{position:relative}
.result__paper .receipt{position:relative;width:auto;transform:rotate(-1.5deg)}
.result__paper .receipt{padding-bottom:200px}
.result__paper .r-stamp{width:56%;bottom:40px;right:8%}
.result__paper .r-foot{position:absolute;left:22px;bottom:18px;margin:0}
.result__mug{position:absolute;width:160px;left:-120px;bottom:-96px}
.edit{margin-top:56px;font:500 15px/1.5 'Sofia Sans',sans-serif}
.edit a{color:var(--ss-copy-blue)}[data-mode="night"] .edit a{color:var(--ss-ember)}
/* ---------- 404 ---------- */
.lost{display:grid;grid-template-columns:1fr 520px;gap:48px;align-items:center;min-height:620px}
.lost__code{font:900 15px/1 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--ss-copy-blue)}
[data-mode="night"] .lost__code{color:var(--ss-ember)}
.lost h1{font:900 clamp(64px,9vw,128px)/.88 'Sofia Sans Extra Condensed',Impact,sans-serif;text-transform:uppercase;margin:14px 0 18px}
.lost h1 em{font-style:normal;color:var(--ss-welcome-red)}[data-mode="night"] .lost h1 em{color:var(--ss-ember)}
.lost p{font:400 21px/1.5 'Sofia Sans',sans-serif;max-width:520px}
.lost__art{position:relative}
.lost__art img.mug{width:100%;display:block}
.lost__bubble{position:absolute;right:0;top:4%;max-width:220px;margin:0;padding:16px 18px;background:var(--ss-copy-blue);color:var(--ss-white);border-radius:18px;font:400 24px/1.2 'Instrument Serif',Georgia,serif!important;transform:rotate(3deg);box-shadow:0 0 0 3px var(--ss-roast-black),6px 6px 0 3px var(--ss-roast-black)}
[data-mode="night"] .lost__bubble{background:var(--ss-ember);color:var(--ss-roast-black)}
.lost__links{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
@media (max-width:900px){
 .post__grid,.result,.lost{grid-template-columns:1fr;gap:40px}
 .aside{position:static}.related{grid-template-columns:1fr}
 .result__mug{left:auto;right:-10px;width:120px;bottom:-50px}
 .lost{min-height:0}.lost__art{max-width:360px}.lost__bubble{font-size:19px!important;max-width:170px}
 .page{padding:40px 0 72px}
}