:root{--paper:#f6f5f1;--ink:#182b39;--muted:#5e6b72;--line:#d7dcd9;--accent:#a84425;--navy:#183341;--white:#fff; font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-underline-offset:4px}
a:focus-visible{outline:3px solid #c05c37;outline-offset:6px}
button,a{-webkit-tap-highlight-color:transparent}
.wrap{max-width:1120px;margin:auto;padding-inline:32px}
.skip{position:absolute;top:-70px;background:white;padding:12px;z-index:10}
.skip:focus{top:8px}
.header{border-bottom:1px solid var(--line)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:96px}
.brand{text-decoration:none;font-size:17px;font-weight:700;letter-spacing:-.4px}
.brand span{color:var(--accent)}
nav{display:flex;gap:30px;font-size:14px}
nav a{text-decoration:none;padding:10px 0;color:var(--muted)}
nav a[aria-current=page]{color:var(--ink);border-bottom:2px solid var(--accent)}
.hero{padding-block:72px 60px;max-width:840px}
.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--accent);margin:0 0 22px}
h1{font-size:clamp(40px,6vw,68px);font-weight:500;line-height:1.06;letter-spacing:-2.8px;margin:0 0 26px}
h2{font-size:32px;font-weight:500;letter-spacing:-1px;margin:0}
h3{font-size:22px;letter-spacing:-.5px;line-height:1.25;margin:0 0 12px}
p{line-height:1.7}
.lead{font-size:18px;color:var(--muted);max-width:640px}
.text-link{display:inline-block;font-size:14px;font-weight:700;margin-top:14px}
.portfolio{padding:36px 0 52px;border-top:1px solid var(--line);scroll-margin-top:24px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px}
.section-head p{margin:0;color:var(--muted);font-size:13px}
.number{color:var(--accent);font-size:13px;letter-spacing:1px;display:inline-block;margin-right:16px;vertical-align:middle}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{border:1px solid var(--line);background:#eeefea;padding:28px;min-height:215px;display:flex;flex-direction:column;align-items:flex-start}
.card.available{background:var(--navy);color:white;border-color:var(--navy)}
.card-head{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.available .card-head{color:#bfcfd2}
.badge{border:1px solid currentColor;padding:5px 8px;letter-spacing:.8px}
.available .badge{color:#d6e6bb}
.card p{font-size:14px;color:var(--muted);margin:0 0 20px;max-width:390px}
.available p{color:#c1d0d5}
.card a{margin-top:auto;font-size:14px;font-weight:700}
.card .pending{font-size:12px;color:var(--muted);margin-top:auto}
.intro-note{font-size:12px;color:var(--muted);margin-top:18px}
.about-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:70px;padding-bottom:60px}
.about-layout p{color:var(--muted);margin-top:0}
.about-layout h2{font-size:26px;margin-bottom:22px}
.about-section{border-top:1px solid var(--line);padding:28px 0}
.about-section:first-child{padding-top:0;border:0}
.entry{margin-bottom:26px}
.entry:last-child{margin-bottom:0}
.entry h3{font-size:18px;margin-bottom:6px}
.entry .meta{font-size:12px;color:var(--accent);margin-bottom:10px}
.entry p{font-size:14px}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.tags li{border:1px solid var(--line);padding:7px 10px;font-size:12px}
.sidebox{background:#e9ede7;padding:28px;margin-bottom:26px}
.sidebox h2{font-size:21px}
.sidebox p,.sidebox a{font-size:14px}
.sidebox a{overflow-wrap:anywhere}
.contact-links{display:grid;gap:16px}
.footer{border-top:1px solid var(--line);padding-block:28px;color:var(--muted);font-size:12px}
.footer .wrap{display:flex;justify-content:space-between;gap:20px}
.footer p{margin:0}
@media(max-width:640px){.wrap{padding-inline:22px}
.header .wrap{min-height:80px}
.brand{font-size:15px}
nav{gap:20px}
.hero{padding-block:48px 38px}
h1{letter-spacing:-1.7px}
.lead{font-size:16px}
.grid,.about-layout{grid-template-columns:1fr}
.about-layout{gap:20px}
.section-head{align-items:flex-start;flex-direction:column;gap:10px}
.card{min-height:215px}
.footer .wrap{flex-direction:column;gap:8px}
}
.project-page{padding-bottom:72px}
.project-hero{padding-block:64px 48px;max-width:850px}
.project-hero .lead{max-width:720px}
.project-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.button-link{display:inline-block;background:var(--navy);color:var(--white);padding:13px 18px;font-size:14px;font-weight:700;text-decoration:none}
.button-link.secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}
.project-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.8fr);gap:56px;border-top:1px solid var(--line);padding-top:40px}
.project-layout h2{font-size:26px;margin-bottom:18px}
.project-layout p{color:var(--muted)}
.project-details{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.project-details li{padding:15px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.5}
.project-details strong{display:block;color:var(--accent);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:4px}
.screenshot{margin:36px 0 0}
.screenshot-placeholder{aspect-ratio:16/9;background:var(--navy);color:#bfcfd2;display:grid;place-items:center;border:1px solid var(--navy);font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase}
.screenshot figcaption{color:var(--muted);font-size:12px;margin-top:10px}
@media(max-width:640px){.project-hero{padding-block:48px 38px}.project-layout{grid-template-columns:1fr;gap:20px}
}