:root { color-scheme:only light; --note-paper:#fff; --note-ink:#353b3e; --note-muted:#616b70; --note-line:#e4e8e9; }
* { box-sizing:border-box; }
body { margin:0; background:var(--note-paper); color:var(--note-ink); font:400 16px/1.7 'DM Sans',sans-serif; }
a { color:inherit; text-underline-offset:.25em; text-decoration-thickness:1px; }
a:hover { color:#3b6358; }
img { display:block; max-width:100%; height:auto; }
figure,p { margin:0; }
.project-shell { max-width:1100px; margin:0 auto; padding:0 clamp(22px,5vw,58px); }
.project-nav { min-height:98px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--note-line); }
.project-name { font:400 1.3125rem/1.4 'Source Serif 4',Georgia,serif; letter-spacing:-.03em; text-decoration:none; }
.project-nav div { display:flex; gap:28px; font-size:.875rem; }
.project-nav div a { padding:12px 0; text-decoration:none; }
.project-heading { padding:48px 0 28px; }
.project-status { color:var(--note-muted); font-size:.8125rem; margin-bottom:16px; }
h1 { font:400 clamp(2.6rem,6vw,4rem)/1.13 'Source Serif 4',Georgia,serif; letter-spacing:-.04em; margin:0; }
.project-lead { font:400 1.4rem/1.65 'Source Serif 4',Georgia,serif; max-width:710px; margin-bottom:32px; }
.project-prose { font:400 1.1875rem/1.85 'Source Serif 4',Georgia,serif; }
.project-prose p+p { margin-top:24px; }
.project-body { max-width:670px; margin:0 auto; }
.project-body-wide { max-width:900px; margin:0 auto; }
.project-figure { margin:34px auto; }
.project-figure img { width:100%; height:auto; border:1px solid var(--note-line); border-radius:3px; }
.project-figure figcaption { font-size:.8125rem; color:var(--note-muted); line-height:1.65; margin-top:14px; }
.project-portrait { display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,260px); align-items:start; gap:clamp(32px,6vw,78px); }
.project-portrait .project-figure { margin:0; }
.project-portrait .project-figure img { width:auto; max-height:560px; margin:0 auto; }
.project-devices { display:flex; align-items:center; gap:24px; justify-content:center; }
.project-devices img:first-child { width:63%; }
.project-devices img:last-child { width:30%; }
.project-portrait-long .project-image-window { max-height:510px; overflow:hidden; border-bottom:1px solid var(--note-line); }
.project-portrait-long .project-figure img { width:100%; max-height:none; }
.project-full-image { display:inline-block; margin-top:10px; font-size:.8125rem; min-height:32px; }
.project-outlink { font-size:.9375rem; margin-top:34px; }
.project-outlink a { display:inline-block; padding:8px 0; }
.project-footer { border-top:1px solid var(--note-line); margin-top:54px; padding:22px 0 38px; color:var(--note-muted); font-size:.875rem; }
.project-footer a { display:inline-block; padding:9px 0; text-decoration:none; }
@media(max-width:760px) {
 .project-nav { min-height:88px; }
 .project-heading { padding-top:34px; }
 .project-portrait { grid-template-columns:1fr; gap:32px; }
 .project-portrait .project-figure { width:100%; max-width:370px; margin:0 auto; }
 .project-portrait-long .project-figure { max-width:300px; }
 .project-devices img:first-child { width:58%; }
 .project-devices img:last-child { width:28%; }
 .project-footer { margin-top:40px; }
}
@media(max-width:360px) {
 .project-nav { flex-wrap:wrap; gap:0 16px; padding:12px 0; }
 .project-nav div { gap:18px; }
 .project-name { font-size:1.2rem; }
}