/* =========================================================
   Masonry Near Burr Ridge — "stone & patina" editorial
   Cool limestone palette, grotesque display + serif body,
   index/list layout (distinct from the Hinsdale build)
   ========================================================= */

:root{
  --paper:#ecefeb;
  --paper-2:#e1e6df;
  --surface:#ffffff;
  --ink:#1b2227;
  --ink-soft:#465159;
  --muted:#7c8782;
  --line:#d5ddd4;
  --line-strong:#bac4bb;

  --teal:#20525a;
  --teal-deep:#123b40;
  --sand:#b08a4a;
  --steel:#34607f;

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

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

  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --body:"Spectral",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --shadow:0 10px 30px rgba(20,40,40,.08);
  --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.06rem;
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-deep);text-underline-offset:3px;text-decoration-color:var(--line-strong)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:3px solid var(--sand);outline-offset:2px}

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

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

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(236,239,235,.9);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line-strong)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:15px}
.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:700;font-size:1.16rem;line-height:1;letter-spacing:-.01em}
.brand .name small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:6px;font-weight:400}
.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;position:relative}
.nav a:hover,.nav a[aria-current="page"]{color:var(--teal-deep);background:var(--paper-2)}

/* ---------- Hero (blueprint texture) ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:
    linear-gradient(to right, rgba(32,82,90,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(32,82,90,.07) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 80%);
  mask-image:radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 80%);}
.hero .inner{position:relative;z-index:1;margin-inline:0;padding-block:clamp(48px,8vw,96px) clamp(34px,5vw,56px);max-width:54ch}
.hero .eyebrow{margin-bottom:18px}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,6.4vw,4.4rem);line-height:.98;
  letter-spacing:-.025em;margin:0 0 22px}
.hero h1 .ac{color:var(--teal)}
.hero .lede{font-size:clamp(1.12rem,2.2vw,1.34rem);color:var(--ink-soft);margin:0;max-width:56ch}

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

/* ---------- Featured lead ---------- */
.lead{border-top:3px solid var(--accent);padding-top:26px;margin-bottom:18px;display:block;
  text-decoration:none;color:inherit}
.lead .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500}
.lead h2{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.02;
  letter-spacing:-.02em;margin:14px 0 14px;max-width:20ch}
.lead:hover h2{color:var(--teal-deep)}
.lead p{font-size:1.16rem;color:var(--ink-soft);margin:0 0 14px;max-width:62ch}
.lead .more,.entry .more{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-deep)}
.lead .meta,.entry .meta{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.03em}

/* ---------- Index list ---------- */
.entry-list{margin:0;padding:0;list-style:none}
.entry{display:grid;grid-template-columns:84px 1fr;gap:8px 28px;align-items:start;
  border-top:1px solid var(--line-strong);padding:30px 0;text-decoration:none;color:inherit;
  transition:padding-left .2s ease}
.entry:hover{padding-left:8px}
.entry .num{grid-row:span 2;font-family:var(--mono);font-size:1.5rem;color:var(--line-strong);font-weight:500;padding-top:4px}
.entry:hover .num{color:var(--accent)}
.entry .head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin-bottom:8px}
.entry .tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:500}
.entry .dot{width:3px;height:3px;border-radius:50%;background:var(--line-strong);align-self:center}
.entry h3{font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,2.6vw,1.74rem);line-height:1.08;
  letter-spacing:-.015em;margin:0 0 8px;grid-column:2}
.entry:hover h3{color:var(--teal-deep)}
.entry p{margin:0 0 10px;color:var(--ink-soft);font-size:1.02rem;grid-column:2;max-width:64ch}
.entry .more{grid-column:2}

/* ---------- Note / callout ---------- */
.note{background:var(--surface);border:1px solid var(--line-strong);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(--teal-deep)}
.breadcrumb span{margin:0 7px;color:var(--line-strong)}

.post{max-width:var(--read);margin-inline:auto;padding-bottom:30px}
.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:700;font-size:clamp(2.05rem,4.8vw,3.25rem);line-height:1.02;
  letter-spacing:-.025em;margin:0 0 18px}
.post .dek{font-size:1.26rem;color:var(--ink-soft);line-height:1.5;margin:0 0 26px}
.post .hr{border:0;height:1px;background:var(--line-strong);margin:0 0 32px}

.post-body{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:700;font-size:clamp(1.5rem,3.2vw,2rem);line-height:1.1;
  letter-spacing:-.015em;margin:1.9em 0 .5em}
.post-body h3{font-family:var(--display);font-weight:600;font-size:1.34rem;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(--teal-deep);text-decoration-color:var(--accent);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:500;font-style:normal;font-size:1.3rem;line-height:1.25;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 .entry-list .entry{grid-template-columns:1fr}
.related .entry .num{display:none}
.related .entry h3,.related .entry p,.related .entry .more{grid-column:1}

/* ---------- Footer (light, thick accent rule) ---------- */
.site-footer{margin-top:48px;background:var(--surface);border-top:4px solid var(--teal)}
.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:700;font-size:1.12rem;color:var(--ink)}
.site-footer p{margin:0 0 10px;color:var(--ink-soft);font-size:.98rem;line-height:1.6}
.site-footer h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:500}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:9px 0}
.site-footer a{color:var(--teal-deep);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.legal{border-top:1px solid var(--line);padding-block:20px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.02em;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- About prose ---------- */
.prose{max-width:var(--read);margin-inline:auto;padding-bottom:30px}
.prose h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.8vw,3rem);line-height:1.02;letter-spacing:-.025em;margin:6px 0 16px}
.prose h2{font-family:var(--display);font-weight:600;font-size:1.6rem;margin:1.6em 0 .4em;letter-spacing:-.01em}
.prose p{font-size:1.12rem;margin:0 0 1.2em;color:var(--ink-soft)}
.prose p strong{color:var(--ink)}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .site-footer .grid{grid-template-columns:1fr;gap:26px;padding-block:36px}
  .brand .name small{display:none}
  .entry{grid-template-columns:54px 1fr;gap:6px 18px}
  .entry .num{font-size:1.1rem}
  .entry h3,.entry p,.entry .more{grid-column:2}
}
@media (max-width:430px){
  body{font-size:1.02rem}
  .nav a{font-size:.7rem;padding:7px 8px}
  .entry{grid-template-columns:1fr}
  .entry .num{display:none}
  .entry h3,.entry p,.entry .more{grid-column:1}
}
@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}}