:root{--bg:#f6f3ec;--paper:#fffdf8;--ink:#1f2a24;--muted:#5d6b62;--leaf:#2f6b4f;--leaf-dark:#234f3b;--clay:#b8623a;--line:#e3ddd0;--radius:14px;--max:1080px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 Georgia,"Iowan Old Style","Palatino Linotype",serif}
a{color:var(--leaf)}a:hover{color:var(--leaf-dark)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
header.site{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:flex;white-space:nowrap;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:.2px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.brand .dot{width:14px;height:14px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 4px #dfeae3}
nav a{margin-left:18px;text-decoration:none;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;color:var(--muted)}
nav a[aria-current]{color:var(--leaf);font-weight:600}
.hero{padding:64px 0 40px}
.hero h1{font-size:clamp(34px,5vw,54px);line-height:1.1;margin:0 0 14px;font-weight:600}
.hero p{font-size:20px;color:var(--muted);max-width:640px;margin:0 0 26px}
.eyebrow{font-family:system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--clay);font-weight:700;margin-bottom:10px}
.btn{display:inline-block;background:var(--leaf);color:#fff;text-decoration:none;padding:12px 20px;border-radius:999px;font-family:system-ui,sans-serif;font-weight:600;font-size:15px}
.btn:hover{background:var(--leaf-dark);color:#fff}.btn.ghost{background:transparent;color:var(--leaf);border:1.5px solid var(--leaf)}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:30px 0 60px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card h3{margin:0 0 8px;font-size:21px}.card p{margin:0 0 12px;color:var(--muted)}
.card .more{font-family:system-ui,sans-serif;font-size:14px;font-weight:600;text-decoration:none}
section.page{padding:50px 0 70px}
section.page h1{font-size:clamp(30px,4vw,44px);margin:0 0 8px}
.lede{color:var(--muted);font-size:19px;max-width:680px;margin:0 0 34px}
.list{display:grid;gap:18px}
.post{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:grid;gap:10px}
.post .meta{font-family:system-ui,sans-serif;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.post h3{margin:0;font-size:22px}.post p{margin:0;color:var(--ink)}
.post .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.post .actions a,.post .actions button{font-family:system-ui,sans-serif;font-size:14px;font-weight:600;border-radius:999px;padding:8px 14px;border:1.5px solid var(--leaf);color:var(--leaf);background:transparent;text-decoration:none;cursor:pointer}
.post .actions a.primary{background:var(--leaf);color:#fff}
.embed{margin-top:8px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff}
.embed iframe{width:100%;height:620px;border:0;display:block}
.tag{display:inline-block;font-family:system-ui,sans-serif;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:#e8f0eb;color:var(--leaf)}
.tag.warm{background:#f6e6dd;color:var(--clay)}.tag.grey{background:#ececea;color:#666}
.progress{height:12px;background:#e9e4d8;border-radius:999px;overflow:hidden;margin:8px 0}
.progress span{display:block;height:100%;background:var(--leaf)}
.figures{display:flex;gap:26px;flex-wrap:wrap;font-family:system-ui,sans-serif}
.figures b{display:block;font-size:26px;color:var(--ink)}.figures small{color:var(--muted)}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.how div{background:#f1ede3;border-radius:10px;padding:14px;font-size:15px}
.empty{color:var(--muted);font-style:italic}
footer.site{border-top:1px solid var(--line);padding:30px 0 50px;color:var(--muted);font-size:14px;font-family:system-ui,sans-serif}
footer.site a{margin-right:16px}
h2.section{font-size:26px;margin:40px 0 14px}
@media (max-width:640px){nav a{margin-left:12px;font-size:14px}.hero{padding:44px 0 28px}.embed iframe{height:560px}}
/* admin */
.admin{font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.admin table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:15px}
.admin th,.admin td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.admin th{background:#f1ede3;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.form{display:grid;gap:14px;max-width:720px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;font-family:system-ui,sans-serif}
.form label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--muted)}
.form input,.form textarea,.form select{font:16px system-ui,sans-serif;padding:10px 12px;border:1px solid #cfc8b8;border-radius:8px;background:#fff;color:var(--ink)}
.form textarea{min-height:110px}.form .hint{font-weight:400;font-size:13px;color:var(--muted)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:600px){.form .row{grid-template-columns:1fr}}
.btn.small{padding:7px 14px;font-size:13px}.btn.danger{background:#a33d2a}.btn.danger:hover{background:#7f2d1f}
.err{background:#f6e6dd;color:#7f2d1f;padding:10px 14px;border-radius:8px;font-family:system-ui,sans-serif}
.adminbar{background:#1f2a24;color:#cfe3d6;font:14px system-ui,sans-serif;padding:8px 0}.adminbar a{color:#fff;margin-right:14px}
.photos{display:flex;flex-wrap:wrap;gap:8px}.photos img{max-width:100%;height:auto;border-radius:10px;margin-top:8px}
/* single-page layout */
.block{padding:44px 0 10px;border-top:1px solid var(--line)}.block h2{font-size:clamp(26px,3.4vw,36px);margin:0 0 8px}.block .lede{margin-bottom:22px}
h3.sub{font-size:19px;margin:26px 0 10px;color:var(--muted);font-weight:600}
.accordion{display:grid;gap:8px}
details.acc{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:0 18px}
details.acc summary{list-style:none;cursor:pointer;display:flex;gap:16px;align-items:baseline;padding:16px 0;font-size:19px}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::before{content:"+";font-family:system-ui,sans-serif;font-weight:700;color:var(--leaf);width:16px;flex:0 0 16px}
details.acc[open] summary::before{content:"–"}
.acc-date{font-family:system-ui,sans-serif;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;flex:0 0 96px}
.acc-title{font-weight:600}
.acc-body{padding:0 0 18px 32px;color:var(--ink)}.acc-body p{margin:0 0 10px}
.acc-body .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.acc-body .actions a{font-family:system-ui,sans-serif;font-size:14px;font-weight:600;border-radius:999px;padding:7px 14px;border:1.5px solid var(--leaf);color:var(--leaf);text-decoration:none}.acc-body .actions a.primary{background:var(--leaf);color:#fff}
.crumb{font-family:system-ui,sans-serif;font-size:14px;margin:0 0 6px}.crumb a{text-decoration:none}
.article h1{font-size:clamp(28px,4vw,42px);margin:6px 0 10px}.article .meta{font-family:system-ui,sans-serif;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.article .embed iframe{height:760px}
.pn{display:flex;justify-content:space-between;gap:16px;margin-top:28px;font-family:system-ui,sans-serif;font-size:14px}.pn a{text-decoration:none;max-width:48%}
@media (max-width:640px){details.acc summary{flex-direction:column;gap:4px;font-size:17px}.acc-date{flex:none}.acc-body{padding-left:0}}
/* writings rail */
.blockhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}.seeall{font-family:system-ui,sans-serif;font-weight:600;text-decoration:none;white-space:nowrap;font-size:15px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*16px)/3.5);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 18px;margin:0 -4px;scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.wcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .15s,border-color .15s}
a.wcard:hover{transform:translateY(-3px);border-color:var(--leaf)}
.wcover{aspect-ratio:16/10;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:12px}
.wcover span{font-family:system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.28);padding:3px 9px;border-radius:999px}
.wbody{padding:14px 16px 16px;display:grid;gap:6px}.wbody .meta{font-family:system-ui,sans-serif;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.wbody h3{margin:0;font-size:18px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wbody p{margin:0;color:var(--muted);font-size:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wcard.filler{opacity:.6}.wcard.filler h3{color:var(--muted)}
.acover{width:100%;border-radius:12px;margin-top:14px}
@media (max-width:900px){.rail{grid-auto-columns:calc((100% - 16px)/2.2)}}@media (max-width:560px){.rail{grid-auto-columns:82%}}
/* portfolio grid (replaces rail) */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px;margin-top:6px}
.wcard{border:0;background:transparent;border-radius:0;overflow:visible;text-align:center}
a.wcard:hover{transform:none}a.wcard:hover .wcover{box-shadow:0 10px 30px rgba(31,42,36,.18);transform:translateY(-3px)}
.wcover{aspect-ratio:4/3;border-radius:12px;border:1px solid var(--line);box-shadow:0 2px 10px rgba(31,42,36,.06);transition:transform .15s,box-shadow .15s}
.wbody{padding:12px 4px 0;gap:4px}.wbody h3{font-size:19px;-webkit-line-clamp:2}.wbody .meta{font-size:12px}
.center{text-align:center;margin:26px 0 10px}
@media (max-width:900px){.wgrid{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.wgrid{grid-template-columns:1fr;gap:22px}}
/* article: keep the LinkedIn embed a readable width, not full-bleed */
.article .embed { max-width: 560px; margin-left: 0; }
.article .embed iframe { height: 820px; }
@media (max-width: 640px) { .article .embed { max-width: 100%; } }