/* Theme tokens. Dark is the default (Zack's choice). An inline script in <head> sets
   html[data-theme] from localStorage or prefers-color-scheme before this file paints.
   Without JS, the media query below picks light only when the device asks for it. */
:root,[data-theme=dark]{color-scheme:dark;
 --bg:#15181c;--bar:#0f1114;--bar-glass:rgba(15,17,20,.94);--card:#1e2227;--card-2:#262b32;--card-2-hi:#323841;--line:#30363e;--field-line:#6b7580;
 --ink:#e6e9ed;--heading:#f4f6f8;--muted:#a3adb8;--lede:#cfd5dc;
 --accent:#f28c3c;--accent-hi:#ffa65e;--link:#f28c3c;--link-hi:#ffa65e;--req:#f28c3c;
 --btn:#f28c3c;--btn-hi:#ffa65e;--on-accent:#14161a;--focus:#ffbf80;--steel:#3a4552;
 --ghost-line:#8a949f;--ghost-hi-ink:#fff;
 --hero-bg:radial-gradient(ellipse 60% 70% at 75% 50%,#262b32 0%,rgba(38,43,50,0) 70%),linear-gradient(180deg,#1a1e23,#15181c);
 --head-bg:linear-gradient(180deg,#1b1f24,#15181c);
 --frame-bg:linear-gradient(160deg,#2a3038,#1c2025);--frame-line:#3a414a;--frame-shadow:0 18px 40px rgba(0,0,0,.45);
 --callout-bg:#251f1a;--callout-line:#4d3a2a;
 --soon-line:#56626f;--tag-bg:#262b32;--tag-ink:#d3d9e0;--tag-line:#3d444d;
 --input-bg:#101317;--placeholder:#8d97a2;--invalid:#ff8a8a;
 --ok-bg:#15291c;--ok-line:#4fae6c;--err-bg:#2e1719;--err-line:#ff8a8a;--msg-link:#ffa65e;
 --footer-ink:#b9c2cc;--footer-strong:#e6e9ed;--cta-bg:#1e2227}
[data-theme=light]{color-scheme:light;
 --bg:#f6f7f9;--bar:#2b3440;--bar-glass:rgba(43,52,64,.97);--card:#fff;--card-2:#eef1f4;--card-2-hi:#e2e6eb;--line:#dde1e6;--field-line:#8a939e;
 --ink:#16191d;--heading:#16191d;--muted:#5a6370;--lede:#333b45;
 --accent:#d9661f;--accent-hi:#b4511a;--link:#b4511a;--link-hi:#8f3f14;--req:#b4511a;
 --btn:#b4511a;--btn-hi:#8f3f14;--on-accent:#fff;--focus:#b4511a;--steel:#2b3440;
 --ghost-line:#16191d;--ghost-hi-ink:#16191d;
 --hero-bg:linear-gradient(180deg,#fff,#eef1f4);
 --head-bg:#fff;
 --frame-bg:linear-gradient(160deg,#fff,#eef1f4);--frame-line:#dde1e6;--frame-shadow:0 10px 30px rgba(0,0,0,.15);
 --callout-bg:#fff7f0;--callout-line:#f1c9a8;
 --soon-line:#2b3440;--tag-bg:#eef1f4;--tag-ink:#16191d;--tag-line:#dde1e6;
 --input-bg:#fff;--placeholder:#6b737e;--invalid:#c62828;
 --ok-bg:#eaf7ee;--ok-line:#9bd3ac;--err-bg:#fdecec;--err-line:#efa3a3;--msg-link:#8f3f14;
 --footer-ink:#cfd6de;--footer-strong:#fff;--cta-bg:#fff}
@media (prefers-color-scheme:light){:root:not([data-theme]){color-scheme:light;
 --bg:#f6f7f9;--bar:#2b3440;--bar-glass:rgba(43,52,64,.97);--card:#fff;--card-2:#eef1f4;--card-2-hi:#e2e6eb;--line:#dde1e6;--field-line:#8a939e;
 --ink:#16191d;--heading:#16191d;--muted:#5a6370;--lede:#333b45;
 --accent:#d9661f;--accent-hi:#b4511a;--link:#b4511a;--link-hi:#8f3f14;--req:#b4511a;
 --btn:#b4511a;--btn-hi:#8f3f14;--on-accent:#fff;--focus:#b4511a;--steel:#2b3440;
 --ghost-line:#16191d;--ghost-hi-ink:#16191d;
 --hero-bg:linear-gradient(180deg,#fff,#eef1f4);--head-bg:#fff;
 --frame-bg:linear-gradient(160deg,#fff,#eef1f4);--frame-line:#dde1e6;--frame-shadow:0 10px 30px rgba(0,0,0,.15);
 --callout-bg:#fff7f0;--callout-line:#f1c9a8;
 --soon-line:#2b3440;--tag-bg:#eef1f4;--tag-ink:#16191d;--tag-line:#dde1e6;
 --input-bg:#fff;--placeholder:#6b737e;--invalid:#c62828;
 --ok-bg:#eaf7ee;--ok-line:#9bd3ac;--err-bg:#fdecec;--err-line:#efa3a3;--msg-link:#8f3f14;
 --footer-ink:#cfd6de;--footer-strong:#fff;--cta-bg:#fff}}
:root{--max:1100px;--r:10px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:2px}
a:hover{color:var(--link-hi)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;color:var(--heading)}
h1{font-size:clamp(1.8rem,4.5vw,2.8rem)}
h2{font-size:clamp(1.35rem,3vw,1.8rem);margin-top:1.6em}
h3{font-size:1.15rem}
p,ul,ol{margin:0 0 1em}
strong{color:var(--heading)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:var(--btn);color:var(--on-accent);padding:8px 12px;z-index:10}
/* header: dark bar in both themes (near-black in dark, steel in light) */
.site-header{--focus:#ffbf80;background:var(--bar-glass);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);color:#e6e9ed;position:sticky;top:0;z-index:5}
[data-theme=light] .site-header{border-bottom-color:var(--bar)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.brand{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:10px;margin-right:auto}
.brand:hover{color:#fff}
.brand svg{width:30px;height:30px;flex:none}
.nav{display:flex;gap:4px 18px;align-items:center;flex-wrap:wrap}
.nav a{color:#d3d9e0;text-decoration:none;font-size:.95rem;padding:6px 0}
.nav a:hover,.nav a[aria-current=page]{color:#fff;text-decoration:underline;text-decoration-color:#f28c3c;text-decoration-thickness:2px;text-underline-offset:6px}
.nav a.btn{padding:8px 14px;text-decoration:none;color:var(--on-accent)}
.nav a.btn:hover{color:var(--on-accent)}
.header-tools{display:flex;align-items:center;gap:8px;order:3}
.nav{order:2}
.theme-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:1px solid #8a949f;border-radius:8px;color:#fff;cursor:pointer}
[data-theme] .theme-toggle{display:inline-flex}
.theme-toggle:hover{background:rgba(255,255,255,.1);border-color:#c3cad2}
.theme-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
[data-theme=dark] .theme-toggle .i-sun{display:block}
[data-theme=dark] .theme-toggle .i-moon{display:none}
.nav-toggle{display:none;min-height:44px;background:none;border:1px solid #8a949f;color:#fff;border-radius:8px;padding:6px 14px;font:inherit;cursor:pointer}
@media (max-width:760px){
 .nav-toggle{display:block}
 .header-tools{order:2}
 .nav{order:3;display:none;width:100%;flex-direction:column;align-items:flex-start;padding:0 0 14px}
 .nav.open{display:flex}
 .nav a{padding:10px 0}
 .site-header .wrap{gap:10px}
 .brand{flex:1 1 0;min-width:0}
 .brand span{line-height:1.2}
}
/* buttons */
.btn{display:inline-block;background:var(--btn);color:var(--on-accent);text-decoration:none;border:0;border-radius:8px;padding:12px 20px;font-weight:700;font-size:1rem;cursor:pointer}
.btn:hover{background:var(--btn-hi);color:var(--on-accent)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ghost-line)}
.btn.ghost:hover{background:var(--card-2);border-color:var(--ink);color:var(--ghost-hi-ink)}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin:1.2em 0}
/* hero */
.hero{background:var(--hero-bg);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center;padding-top:48px;padding-bottom:48px}
.hero .lede{font-size:1.1rem;color:var(--lede)}
.hero .loc{color:var(--muted);font-size:.95rem}
.hero figure,.render-frame{background:var(--frame-bg);border:1px solid var(--frame-line);border-radius:14px;padding:10px;box-shadow:var(--frame-shadow)}
.hero img,.render-frame img{border-radius:8px}
.hero figcaption,.render-frame figcaption{padding:4px 4px 0}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;padding-top:28px}}
/* sections */
main section{padding:36px 0}
.page-head{background:var(--head-bg);border-bottom:1px solid var(--line);padding:36px 0 24px}
.page-head p{color:var(--lede);max-width:760px;font-size:1.08rem}
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card h3{margin-top:0}
.card ul{padding-left:1.2em;margin-bottom:0}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 18px 60px;position:relative}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:50%;background:var(--btn);color:var(--on-accent);display:grid;place-items:center;font-weight:700}
.callout{background:var(--callout-bg);border:1px solid var(--callout-line);border-left:5px solid var(--accent);border-radius:var(--r);padding:18px 20px}
.soon{display:inline-block;background:var(--steel);color:#fff;border:1px solid var(--soon-line);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:4px;padding:2px 8px;vertical-align:middle}
.tag{display:inline-block;font-size:.8rem;background:var(--tag-bg);color:var(--tag-ink);border:1px solid var(--tag-line);border-radius:999px;padding:2px 10px;margin:0 6px 6px 0}
.muted{color:var(--muted)}
.small{font-size:.88rem}
/* tables: light "paper" card in both themes so comparisons stay easy to read */
table{--ink:#16191d;--heading:#16191d;--muted:#5a6370;--link:#b4511a;--link-hi:#8f3f14;--focus:#b4511a;width:100%;border-collapse:collapse;background:#fff;color:#16191d;border:1px solid #dde1e6;border-radius:var(--r);overflow:hidden;margin:0 0 1em}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid #dde1e6;vertical-align:top}
th{background:#eef1f4;font-weight:600;color:#16191d}
tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto}
.portfolio-card img{border-radius:8px;margin-bottom:14px;border:1px solid var(--frame-line)}
figure{margin:0}figcaption{font-size:.88rem;color:var(--muted);margin-top:6px}
.prose{max-width:780px}
.prose ol li,.prose ul li{margin-bottom:.5em}
/* form */
form .field{margin-bottom:18px}
label,legend{font-weight:600;display:block;margin-bottom:6px}
fieldset{border:1px solid var(--line);border-radius:8px;padding:12px 16px 6px;margin:0 0 18px;background:var(--card)}
fieldset label{font-weight:400;display:flex;gap:8px;align-items:center;margin-bottom:8px}
input[type=checkbox],input[type=radio]{accent-color:var(--btn);width:18px;height:18px}
input[type=text],input[type=email],input[type=number],input[type=date],input[type=url],textarea{width:100%;padding:10px 12px;border:1px solid var(--field-line);border-radius:6px;font:inherit;color:var(--ink);background:var(--input-bg)}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--accent)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--invalid)}
.req{color:var(--req)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px}
.form-msg{display:none;padding:16px;border-radius:8px;margin-top:16px;color:var(--ink)}
.form-msg.ok{display:block;background:var(--ok-bg);border:1px solid var(--ok-line)}
.form-msg.err{display:block;background:var(--err-bg);border:1px solid var(--err-line)}
.form-msg a{color:var(--msg-link)}
input[type=file]{width:100%;padding:10px;border:1px dashed var(--field-line);border-radius:6px;background:var(--input-bg);color:var(--ink);font:inherit}
input[type=file]::file-selector-button{background:var(--card-2);color:var(--ink);border:1px solid var(--field-line);border-radius:6px;padding:6px 12px;margin-right:12px;font:inherit;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--card-2-hi)}
/* footer: dark bar in both themes */
.site-footer{--focus:#ffbf80;background:var(--bar);border-top:1px solid var(--line);color:var(--footer-ink);margin-top:40px;padding:30px 0;font-size:.92rem}
.site-footer strong{color:var(--footer-strong)}
.site-footer a{color:var(--footer-strong)}
.site-footer a:hover{color:#ffa65e}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
.cta-band{background:var(--cta-bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
/* drawing sheets: kept on white in both themes so the line work reads like paper */
.sheets figure{background:#fff;border:1px solid var(--frame-line);border-radius:8px;padding:10px}
.sheets img{border-radius:3px}
.sheets figcaption{color:#3d4550;padding:2px 2px 0}
@media (prefers-reduced-motion:no-preference){body,.site-header,.card,.hero,.page-head,.site-footer{transition:background-color .2s,color .2s,border-color .2s}}