/* ==========================================================================
   Pueblo Citywmn — design system
   Canonical source. Run scripts/sync-css.sh to copy into the theme.

   Palette rationale: Pueblo is a steel town in the high desert. Neutrals are
   cool grey-greens (ledger paper / weathered adobe) rather than the usual
   cream; the single accent is Pueblo chile red, spent only on links, the
   like button and the counter.
   ========================================================================== */

:root{
  --paper:#EEF0EF;
  --panel:#F8F9F8;
  --ink:#16211D;
  --ink-soft:#5A6863;
  --ink-faint:#8B968F;
  --rule:#D4D9D6;
  --rule-soft:#E2E6E3;
  --chile:#B33A22;
  --chile-wash:#F3E3DF;
  --shadow:0 1px 2px rgba(22,33,29,.05);

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --maxw:1080px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#131816;
    --panel:#1B221F;
    --ink:#E4E8E5;
    --ink-soft:#9AA6A0;
    --ink-faint:#6E7A75;
    --rule:#2C3531;
    --rule-soft:#242B28;
    --chile:#E2694E;
    --chile-wash:#33211C;
    --shadow:0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --paper:#131816;
  --panel:#1B221F;
  --ink:#E4E8E5;
  --ink-soft:#9AA6A0;
  --ink-faint:#6E7A75;
  --rule:#2C3531;
  --rule-soft:#242B28;
  --chile:#E2694E;
  --chile-wash:#33211C;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--chile);text-decoration-thickness:1px;text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--chile);outline-offset:2px;border-radius:2px;
}
img{max-width:100%;height:auto}
.screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ----------------------------------------------------------------- shell */
.wrap{max-width:var(--maxw);margin:0 auto;padding:26px 24px 40px}
.panel{
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:12px;
  box-shadow:var(--shadow);
}

/* -------------------------------------------------------------- masthead */
.head{padding:22px 30px 26px;display:flex;gap:26px;align-items:center}
.place{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 12px;
}
.avatar{
  flex:none;width:96px;height:96px;border-radius:50%;overflow:hidden;
  border:1px solid var(--rule);background:var(--rule-soft);
  display:grid;place-items:center;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.is-empty{border:1px dashed var(--ink-faint);background:none}
.avatar.is-empty span{
  font-family:var(--sans);font-size:9px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}
.head h1{
  font-size:clamp(2.1rem,5.2vw,3.1rem);
  font-weight:400;line-height:1.02;margin:0;
  letter-spacing:-.018em;text-wrap:balance;
}
.head h1 a{color:inherit;text-decoration:none}
.head .tag{margin:8px 0 0;font-style:italic;font-size:1.15rem;color:var(--ink-soft)}
@media (max-width:560px){
  .head{flex-direction:column;text-align:center;gap:18px;padding:24px 20px}
}

/* ------------------------------------------------------------------ grid */
.grid{
  display:grid;grid-template-columns:minmax(0,1fr) 268px;
  gap:34px;margin-top:30px;align-items:start;
}
@media (max-width:820px){
  .grid{grid-template-columns:minmax(0,1fr);gap:26px}
}

/* ------------------------------------------------------------------ feed */
.feed{display:flex;flex-direction:column;min-width:0}
.post{padding:0 0 30px}
.post + .post{padding-top:30px;border-top:1px solid var(--rule)}
.date{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 7px;font-variant-numeric:tabular-nums;
}
.post h2,.post h1.title{
  font-size:1.6rem;font-weight:400;line-height:1.2;margin:0 0 12px;
  letter-spacing:-.012em;text-wrap:balance;
}
.post h1.title{font-size:2.1rem}
.post h2 a,.post h1.title a{color:inherit;text-decoration:none}
.post h2 a:hover{color:var(--chile)}
.more{
  font-family:var(--sans);font-size:13px;font-weight:600;
  text-decoration:none;letter-spacing:.01em;white-space:nowrap;
}
.more:hover{text-decoration:underline}

/* ------------------------------------------------------- post body (entry) */
.entry{min-width:0}
.entry > *{max-width:64ch}
.entry p{margin:0 0 15px}
.entry h2{font-size:1.5rem;font-weight:400;margin:28px 0 10px;line-height:1.25}
.entry h3{font-size:1.2rem;font-weight:600;margin:24px 0 8px}
.entry ul,.entry ol{margin:0 0 15px;padding-left:1.3em}
.entry li{margin:0 0 6px}
.entry blockquote{
  margin:20px 0;padding:2px 0 2px 20px;
  border-left:2px solid var(--chile);
  font-style:italic;color:var(--ink-soft);
}
.entry hr{border:none;border-top:1px solid var(--rule);margin:28px 0}
.entry img,.entry figure{max-width:100%;border-radius:6px}
.entry figure{margin:20px 0}
.entry figcaption{
  font-family:var(--sans);font-size:12px;color:var(--ink-soft);margin-top:7px;
}
.entry a{text-decoration:underline}
.entry pre{
  font-family:var(--mono);font-size:13px;background:var(--rule-soft);
  padding:14px;border-radius:6px;overflow-x:auto;max-width:100%;
}
.entry table{
  border-collapse:collapse;width:100%;font-size:.95rem;display:block;overflow-x:auto;
}
.entry td,.entry th{border:1px solid var(--rule);padding:7px 10px;text-align:left}

/* photo placeholder (used until she uploads a featured image) */
.photo{
  margin:18px 0;border:1px solid var(--rule);border-radius:6px;
  background:repeating-linear-gradient(45deg,transparent 0 11px,var(--rule-soft) 11px 12px);
  aspect-ratio:16/9;display:grid;place-items:center;
}
.photo span{
  font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  background:var(--panel);padding:6px 12px;border-radius:3px;
}
.thumb{margin:18px 0}
.thumb img{border-radius:6px;display:block;width:100%}

/* ------------------------------------------------------------- reactions */
.react{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:13px;font-weight:550;
  color:var(--ink-soft);background:none;
  border:1px solid var(--rule);border-radius:999px;
  padding:5px 13px;cursor:pointer;line-height:1.4;text-decoration:none;
  font-variant-numeric:tabular-nums;
  transition:background .13s ease,color .13s ease,border-color .13s ease;
}
.btn:hover{border-color:var(--ink-faint);color:var(--ink)}
.btn svg{width:14px;height:14px;flex:none}
.btn.on{color:var(--chile);border-color:var(--chile);background:var(--chile-wash)}
.btn.on svg{fill:var(--chile)}
.btn[disabled]{opacity:.55;cursor:default}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* -------------------------------------------------------------- comments */
.thread{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:18px;
}
.thread h3{
  font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);
  margin:0;
}
.cmt{display:flex;gap:12px;list-style:none;margin:0;padding:0}
.cmt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.cmt-list .children{list-style:none;margin:14px 0 0;padding:0 0 0 20px;border-left:1px solid var(--rule-soft);display:flex;flex-direction:column;gap:14px}
.who{
  flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden;
  background:var(--rule-soft);border:1px solid var(--rule);
  display:grid;place-items:center;
  font-family:var(--sans);font-size:11px;font-weight:650;color:var(--ink-soft);
}
.who img{width:100%;height:100%;object-fit:cover}
.cmt-b{min-width:0;flex:1}
.cmt-h{font-family:var(--sans);font-size:12px;color:var(--ink-soft);margin:0 0 3px}
.cmt-h b{color:var(--ink);font-weight:650}
.cmt-b p{margin:0 0 8px;font-size:.95rem;max-width:58ch}
.cmt-reply a{font-family:var(--sans);font-size:12px;font-weight:600;text-decoration:none}

.cform{display:flex;flex-direction:column;gap:11px;max-width:58ch}
.cform p{margin:0}
.cform label{
  display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px;
}
.cform input[type=text],.cform input[type=email],.cform input[type=url],.cform textarea{
  width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:6px;
  padding:9px 12px;
}
.cform textarea{min-height:110px;resize:vertical;font-family:var(--serif);font-size:16px}
.cform .row{display:flex;gap:11px;flex-wrap:wrap}
.cform .row > p{flex:1 1 160px;min-width:0}
.cform .submit{
  background:var(--chile);color:#fff;border:none;border-radius:6px;
  font-family:var(--sans);font-size:13px;font-weight:650;
  padding:9px 18px;cursor:pointer;align-self:flex-start;
}
.cform .submit:hover{filter:brightness(1.08)}
.cform .comment-form-cookies-consent{
  display:flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:12px;color:var(--ink-soft);
}
.cform .comment-form-cookies-consent label{
  margin:0;text-transform:none;letter-spacing:0;font-size:12px;font-weight:400;
}
.note{font-family:var(--sans);font-size:12px;color:var(--ink-faint);margin:0}
/* Honeypot: must be invisible to people but present in the DOM for bots. */
.citywmn-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --------------------------------------------------------------- counter */
.counter{
  margin-top:8px;padding-top:24px;border-top:1px solid var(--rule);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.odo{display:inline-flex;gap:3px}
.odo i{
  font-family:var(--mono);font-style:normal;font-size:15px;font-weight:600;
  background:var(--ink);color:var(--paper);
  padding:5px 7px;border-radius:3px;line-height:1;
  font-variant-numeric:tabular-nums;
}
:root[data-theme="dark"] .odo i{background:#2C3531;color:#E4E8E5}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .odo i{background:#2C3531;color:#E4E8E5}
}
.counter .lbl{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
}
.counter .meta{
  font-family:var(--sans);font-size:12px;color:var(--ink-faint);
  margin-left:auto;font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------- sidebar */
.side{padding:22px 22px 24px;position:sticky;top:22px}
@media (max-width:820px){.side{position:static}}
.side section + section{margin-top:24px;padding-top:22px;border-top:1px solid var(--rule-soft)}
.side h3{
  font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 11px;
}
.side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.side li{font-size:1rem}
.side li a{color:var(--ink);text-decoration:none}
.side li a:hover{color:var(--chile);text-decoration:underline}
.side .arc{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.side .n{font-family:var(--sans);font-size:11px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.side .ext{display:flex;align-items:center;gap:8px}
.side .ext svg{width:13px;height:13px;flex:none;color:var(--ink-faint)}
/* WordPress's archive widget emits its own counts in parentheses */
.side .arc a{flex:1}

/* ----------------------------------------------------------- pagination */
.pager{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:8px;padding-top:24px;border-top:1px solid var(--rule);
}
.pager a{
  font-family:var(--sans);font-size:13px;font-weight:600;text-decoration:none;
}
.pager a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- footer */
.foot{
  margin-top:30px;padding:16px 24px;text-align:center;
  font-family:var(--sans);font-size:12px;color:var(--ink-soft);
}
.foot a{color:var(--ink-soft)}

/* -------------------------------------------------------- WP admin bar fix */
body.admin-bar .side{top:54px}