/* tableski blog: the landing page's slate and cyan, warmed up with a sunrise band per post and amber for numbers. */
:root { --bg:#ffffff; --card:#f3f7fa; --fg:#1a1d21; --muted:#5c6470; --accent:#0e7490; --accent-2:#22d3ee; --amber:#f59e0b; --rose:#f43f5e; --line:#dfe4e9; --band:linear-gradient(120deg,#0e7490 0%,#22d3ee 55%,#fde68a 100%); color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1419; --card:#1a2129; --fg:#e6e9ec; --muted:#9aa4af; --accent:#22d3ee; --accent-2:#67e8f9; --amber:#fbbf24; --rose:#fb7185; --line:#2a333d; --band:linear-gradient(120deg,#0e7490 0%,#22d3ee 55%,#f59e0b 100%); } }
*{box-sizing:border-box} html{background:var(--bg)} body{margin:0;background:var(--bg);color:var(--fg);font:18px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:1100px;margin:0 auto;padding:.5rem clamp(16px,4vw,48px) 0}
h1{font-size:clamp(2rem,5vw,2.8rem);line-height:1.1;margin:0 0 .5rem;letter-spacing:-.015em;overflow-wrap:anywhere}
h2{font-size:1.45rem;margin:2.4rem 0 .7rem;color:var(--accent);padding-left:.8rem;border-left:4px solid var(--accent-2)} h3{font-size:1.1rem;margin:1.6rem 0 .4rem}
.meta{color:var(--muted);margin:0 0 1.6rem;font-size:.95rem}
blockquote.opener{margin:0 0 2rem;padding:1.2rem 1.4rem;border-radius:14px;background:var(--card);border:1px solid var(--line);font-style:italic;font-size:1.2rem;position:relative}
blockquote.opener::before{content:"\201C";position:absolute;left:.7rem;top:-.6rem;font-size:3.6rem;line-height:1;color:var(--amber);font-style:normal;opacity:.9}
blockquote.opener footer{font-style:normal;color:var(--muted);font-size:.9rem;margin-top:.5rem}
figure{margin:2rem 0} figure img{width:100%;max-width:1024px;height:auto;margin:0 auto;border-radius:16px;display:block;box-shadow:0 18px 50px -24px rgb(14 116 144 / .45)} figcaption{color:var(--muted);font-size:.92rem;margin:.6rem auto 0;max-width:80ch;text-align:center}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:.97rem;margin:1rem 0 1.6rem;border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--line);vertical-align:top} thead th{background:var(--card);color:var(--accent);font-weight:600} tr:last-child td{border-bottom:0} tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--card) 55%,transparent)}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--fg);font-weight:500}
pre,code{font-family:ui-monospace,Menlo,Consolas,monospace} code{font-size:.92em;background:var(--card);padding:.1em .35em;border-radius:5px} pre{background:var(--card);border-radius:12px;padding:1rem 1.2rem;overflow-x:auto;font-size:.9rem;line-height:1.5} pre code{background:none;padding:0}
a{color:var(--accent)}
.big{font-size:clamp(3rem,9vw,4.4rem);font-weight:800;letter-spacing:-.03em;line-height:1;margin:1.8rem 0 .3rem;background:var(--band);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.big small{font-size:1rem;font-weight:400;color:var(--muted);letter-spacing:0;display:block;margin-top:.6rem;-webkit-text-fill-color:var(--muted);max-width:60ch;line-height:1.5}
.note{color:var(--muted);font-size:.92rem}
@media (max-width:640px){body{font-size:17px} table{display:block;overflow-x:auto} h2{font-size:1.25rem}}
/* shared site chrome: the same band, nav and footer on the landing, the blog, the legal pages and the app */
.band{height:8px;background:var(--band)}
.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
nav.site{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;padding:1rem 0 1.5rem;font-size:.95rem;margin:0}
nav.site .brand{font-weight:700;font-size:1.25rem;color:var(--fg);text-decoration:none;margin-right:auto;letter-spacing:-.02em}
nav.site .brand span{color:var(--accent)}
nav.site a{color:var(--muted);text-decoration:none} nav.site a:hover{color:var(--fg)}
nav.site a.sign{color:var(--accent);font-weight:600;border:1px solid var(--accent);border-radius:8px;padding:.4rem .9rem} nav.site a.sign:hover{background:var(--accent);color:#fff}
footer.site{border-top:1px solid var(--line);margin-top:3rem;padding:1.4rem 0 2.5rem;color:var(--muted);font-size:.9rem;line-height:1.7} footer.site a{color:var(--muted)}

/* blog index: the newest post as a feature with its picture, the rest as cards whose picture
   alternates sides, each with its own colour */
.posts{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:1.4rem}
.post{--hue:var(--accent);display:grid;grid-template-columns:200px minmax(0,1fr);gap:1.4rem;align-items:center;padding:1.1rem;border:1px solid var(--line);border-radius:18px;background:var(--card);position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.post::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--hue)}
.post:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(14,116,144,.14)}
.post.flip{grid-template-columns:minmax(0,1fr) 200px}
.post.flip .pic{order:2}
.post.flip::before{left:auto;right:0}
.post .pic img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:12px;display:block}
.post .txt{min-width:0}
.post .tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.03em;color:var(--hue);border:1px solid var(--hue);border-radius:999px;padding:.15rem .65rem;margin-bottom:.5rem}
.post h2{margin:0 0 .4rem;font-size:1.4rem;line-height:1.25;border:0;padding:0;color:var(--fg)}
.post h2 a{text-decoration:none;color:inherit} .post h2 a:hover{color:var(--hue)}
.post p{margin:0;color:var(--muted)}
.post time{display:block;margin-top:.7rem;font:500 .78rem/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em;color:var(--hue);opacity:.9}
.post.feature{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2rem;padding:1.4rem;background:linear-gradient(135deg,var(--card) 0%,var(--card) 55%,color-mix(in srgb,var(--hue) 14%,var(--card)) 100%)}
.post.feature::before{width:auto;height:6px;right:0;bottom:auto;background:var(--band)}
.post.feature h2{font-size:clamp(1.6rem,3.2vw,2.2rem)}
.post.feature p{font-size:1.08rem}
.post.feature .pic img{border-radius:14px;box-shadow:0 16px 40px rgba(14,116,144,.2)}
.hue-teal{--hue:#0e7490} .hue-amber{--hue:#d97706} .hue-rose{--hue:#e11d48} .hue-violet{--hue:#7c3aed}
@media (prefers-color-scheme:dark){.hue-teal{--hue:#22d3ee} .hue-amber{--hue:#fbbf24} .hue-rose{--hue:#fb7185} .hue-violet{--hue:#a78bfa}}
@media (max-width:720px){.post,.post.flip,.post.feature{grid-template-columns:minmax(0,1fr)} .post.flip .pic{order:0} .post .pic img{aspect-ratio:16/9}}
@media (prefers-reduced-motion:reduce){.post{transition:none} .post:hover{transform:none}}
@media (max-width:560px){nav.site a:not(.sign):not(.brand):not([href="/blog/"]){display:none}}