/* =========================================================
   Tuckpointing Near Tinley Park — light "civic editorial"
   Cool near-white, navy accent, elegant serif display +
   clean sans body, minimal 3-column grid (distinct again)
   ========================================================= */

:root{
  --paper:#f7f8f4;
  --paper-2:#edefe8;
  --surface:#ffffff;
  --ink:#171a1f;
  --ink-soft:#444c54;
  --muted:#828a90;
  --line:#e2e5dd;
  --line-strong:#cdd2c8;

  --navy:#1c3a5e;
  --navy-deep:#11243d;
  --brass:#a87b2c;

  --accent:var(--navy);
  --accent-deep:var(--navy-deep);

  --maxw:1180px;
  --read:66ch;

  --display:"DM Serif Display",Georgia,serif;
  --body:"Public Sans","Segoe UI",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;

  --radius:6px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--body);font-size:1.05rem;line-height:1.72;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:3px;text-decoration-color:var(--line-strong)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,44px)}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:var(--navy);color:#fff;padding:10px 14px;border-radius:6px;z-index:99}

.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:500}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(247,248,244,.92);
  backdrop-filter:saturate(140%) blur(8px);border-top:3px solid var(--navy);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:14px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink)}
.brand img{height:40px;width:auto}
.brand .name{font-family:var(--display);font-weight:400;font-size:1.28rem;line-height:1;letter-spacing:.005em}
.brand .name small{display:block;font-family:var(--mono);font-size:.57rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);
  text-decoration:none;padding:9px 13px;border-radius:4px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--navy);background:var(--paper-2)}

/* ---------- Hero (centered) ---------- */
.hero{text-align:center;border-bottom:1px solid var(--line)}
.hero .inner{padding-block:clamp(48px,8vw,96px) clamp(34px,5vw,56px);max-width:60ch;margin-inline:auto}
.hero .eyebrow{display:inline-block;margin-bottom:18px}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(2.5rem,6.4vw,4.6rem);line-height:1.02;
  letter-spacing:-.01em;margin:0 auto 6px;max-width:18ch}
.hero h1 em{font-style:italic;color:var(--navy)}
.hero .rule{width:70px;height:3px;background:var(--brass);margin:26px auto 22px;border-radius:2px}
.hero .lede{font-size:clamp(1.1rem,2.2vw,1.3rem);color:var(--ink-soft);margin:0 auto;max-width:56ch}

/* ---------- Section label ---------- */
.slabel{display:flex;align-items:center;gap:16px;margin:52px 0 22px}
.slabel .eyebrow{white-space:nowrap}
.slabel::after{content:"";flex:1;height:1px;background:var(--line-strong)}

/* ---------- Featured ---------- */
.lead{display:block;text-decoration:none;color:inherit;border-left:3px solid var(--accent);
  padding:6px 0 6px 28px;margin-bottom:6px}
.lead .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:500}
.lead h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.04;
  letter-spacing:-.01em;margin:12px 0 12px;max-width:22ch}
.lead:hover h2{color:var(--navy-deep);text-decoration:underline;text-decoration-color:var(--line-strong)}
.lead p{font-size:1.14rem;color:var(--ink-soft);margin:0 0 14px;max-width:64ch}
.lead .meta,.post-card .meta{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.03em}
.lead .more,.post-card .more{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}

/* ---------- Minimal 3-column grid ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);column-gap:38px;row-gap:8px}
.post-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border-top:2px solid var(--line-strong);padding:22px 0 28px;transition:border-color .2s ease}
.post-card:hover{border-top-color:var(--accent)}
.post-card .tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:12px}
.post-card h3{font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1.1;margin:0 0 12px;letter-spacing:-.005em}
.post-card:hover h3{color:var(--navy)}
.post-card p{margin:0 0 16px;color:var(--ink-soft);font-size:1rem;flex:1}
.post-card .foot{display:flex;align-items:center;gap:10px}
.post-card .dot{width:3px;height:3px;border-radius:50%;background:var(--line-strong)}

/* ---------- Note ---------- */
.note{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:22px 26px;margin:30px 0 0}
.note .eyebrow{display:block;margin-bottom:8px}
.note p{margin:0;color:var(--ink-soft)}

/* ---------- Article ---------- */
.article-head{padding-top:clamp(26px,4vw,42px)}
.breadcrumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;color:var(--muted);margin-bottom:22px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--navy)}
.breadcrumb span{margin:0 7px;color:var(--line-strong)}

.post{max-width:var(--read);margin-inline:auto;padding-bottom:30px;text-align:center}
.post .metaline{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.post .metaline .sep{color:var(--line-strong);margin:0 8px}
.post .metaline .by{color:var(--muted)}
.post h1{font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,4.8vw,3.3rem);line-height:1.04;letter-spacing:-.012em;margin:0 0 18px}
.post .dek{font-size:1.24rem;color:var(--ink-soft);line-height:1.5;margin:0 auto 26px;max-width:54ch}
.post .rule{width:60px;height:3px;background:var(--brass);margin:0 auto 34px;border-radius:2px}
.post-body{text-align:left;font-size:1.13rem;line-height:1.78}
.post-body p{margin:0 0 1.25em}
.post-body h2{font-family:var(--display);font-weight:400;font-size:clamp(1.55rem,3.2vw,2.05rem);line-height:1.1;letter-spacing:-.01em;margin:1.9em 0 .5em}
.post-body h3{font-family:var(--display);font-weight:400;font-size:1.4rem;margin:1.5em 0 .4em}
.post-body ul,.post-body ol{margin:0 0 1.4em;padding-left:1.3em}
.post-body li{margin:.4em 0}
.post-body li::marker{color:var(--accent)}
.post-body a{color:var(--navy);text-decoration-color:var(--brass);text-decoration-thickness:1.5px}
.post-body strong{color:var(--ink)}
.post-body blockquote{margin:1.7em 0;padding-left:22px;border-left:3px solid var(--accent);
  font-family:var(--display);font-weight:400;font-size:1.4rem;line-height:1.2;color:var(--ink)}
.callout{margin:1.9em 0;background:var(--paper-2);border:1px solid var(--line-strong);border-radius:var(--radius);padding:20px 24px}
.callout .eyebrow{display:block;margin-bottom:10px}
.callout p:last-child{margin-bottom:0}
.callout ul{margin-bottom:0}

/* related */
.related{padding-block:18px 30px}
.related .cards{grid-template-columns:repeat(2,1fr)}

/* ---------- Footer (navy) ---------- */
.site-footer{margin-top:48px;background:var(--navy);color:#dde6ef}
.site-footer a{color:#e8d2a6;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;padding-block:48px}
.site-footer .foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.site-footer .foot-brand img{height:36px}
.site-footer .foot-brand .name{font-family:var(--display);font-weight:400;font-size:1.2rem;color:#fff}
.site-footer p{margin:0 0 10px;color:#bcc9d8;font-size:.97rem;line-height:1.6}
.site-footer h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#9fb0c4;margin:0 0 14px;font-weight:500}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:9px 0}
.legal{border-top:1px solid rgba(255,255,255,.14);padding-block:20px;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;
  color:#8ea0b5;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- About ---------- */
.prose{max-width:var(--read);margin-inline:auto;padding-bottom:30px}
.prose h1{font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,4.8vw,3.1rem);line-height:1.04;margin:6px 0 16px;letter-spacing:-.012em}
.prose h2{font-family:var(--display);font-weight:400;font-size:1.7rem;margin:1.6em 0 .4em}
.prose p{font-size:1.1rem;margin:0 0 1.2em;color:var(--ink-soft)}
.prose p strong{color:var(--ink)}

/* ---------- Responsive ---------- */
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr);column-gap:30px}}
@media (max-width:760px){
  .cards{grid-template-columns:1fr}
  .related .cards{grid-template-columns:1fr}
  .site-footer .grid{grid-template-columns:1fr;gap:26px;padding-block:36px}
  .brand .name small{display:none}
}
@media (max-width:560px){
  .site-header .bar{flex-direction:column;align-items:flex-start;gap:10px;padding-block:12px}
  .brand .name{font-size:1.12rem}
  .nav{margin-left:-4px}
}
@media (max-width:430px){body{font-size:1.01rem}.nav a{font-size:.7rem;padding:7px 8px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.reveal{opacity:0;transform:translateY(10px);animation:rise .6s ease forwards}
@keyframes rise{to{opacity:1;transform:none}}