:root{
  /* palette pulled from the watercolor banner: cobalt, terracotta, ochre, cream */
  --ink:#1f2638; --paper:#faf6ee; --card:#fffdf9; --muted:#6d675e; --line:#ebe2d2;
  --accent:#b4572e; --accent-2:#2b4f9b; --ochre:#c48a35; --cream:#f3ebdd;
  --danger:#b42318; --ok:#1f7a4d; --warn:#9a6700;
  --radius:14px; --shadow:0 1px 2px rgba(20,20,30,.05),0 8px 24px rgba(20,20,30,.06);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans)}
a{color:var(--accent-2);text-underline-offset:3px}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}

/* masthead — watercolor banner anchored right, title over the cream left side */
.masthead{position:relative;min-height:390px;display:flex;align-items:center;color:#1f2a44;overflow:hidden;background:var(--cream)}
.masthead .banner{position:absolute;inset:0;
  background:url(/assets/banner-hero.webp) right center/auto 100% no-repeat,
             linear-gradient(90deg,rgba(245,238,226,.72),rgba(245,238,226,.45) 55%,rgba(245,238,226,0) 80%),
             url(/assets/banner-wash.webp) left center/cover no-repeat,var(--cream)}
.masthead-inner{position:relative;width:100%;max-width:1160px;margin:0 auto;padding:40px 20px}
.brand{color:inherit;text-decoration:none;display:inline-block;max-width:46%}
.brand:hover{color:inherit}
.brand-title{display:block;font:700 clamp(2.3rem,5vw,3.9rem)/1.02 var(--serif);letter-spacing:-.01em;color:#1f2a44;
  text-shadow:0 1px 0 rgba(255,251,242,.7),0 0 22px rgba(250,244,232,.95)}
.brand-tag{display:block;margin-top:12px;font-size:1.05rem;color:#6a4a2e;max-width:32ch;text-shadow:0 0 14px rgba(250,244,232,.95)}
.brand-title::after{content:"";display:block;width:64px;height:3px;margin-top:14px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent) 55%,var(--ochre))}

.topnav{position:sticky;top:0;z-index:5;background:rgba(250,246,238,.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.topnav .wrap{display:flex;justify-content:space-between;align-items:center;min-height:52px;gap:12px;flex-wrap:wrap}
.topnav a{text-decoration:none;color:var(--ink);font-weight:500;margin-right:18px}
.topnav .right{display:flex;align-items:center;gap:14px}
.topnav .right a{margin-right:0}
.who{color:var(--muted);font-size:.92rem}
.btn-sm,.btn{display:inline-block;background:var(--ink);color:#fff!important;padding:6px 14px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.92rem}
.btn{padding:9px 18px}
.btn-sm,.btn{background:var(--accent-2)}
.btn-sm:hover,.btn:hover{background:var(--accent)}

main.wrap{padding-top:34px;padding-bottom:60px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px}
@media (max-width:900px){.layout{grid-template-columns:1fr}}
@media (max-width:1000px){.masthead{min-height:320px}.brand{max-width:42%}}
/* phones: title on cream above, full watercolor band below so every walker stays visible */
@media (max-width:720px){
  .masthead{flex-direction:column-reverse;align-items:stretch;min-height:0}
  .masthead .banner{position:relative;inset:auto;height:auto;aspect-ratio:16/9;
    background:url(/assets/banner-800.webp) center/cover no-repeat,var(--cream)}
  .masthead-inner{padding:22px 20px 16px}
  .brand{max-width:none}
  .brand-title::after{margin-top:10px}
}

.section-title{font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:22px;display:grid;grid-template-columns:1fr}
.card .cover img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.card:not(.lead):has(.cover){grid-template-columns:220px 1fr}
.card:not(.lead) .cover img{height:100%;aspect-ratio:auto;min-height:150px}
@media (max-width:640px){.card:not(.lead):has(.cover){grid-template-columns:1fr}}
.card-body{padding:20px 24px 22px}
.card time,.post-head time{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
.card h2{font:700 1.45rem/1.2 var(--serif);margin:6px 0 8px}
.card.lead h2{font-size:2.1rem}
.card h2 a{color:var(--ink);text-decoration:none}
.card h2 a:hover{color:var(--accent)}
.summary{margin:0 0 10px;color:#3d3c44}
.more{font-weight:600;font-size:.92rem;text-decoration:none}
.pager{display:flex;justify-content:space-between;margin-top:10px}
.empty{padding:40px;text-align:center;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted)}

/* sidebar */
.sidebar{display:flex;flex-direction:column;gap:22px}
.side-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.side-box h3{margin:0 0 12px;font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.featured{list-style:none;counter-reset:f;margin:0;padding:0}
.featured li{counter-increment:f;position:relative;padding:10px 0 10px 34px;border-top:1px solid var(--line)}
.featured li:first-child{border-top:0;padding-top:2px}
.featured li::before{content:counter(f);position:absolute;left:0;top:2px;font:700 1.4rem/1 var(--serif);color:var(--ochre)}
.featured li:not(:first-child)::before{top:10px}
.featured a{display:block;font:600 1.02rem/1.3 var(--serif);color:var(--ink);text-decoration:none}
.featured a:hover{color:var(--accent)}
.featured time{font-size:.78rem;color:var(--muted)}
.featured li.muted::before{content:none}
.about p{margin:0 0 8px}

/* post */
.post-head h1{font:700 clamp(2rem,4.4vw,3rem)/1.1 var(--serif);margin:8px 0 12px;letter-spacing:-.01em}
.dek{font-size:1.2rem;color:#46454d;margin:0 0 18px}
.post-cover{margin:0 0 26px}
.post-cover img{border-radius:var(--radius);display:block;width:100%}
.prose{font:1.12rem/1.75 var(--serif)}
.prose h2,.prose h3,.prose h4{font-family:var(--serif);line-height:1.25;margin:1.6em 0 .5em}
.prose img{border-radius:10px;display:block;margin:1.2em auto}
.prose blockquote{margin:1.4em 0;padding:4px 20px;border-left:4px solid var(--accent);color:#46454d;background:var(--cream);border-radius:0 10px 10px 0}
.prose pre{background:#1f2638;color:#f3ebdd;padding:14px;border-radius:10px;overflow:auto;font-size:.9rem}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}

.comments{margin-top:48px;border-top:1px solid var(--line);padding-top:24px}
.comments h2{font:700 1.4rem var(--serif);margin:0 0 14px}
.comment-list{list-style:none;padding:0;margin:0 0 20px}
.comment{padding:14px 0;border-bottom:1px solid var(--line)}
.comment-meta{font-size:.9rem;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.comment-meta time{color:var(--muted);font-size:.82rem}
.comment-body{margin-top:4px;overflow-wrap:anywhere}

/* forms */
form label{display:block;font-weight:600;font-size:.92rem;margin:0 0 14px}
input[type=text],input[type=email],input[type=password],input[type=number],input:not([type]),textarea,select{
  display:block;width:100%;margin-top:6px;padding:10px 12px;font:inherit;font-weight:400;border:1px solid #d6d0c2;border-radius:10px;background:#fff;color:var(--ink)}
textarea.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92rem}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
button{font:inherit;font-weight:600;background:var(--accent-2);color:#fff;border:0;border-radius:999px;padding:10px 20px;cursor:pointer}
button:hover{background:var(--accent)}
button.link{background:none;color:var(--accent-2);padding:0;border-radius:0;font-weight:500;text-decoration:underline;text-underline-offset:3px}
button.link:hover{color:var(--accent)}
button.danger{background:var(--danger)}
button.link.danger{background:none;color:var(--danger)}
form.inline{display:inline}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.auth-card{max-width:440px;margin:10px auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px;box-shadow:var(--shadow)}
.auth-card h1{font:700 1.8rem var(--serif);margin:0 0 12px}
.auth-card button[type=submit]{width:100%;margin-top:6px}
.cf-turnstile{margin:6px 0 12px}
.flash{padding:12px 16px;border-radius:10px;margin:0 0 16px;font-size:.95rem;border:1px solid}
.flash.error{background:#fef3f2;border-color:#fecdca;color:var(--danger)}
.flash.ok{background:#ecfdf3;border-color:#abefc6;color:var(--ok)}
.flash.warn{background:#fffaeb;border-color:#fedf89;color:var(--warn)}
.muted{color:var(--muted)} .small{font-size:.85rem}

/* admin */
.admin-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.admin-head h1{font:700 1.8rem var(--serif);margin:0}
.admin-head div{display:flex;gap:16px;align-items:center}
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:var(--cream)}
.table .actions a{margin-right:10px}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.78rem;font-weight:600}
.pill.published{background:#ecfdf3;color:var(--ok)} .pill.draft{background:#f2f4f7;color:#475467}
.editor{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.editor .row{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap}
.editor .row label{margin-bottom:0}
label.check{display:flex;align-items:center;gap:8px;font-weight:500;padding-bottom:10px}
.images,.danger-zone{margin-top:28px}
.images h2,.danger-zone h2{font:700 1.3rem var(--serif)}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin:12px 0 16px}
.img-tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px}
.img-tile.is-cover{outline:3px solid var(--accent)}
.img-tile img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.img-tile input{font-size:.75rem;padding:6px;margin:6px 0}
.img-actions{display:flex;justify-content:space-between;font-size:.85rem}
.upload{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.site-footer{border-top:1px solid var(--line);padding:24px 0;color:var(--muted);font-size:.9rem}
.site-footer a{color:var(--muted)}