:root{color-scheme:light;--paper:#f7f7f2;--card:#fff;--ink:#202522;--muted:#515c55;--line:#d8dfd6;--accent:#245e45;--mint:#e9f1e9;--mono:ui-monospace,Consolas,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 system-ui,sans-serif}
a{color:inherit;text-decoration:none}
a:hover,summary:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.25em}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.wrap{width:min(1120px,calc(100% - 64px));margin:auto}
.skip{position:fixed;left:1rem;top:-5rem;z-index:3;background:white;padding:.5rem}
.skip:focus{top:1rem}
.mast{position:sticky;top:0;z-index:2;background:var(--paper);border-bottom:1px solid var(--line)}
.bar,.section-title,.panel-head,.contact,.footer{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.bar{min-height:64px}
.bar nav{display:flex;gap:clamp(.8rem,3vw,2rem);font-size:.89rem}
.mark{font:700 1rem var(--mono);white-space:nowrap}
.mark span,h1 span{color:var(--accent)}
.hero{display:grid;grid-template-columns:1.55fr 1fr;align-items:center;gap:clamp(2rem,7vw,6rem);padding:70px 0 46px}
.eyebrow,.count,.panel-head span,.panel-foot,.stack span,.index a>span,.footer,.contact-email{font:600 .74rem/1.5 var(--mono);letter-spacing:.075em;color:var(--accent)}
.dot{display:inline-block;width:8px;height:8px;background:var(--accent);margin-right:.45rem;vertical-align:1px}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(3rem,7vw,5.65rem);line-height:1.04;letter-spacing:-.075em;margin:.5rem 0}
h2{font-size:clamp(1.65rem,3.5vw,2.5rem);letter-spacing:-.045em;line-height:1.15}
h3{font-size:1.65rem;line-height:1.2;letter-spacing:-.035em;margin:.3rem 0}
.role{font-size:1.18rem;font-weight:650}
.lead{margin-top:1rem;max-width:53ch;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.5rem}
.button,summary{display:inline-block;padding:.58rem .9rem;border:1px solid var(--line);font-size:.87rem;font-weight:650;white-space:nowrap}
.primary{background:var(--accent);border-color:var(--accent);color:white}
.primary:hover{color:white}
.profile,.note,.index,.record{border:1px solid var(--line);background:var(--card);overflow:hidden}
.panel-head,.panel-foot{padding:.75rem 1rem;background:var(--mint)}
.panel-head h2{font-size:.95rem;letter-spacing:0}
.profile dl{margin:0;padding:0 1rem}
.profile dl div{display:grid;grid-template-columns:5.5rem 1fr;gap:.5rem;padding:.8rem 0;font-size:.88rem}
.profile dl div+div{border-top:1px solid var(--line)}
dt{color:var(--muted)}dd{margin:0;font-weight:600}
.note{padding:1.25rem 1.5rem;display:grid;grid-template-columns:1fr auto;gap:.75rem 1rem;align-items:center;border-left:4px solid var(--accent)}
.note h2{font-size:1.35rem;margin:.2rem 0}
.note p,.section-title p,.record-body>p,.contact p{color:var(--muted)}
.note .eyebrow,.section-title .eyebrow,.record-body .eyebrow,.contact .eyebrow{color:var(--accent)}
.note details{display:contents}
.note summary{justify-self:end;cursor:pointer;list-style:none}
.note summary::-webkit-details-marker{display:none}
.note summary::after{content:" +"}
.note details[open] summary::after{content:" −"}
.note details p{grid-column:1/-1;max-width:75ch;padding-top:.75rem;border-top:1px solid var(--line)}
.section-title{border-bottom:1px solid var(--line);padding-bottom:1rem;margin:3rem 0 1.25rem;align-items:end}
.section-title h2,.contact h2{margin:.3rem 0}
.count{background:var(--mint);padding:.3rem .55rem;white-space:nowrap}
.project-layout{display:grid;grid-template-columns:228px minmax(0,1fr);gap:1.2rem;align-items:start}
.index{position:sticky;top:85px}
.index a{display:flex;gap:.75rem;padding:.75rem 1rem;border-top:1px solid var(--line);font-size:.9rem;font-weight:650}
.index a:hover{background:var(--mint)}
.index small{display:block;color:var(--muted);font-weight:400}
.records{display:grid;gap:1rem}
.record{display:grid;grid-template-columns:minmax(0,1fr) 30%;align-items:center;padding:1.35rem;gap:1rem}
.record:target{border-color:var(--accent)}
.record-body .subtitle{color:var(--ink);font-weight:650;margin-bottom:.45rem}
.stack{font-size:.83rem;border-top:1px solid var(--line);padding-top:.65rem;margin-top:.8rem}
.stack span{margin-right:.45rem}
.diagram{width:100%;background-color:var(--mint);fill:none;stroke:var(--accent);stroke-width:2}
.diagram .accent{stroke:#926323}
.contact{margin-top:3rem;padding:1.5rem 0;border-block:1px solid var(--line)}
.contact .contact-email{margin-top:.5rem;color:var(--accent)}
.footer{padding:1.25rem 0;color:var(--muted);letter-spacing:0}
@media(max-width:780px){.hero{grid-template-columns:1fr;gap:1.5rem;padding:45px 0 30px}.project-layout{grid-template-columns:1fr}.index{position:static}.wrap{width:calc(100% - 36px)}}
@media(max-width:500px){.bar{flex-wrap:wrap;gap:.5rem;padding:.7rem 0}.note,.record{grid-template-columns:1fr}.note summary{justify-self:start}.diagram{max-width:260px}.contact,.footer{align-items:flex-start;flex-direction:column}.section-title{align-items:start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Text-only project and resume entries. */
.record{grid-template-columns:minmax(0,1fr)}
.record-body p+p{margin-top:.65rem}
.record-body h4{margin:1.1rem 0 .4rem}
.record-body ul{padding-left:1.25rem;margin:.5rem 0}
.record-body li+li{margin-top:.4rem}
.intro>p:not([class]){margin-top:1rem;color:var(--muted)}
@media(max-width:780px){.bar{flex-wrap:wrap;padding:.7rem 0}.mark{white-space:normal}}

/* Full project descriptions use the same typography as the main portfolio. */
.project-page {
  padding-top: 2rem;
  padding-bottom: 3rem;
}
.project-page h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -.045em;
}
.project-details {
  max-width: 78ch;
}
.project-details h2 {
  margin: 1.5rem 0 .75rem;
  font-size: 1.35rem;
}
.project-details p + p {
  margin-top: 1rem;
}
.project-details li + li {
  margin-top: .4rem;
}

/* Original portfolio images are served from this website's assets folder. */
.project-thumbnail {
  display: block;
  align-self: stretch;
}
.project-thumbnail img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: contain;
  background: var(--mint);
}
#projects .record {
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: start;
}
.project-figure {
  margin: 1.25rem 0;
}
.project-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 650px;
  object-fit: contain;
}
.project-figure figcaption {
  margin-top: .5rem;
  color: var(--muted);
  font-size: .85rem;
}
.profile .project-figure {
  margin: 0;
  padding: 1rem;
  border-top: 1px solid var(--line);
}
.profile .project-figure img {
  max-height: 260px;
}
.project-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.project-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 1.25rem;
}
@media (max-width: 1000px) {
  #projects .record { grid-template-columns: minmax(0, 1fr); }
  .project-thumbnail img { height: 260px; }
}
@media (max-width: 600px) {
  .project-gallery { grid-template-columns: minmax(0, 1fr); }
  .project-comparison { grid-template-columns: minmax(0, 1fr); }
}