:root { --tech-ink:#14212a; --tech-paper:#f7f7f3; --tech-line:#cbd3d6; --tech-accent:#8d3d2f; --tech-muted:#52636b; }
body { background:var(--tech-paper); color:var(--tech-ink); }
.tech-hero { padding:7rem 1.5rem 4rem; border-bottom:1px solid var(--tech-line); background:#e8eeec; }
.tech-wrap { max-width:1120px; margin:0 auto; }
.tech-hero h1 { max-width:780px; margin:.3rem 0 1rem; font-size:clamp(2.3rem, 5vw, 4.8rem); line-height:1.03; letter-spacing:0; }
.tech-hero p { max-width:760px; font-size:1.16rem; line-height:1.65; }
.tech-kicker { font:600 .76rem/1.3 ui-monospace, monospace; color:var(--tech-accent); letter-spacing:.08em; text-transform:uppercase; }
.tech-section { padding:3.5rem 1.5rem; border-bottom:1px solid var(--tech-line); }
.tech-section h2 { font-size:clamp(1.55rem, 3vw, 2.5rem); margin:0 0 1rem; letter-spacing:0; }
.tech-section p { max-width:820px; line-height:1.72; }
.tech-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.2rem; }
.tech-grid > * { min-width:0; }
.tech-table { width:100%; border-collapse:collapse; font-size:.96rem; }
.tech-table th,.tech-table td { padding:.85rem .65rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--tech-line); line-height:1.5; overflow-wrap:anywhere; }
.tech-table th { color:var(--tech-muted); font:600 .75rem/1.2 ui-monospace,monospace; text-transform:uppercase; }
.tech-code { box-sizing:border-box; width:100%; max-width:100%; min-width:0; padding:1.25rem; overflow:auto; background:#17242a; color:#e6f1ed; font: .88rem/1.6 ui-monospace,monospace; }
.tech-note { border-left:4px solid var(--tech-accent); padding:.3rem 0 .3rem 1rem; color:var(--tech-muted); }
.tech-links a { color:var(--tech-accent); font-weight:600; }
.tech-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin:1.4rem 0; background:var(--tech-line); border:1px solid var(--tech-line); }
.tech-flow > div { min-height:118px; padding:1rem; background:var(--tech-paper); }
.tech-flow strong { display:block; margin-bottom:.45rem; color:var(--tech-accent); font:600 .75rem/1.2 ui-monospace,monospace; text-transform:uppercase; }
.tech-flow span { line-height:1.5; }
.tech-media { width:100%; max-height:540px; object-fit:cover; border:1px solid var(--tech-line); }
.tech-caption { margin:.45rem 0 0; color:var(--tech-muted); font-size:.82rem; }
.tech-list { padding-left:1.2rem; line-height:1.7; }
.tech-metric { font:700 1.45rem/1.1 ui-monospace,monospace; color:var(--tech-accent); }
.tech-essay { max-width:880px; }
.tech-essay p { max-width:none; margin:0 0 1.35rem; font-size:1.06rem; line-height:1.82; }
.tech-essay h3 { margin:2.4rem 0 .7rem; font-size:1.35rem; letter-spacing:0; }
.tech-essay blockquote { margin:2rem 0; padding:1rem 1.4rem; border-left:4px solid var(--tech-accent); background:#eceee9; font:500 1.15rem/1.65 Georgia,serif; }
@media (max-width:720px) { .tech-grid { grid-template-columns:1fr; } .tech-hero { padding-top:5.4rem; } .tech-table { table-layout:fixed; } }
@media (max-width:820px) { .tech-flow { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .tech-flow { grid-template-columns:1fr; } }