:root {
  --ink: #242629;
  --muted: #5d6269;
  --line: #d8dadd;
  --accent: #914327;
  --paper: #fff;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 28px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--accent); text-underline-offset: 4px; }
button { font: inherit; cursor: pointer; }
img { display: block; width: 100%; height: auto; }
p { margin: 0 0 17px; }
h1, h2, h3 { margin: 0; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
header, main, footer { max-width: 1120px; margin: auto; padding-left: 38px; padding-right: 38px; }
nav { display: flex; align-items: center; justify-content: space-between; padding: 27px 0; border-bottom: 1px solid var(--line); }
.brand { font-family: Georgia, serif; font-size: 23px; color: var(--ink); text-decoration: none; }
.navlinks { display: flex; gap: 28px; font-size: 15px; }
.navlinks a { color: var(--ink); text-decoration: none; }
.navlinks a:hover { text-decoration: underline; }
.intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; padding: 49px 0 45px; }
.location { color: var(--muted); font-size: 14px; margin-bottom: 9px; }
h1 { font-size: clamp(36px, 4.4vw, 54px); line-height: 1.12; letter-spacing: -.025em; }
.role { color: var(--muted); font-size: 16px; margin: 12px 0 0; }
.intro-copy { font-size: 17px; margin: 0; max-width: 465px; }
.work-index { display: flex; justify-content: space-between; align-items: center; padding: 19px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.work-index h2 { font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 600; }
.work-index>div { display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; }
.work-index a { color: var(--muted); text-decoration: none; }
.work-index a:hover { color: var(--accent); text-decoration: underline; }
.project { padding: 43px 0 48px; border-bottom: 1px solid var(--line); }
.project-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.project-heading h2 { font-size: 34px; line-height: 1.25; letter-spacing: -.025em; }
.project-heading>p { margin: 0; color: var(--muted); font-size: 14px; }
.project-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 49px; margin-bottom: 15px; }
.project-intro p { font-size: 16px; }
.screen-showcase { border: 1px solid var(--line); background: #f4f5f7; }
.screen-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 17px; background: #fff; border-bottom: 1px solid var(--line); }
.screen-controls { display: flex; flex-wrap: wrap; gap: 17px; }
.screen-controls button, .zoom-button { border: 0; padding: 8px 0; min-height: 42px; background: none; color: var(--muted); font-size: 14px; }
.screen-controls button[aria-pressed=true] { color: var(--ink); box-shadow: inset 0 -2px var(--accent); }
.zoom-button { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.screen-image { display: block; width: 100%; padding: 0; border: 0; background: #f4f5f7; text-align: left; }
.screen-image img { height: 475px; object-fit: cover; object-position: top; }
.screen-showcase>p { padding: 12px 17px; margin: 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); background: white; }
.project-note { display: grid; grid-template-columns: 180px 1fr; gap: 24px; margin-top: 25px; }
.project-note h3 { font-size: 16px; font-weight: 600; }
.project-note p { font-size: 16px; margin: 0; max-width: 745px; }
.technical-details { margin-top: 18px; }
.technical-details summary { cursor: pointer; color: var(--accent); font-size: 14px; padding: 5px 0; }
.technical-details>div { margin-top: 12px; max-width: 820px; }
.technical-details p { font-size: 15px; color: var(--muted); }
.dashboard-intro { display: grid; grid-template-columns: 1.6fr 1fr; gap: 60px; align-items: start; }
.dashboard-intro p { font-size: 16px; }
.project-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; font-size: 15px; padding-top: 2px; }
.demo-frame { margin-top: 9px; border: 1px solid var(--line); }
.demo-frame iframe { display: block; width: 100%; height: 680px; border: 0; }
.image-note { color: var(--muted); font-size: 14px; margin: 12px 0 0; }
.cad-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 38px; }
.cad-image { display: block; width: 100%; border: 1px solid var(--line); padding: 0; background: #fff; }
.cad-image img { aspect-ratio: 1.5; object-fit: contain; }
.cad-copy p { font-size: 16px; }
.text-button { background: none; border: 0; color: var(--accent); padding: 3px 0; min-height: 36px; text-decoration: underline; text-underline-offset: 4px; font-size: 15px; }
.calculation { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; }
.calculation h2 { font-size: 30px; line-height: 1.3; max-width: 320px; }
.project-type { color: var(--muted); font-size: 14px; margin-top: 12px; }
.calculation>div>p:not(.image-note):not(.project-type) { font-size: 16px; }
.calculation a { font-size: 15px; }
.about { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; padding: 38px 0 45px; }
.about h2 { font-size: 30px; }
.about p { font-size: 16px; }
.about a { font-size: 15px; }
footer { display: flex; justify-content: space-between; gap: 30px; padding-top: 23px; padding-bottom: 37px; border-top: 1px solid var(--line); }
footer h2 { font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 600; margin-bottom: 8px; }
.email { font-size: 17px; }
footer>p { font-size: 14px; color: var(--muted); margin: 0; text-align: right; }
dialog { padding: 0; border: 1px solid var(--line); width: 1240px; max-width: 95vw; max-height: 94vh; background: #fff; }
dialog::backdrop { background: rgba(20, 22, 25, .8); }
.dialog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.dialog-toolbar p { font-size: 14px; margin: 0; }
.dialog-toolbar button { font-size: 14px; background: white; border: 1px solid var(--line); padding: 7px 13px; }
.dialog-image { max-height: calc(94vh - 74px); overflow: auto; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (max-width: 800px) {
  .intro { gap: 34px; }
  .project-heading { align-items: start; flex-direction: column; gap: 8px; }
  .project-intro { gap: 25px; }
  .cad-layout { gap: 25px; }
  .dashboard-intro, .calculation, .about { gap: 30px; }
}
@media (max-width: 600px) {
  header, main, footer { padding-left: 21px; padding-right: 21px; }
  nav { padding: 19px 0; }
  .navlinks { gap: 23px; font-size: 14px; }
  .intro { grid-template-columns: 1fr; gap: 22px; padding: 33px 0 30px; }
  h1 { font-size: 41px; }
  .intro-copy { font-size: 16px; }
  .role { font-size: 15px; }
  .work-index { align-items: start; gap: 17px; flex-direction: column; padding: 15px 0; }
  .work-index>div { gap: 17px; }
  .project { padding: 30px 0 34px; }
  .project-heading h2 { font-size: 30px; }
  .project-intro, .dashboard-intro, .cad-layout, .calculation, .about { grid-template-columns: 1fr; gap: 15px; }
  .screen-toolbar { align-items: start; flex-direction: column; gap: 0; padding: 6px 14px; }
  .screen-controls { gap: 20px; }
  .zoom-button { min-height: 35px; }
  .screen-image img { height: 300px; }
  .screen-showcase>p { padding: 12px 14px; }
  .project-note { grid-template-columns: 1fr; gap: 7px; }
  .project-links { flex-direction: row; flex-wrap: wrap; gap: 22px; padding: 0 0 8px; }
  .demo-frame iframe { height: 930px; }
  .calculation h2 { max-width: none; }
  .about { padding: 30px 0; }
  footer { padding-top: 21px; padding-bottom: 27px; align-items: start; flex-direction: column; gap: 19px; }
  footer>p { text-align: left; }
}
@media (max-width: 360px) {
  h1 { font-size: 35px; }
  .screen-controls { gap: 15px; }
}