:root { color:#202124; background:#fff; font-family:Georgia, "Times New Roman", serif; font-size:18px; line-height:1.6; }
* { box-sizing:border-box; }
body { margin:0; }
header, main, footer { width:min(100% - 2.5rem, 44rem); margin:auto; }
header { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:2rem 0 1.5rem; border-bottom:1px solid #ddd; }
.name { color:#202124; font-family:Arial, sans-serif; font-size:1rem; font-weight:700; text-decoration:none; }
nav { display:flex; flex-wrap:wrap; gap:1rem; font-family:Arial, sans-serif; font-size:.85rem; }
a { color:#075a9c; text-underline-offset:.12em; }
nav a { color:#4a4a4a; } nav a:hover, nav a[aria-current="page"] { color:#075a9c; }
main { padding:4rem 0 1rem; }
section { margin-bottom:3.25rem; }
.intro { max-width:39rem; }
h1, h2 { color:#202124; font-family:Arial, sans-serif; line-height:1.18; }
h1 { margin:0 0 1.4rem; font-size:clamp(2rem, 4vw, 2.75rem); letter-spacing:-.04em; }
h2 { margin:0 0 .8rem; font-size:1.25rem; }
p { max-width:39rem; margin:0 0 1.1rem; }
.plain-list { max-width:39rem; margin:0; padding-left:1.25rem; }.plain-list li { margin-bottom:.85rem; padding-left:.2rem; }
.project-list article { max-width:39rem; padding:1.5rem 0; border-top:1px solid #ddd; }.project-list article:last-child { border-bottom:1px solid #ddd; }.project-list h2 { margin-bottom:.55rem; }.project-list h3 { margin:0 0 .55rem; font-family:Arial, sans-serif; font-size:1.05rem; }.project-list p { margin:0; }
.status { margin-top:-.6rem; color:#2d6a4f; font-family:Arial,sans-serif; font-size:.85rem; }
.eyebrow { margin-bottom:.6rem; color:#666; font-family:Arial,sans-serif; font-size:.8rem; }
.post-date { color:#666; font-family:Arial,sans-serif; font-size:.8rem; letter-spacing:.02em; }
.post-subtitle { margin:-.7rem 0 1.25rem; color:#555; font-size:1.12rem; font-style:italic; }
.post-list { list-style:none; margin:0; padding:0; }
.post-list li { padding:1.5rem 0; border-top:1px solid #ddd; }
.post-list li:last-child { border-bottom:1px solid #ddd; }
.post-list h2 { margin:.3rem 0 .35rem; }
.post-list p { margin:0; }
.post-body h2 { margin:2.75rem 0 1rem; }
.post-body p { max-width:42rem; }
.post-back { margin-top:3rem; font-family:Arial,sans-serif; font-size:.85rem; }
.home-writing .post-date { margin-bottom:.25rem; }
.demo { margin:0 0 3.5rem; text-align:center; }.demo figcaption { max-width:30rem; margin:1rem auto 0; color:#666; font-family:Arial,sans-serif; font-size:.85rem; line-height:1.5; }
.phone { display:block; width:100%; max-width:17rem; height:auto; margin:auto; border:1px solid #ddd; border-radius:1.75rem; background:#f7f5f0; box-shadow:0 8px 30px rgba(0,0,0,.08); }
.wide { display:block; width:100%; height:auto; border:1px solid #ddd; border-radius:.6rem; box-shadow:0 8px 30px rgba(0,0,0,.06); }
.shots { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:1.5rem; }.shots .phone { max-width:none; border-radius:1.25rem; }
.feature .wide { margin-top:1.5rem; }
.wa { display:flex; flex-direction:column; margin:0; overflow:hidden; border:1px solid #ddd; border-radius:1.25rem; background:#efeae2; font-family:Arial,sans-serif; font-size:.8rem; line-height:1.4; box-shadow:0 8px 30px rgba(0,0,0,.08); }
.wa-head { display:flex; align-items:center; gap:.6rem; padding:.75rem .9rem; background:#1f6f4f; color:#fff; }.wa-head small { display:block; opacity:.8; font-size:.7rem; }
.wa-avatar { display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:#fff; color:#1f6f4f; font-weight:700; }
.wa-body { flex:1; display:flex; flex-direction:column; gap:.5rem; padding:.9rem .7rem; }
.wa-body p { max-width:85%; margin:0; padding:.45rem .6rem .3rem; border-radius:.6rem; box-shadow:0 1px 1px rgba(0,0,0,.08); }
.wa-body .in { align-self:flex-start; background:#fff; border-top-left-radius:0; }.wa-body .out { align-self:flex-end; background:#d9fdd3; border-top-right-radius:0; }
.wa-body time { display:block; margin-top:.15rem; color:#667; font-size:.65rem; text-align:right; }
.shots-stack { align-items:start; }
.wa figcaption { padding:.4rem; color:#666; font-size:.7rem; text-align:center; font-style:italic; }
footer { margin-top:3rem; padding:1.5rem 0 2.5rem; border-top:1px solid #ddd; font-size:.93rem; } footer p { margin:0 0 .75rem; }.small { color:#666; font-family:Arial,sans-serif; font-size:.75rem; }
@media (max-width:540px) { :root { font-size:17px; } header, main, footer { width:min(100% - 2rem, 44rem); } header { align-items:flex-start; flex-direction:column; gap:.65rem; padding-top:1.5rem; } main { padding-top:3rem; } section { margin-bottom:2.75rem; } .shots { gap:.75rem; } .shots .phone { border-radius:.9rem; } .shots-stack { grid-template-columns:1fr; gap:1.5rem; } .shots-stack .phone { max-width:17rem; border-radius:1.25rem; } }