/* =========================================================
   Tuckpointing Near Oak Lawn — dark "tradesman's journal"
   Warm near-black, amber accent, condensed display + sans
   body, bordered-tile grid (distinct from the other builds)
   ========================================================= */

:root{
  --bg:#17150f;
  --bg-2:#1e1b13;
  --surface:#221e16;
  --ink:#efe9dc;
  --ink-soft:#c4bca9;
  --muted:#938b78;
  --line:#322d21;
  --line-strong:#4a4231;

  --amber:#e3a838;
  --amber-deep:#b07f1f;

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

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

  --display:"Saira Condensed","Arial Narrow",sans-serif;
  --body:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --radius:4px;
}

*{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.7;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber);text-underline-offset:3px;text-decoration-color:rgba(227,168,56,.35)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:3px solid var(--amber);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(--amber);color:#17150f;padding:10px 14px;border-radius:4px;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(23,21,15,.88);
  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: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:700;font-size:1.32rem;line-height:.95;letter-spacing:.01em;text-transform:uppercase}
.brand .name small{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.22em;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:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
  text-decoration:none;padding:9px 13px;border-radius:3px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--amber);background:var(--bg-2)}

/* ---------- Hero ---------- */
.hero{border-bottom:1px solid var(--line-strong);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-80px;top:-80px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(227,168,56,.14),transparent 65%);pointer-events:none}
.hero .inner{position:relative;z-index:1;padding-block:clamp(46px,8vw,92px) clamp(32px,5vw,52px);}
.hero .eyebrow{margin-bottom:18px;display:inline-block}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(2.8rem,8.5vw,6rem);line-height:.92;
  letter-spacing:.005em;text-transform:uppercase;margin:0 0 22px;max-width:14ch}
.hero h1 .ac{color:var(--amber)}
.hero .lede{font-family:var(--body);font-size:clamp(1.08rem,2.1vw,1.3rem);color:var(--ink-soft);margin:0;max-width:54ch;line-height:1.55}

/* ---------- Section label ---------- */
.slabel{display:flex;align-items:center;gap:16px;margin:50px 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:1px solid var(--line-strong);
  border-top:4px solid var(--accent);border-radius:var(--radius);padding:clamp(24px,4vw,40px);
  background:var(--surface);transition:border-color .2s ease,transform .2s ease}
.lead:hover{border-color:var(--accent)}
.lead .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500}
.lead h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,5vw,3.4rem);
  line-height:.98;letter-spacing:.005em;margin:14px 0 14px;max-width:18ch}
.lead:hover h2{color:var(--amber)}
.lead p{font-size:1.13rem;color:var(--ink-soft);margin:0 0 16px;max-width:62ch}
.lead .meta,.tile .meta{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.03em}
.lead .more,.tile .more{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}

/* ---------- Tile grid ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:6px}
.tile{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 24px;
  transition:border-color .2s ease,transform .2s ease,background .2s ease}
.tile:hover{border-color:var(--accent);transform:translateY(-3px)}
.tile .row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.tile .tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:500}
.tile .dot{width:3px;height:3px;border-radius:50%;background:var(--line-strong)}
.tile h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,1.8rem);
  line-height:1.0;letter-spacing:.01em;margin:0 0 12px}
.tile:hover h3{color:var(--amber)}
.tile p{margin:0 0 16px;color:var(--ink-soft);font-size:1rem;flex:1}
.tile .meta{margin-top:auto}

/* ---------- Note ---------- */
.note{background:var(--bg-2);border:1px solid var(--line-strong);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:22px 26px;margin:26px 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(--amber)}
.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;text-transform:uppercase;font-size:clamp(2.3rem,5.6vw,3.8rem);
  line-height:.96;letter-spacing:.005em;margin:0 0 18px}
.post .dek{font-size:1.22rem;color:var(--ink-soft);line-height:1.5;margin:0 0 26px;font-family:var(--body)}
.post .hr{border:0;height:1px;background:var(--line-strong);margin:0 0 32px}

.post-body{font-size:1.12rem;line-height:1.8;color:var(--ink)}
.post-body p{margin:0 0 1.25em;color:#e6dfd0}
.post-body h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.6rem,3.2vw,2.1rem);
  line-height:1.02;letter-spacing:.01em;margin:1.9em 0 .5em}
.post-body h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:1.4rem;letter-spacing:.01em;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;color:#e6dfd0}
.post-body li::marker{color:var(--accent)}
.post-body a{color:var(--amber);text-decoration-color:var(--accent);text-decoration-thickness:1.5px}
.post-body strong{color:#fff}
.post-body blockquote{margin:1.7em 0;padding-left:22px;border-left:3px solid var(--accent);
  font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:1.5rem;line-height:1.05;color:var(--ink)}

.callout{margin:1.9em 0;background:var(--bg-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}

/* ---------- Footer ---------- */
.site-footer{margin-top:48px;background:var(--bg-2);border-top:4px solid var(--amber)}
.site-footer .grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;padding-block:46px}
.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;text-transform:uppercase;font-size:1.2rem;color:var(--ink)}
.site-footer p{margin:0 0 10px;color:var(--ink-soft);font-size:.97rem;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(--amber);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{max-width:var(--read);margin-inline:auto;padding-bottom:30px}
.prose h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(2.2rem,5vw,3.2rem);line-height:.98;margin:6px 0 16px}
.prose h2{font-family:var(--display);font-weight:600;text-transform:uppercase;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:#fff}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .grid2{grid-template-columns:1fr;gap:16px}
  .site-footer .grid{grid-template-columns:1fr;gap:26px;padding-block:36px}
  .brand .name small{display:none}
}
@media (max-width:620px){
  .site-header .bar{flex-direction:column;align-items:flex-start;gap:10px;padding-block:12px}
  .brand .name{font-size:1.08rem}
  .nav{gap:2px;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}}