/* ==========================================================================
   Brick & Barn Midland Partners — shared styles for topic pages.

   Every seller-facing topic page links this one file. Add a page by writing
   its HTML only; do not copy styles into the page itself.

   Palette and type are taken from index.html so the pages read as the same
   site. If the main site's look changes, change it here too.
   ========================================================================== */

:root{
  --cream:#F5EFE3; --warm:#FDFAF4;
  --clay:#B8622A; --clay-dk:#8F4A1C; --clay-lt:#D4895A; --clay-pale:#F0DDD0;
  --bark:#2C1F14; --bark-mid:#4A3728; --bark-lt:#6B5040;
  --stone:#8A7B6E; --stone-lt:#C4B8A8; --linen:#E8DDD0;
  --serif:'Cormorant Garamond',Georgia,serif;
  --display:'Cinzel',serif;
  --sans:'DM Sans',system-ui,sans-serif;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--warm);
  color:var(--bark-mid);
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--clay);text-decoration:none;}
a:hover{color:var(--clay-dk);}
a:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:2px;}

/* ---------- logo (matches index.html) ---------- */
.logo-7b{text-align:center;}
.logo-7b-frame{
  display:inline-block;
  border-top:1px solid var(--clay);
  border-bottom:1px solid var(--clay);
  padding:14px 44px;
  position:relative;
}
.logo-7b-frame::before{
  content:'';position:absolute;top:5px;left:0;right:0;
  border-top:.5px solid rgba(184,98,42,.28);
}
.logo-7b-frame::after{
  content:'';position:absolute;bottom:5px;left:0;right:0;
  border-bottom:.5px solid rgba(184,98,42,.28);
}
.logo-7b-main{
  font-family:var(--display);font-size:1.75rem;font-weight:400;
  letter-spacing:.28em;color:var(--bark);text-transform:uppercase;line-height:1;
}
.logo-7b-main .amp{color:var(--clay);}
.logo-7b-sub{
  font-family:var(--sans);font-size:.57rem;font-weight:400;letter-spacing:.3em;
  text-transform:uppercase;color:var(--stone);margin-top:10px;
}
.logo-7b-sm .logo-7b-frame{padding:7px 18px;}
.logo-7b-sm .logo-7b-frame::before{top:3px;}
.logo-7b-sm .logo-7b-frame::after{bottom:3px;}
.logo-7b-sm .logo-7b-main{font-size:.85rem;letter-spacing:.2em;}
.logo-7b-sm .logo-7b-sub{font-size:.47rem;margin-top:5px;letter-spacing:.22em;}

/* ---------- top bar ---------- */
.tp-nav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px clamp(20px,5vw,60px);
  background:rgba(253,250,244,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linen);
  position:sticky;top:0;z-index:10;
}
.tp-back{
  font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone);white-space:nowrap;
}
.tp-back:hover{color:var(--clay);}

/* ---------- page head ---------- */
.tp-head{
  padding:clamp(48px,8vw,84px) clamp(20px,5vw,60px) clamp(28px,4vw,40px);
  max-width:52rem;margin:0 auto;
}
.tp-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay);margin-bottom:16px;
}
.tp-eyebrow::before{content:'';display:block;width:22px;height:1px;background:var(--clay-lt);}
.tp-head h1{
  font-family:var(--serif);
  font-size:clamp(2.1rem,5vw,3.2rem);
  font-weight:700;line-height:1.14;color:var(--bark);
  margin:0 0 18px;text-wrap:balance;
}
.tp-head h1 em{font-style:italic;color:var(--clay);}
.tp-stand{
  font-size:1.05rem;color:var(--bark-lt);max-width:34rem;margin:0;line-height:1.8;
}

/* ---------- body ---------- */
.tp-body{
  max-width:52rem;margin:0 auto;
  padding:0 clamp(20px,5vw,60px) clamp(56px,8vw,96px);
  display:flex;flex-direction:column;gap:clamp(34px,5vw,48px);
}
.tp-body p{margin:0 0 14px;}
.tp-body p:last-child{margin-bottom:0;}
.tp-body strong{font-weight:500;color:var(--bark);}

.tp-lead{
  font-family:var(--serif);
  font-size:clamp(1.25rem,2.8vw,1.55rem);
  line-height:1.5;color:var(--bark);
  border-left:3px solid var(--clay);
  padding:4px 0 4px 24px;
  margin:0;
}

.tp-sec{display:flex;flex-direction:column;gap:12px;}
.tp-sec h2{
  font-family:var(--serif);
  font-size:clamp(1.35rem,3vw,1.75rem);
  font-weight:700;line-height:1.28;color:var(--bark);margin:0;text-wrap:balance;
}
.tp-num{
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.16em;
  color:var(--clay);text-transform:uppercase;margin:0;
}

/* ---------- table ---------- */
.tp-tablewrap{overflow-x:auto;margin:4px 0;}
table{
  border-collapse:collapse;width:100%;min-width:480px;
  font-size:.93rem;background:#fff;
  border:1px solid var(--linen);
}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--linen);vertical-align:top;}
th{
  font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--stone);background:var(--cream);
}
tr:last-child td{border-bottom:0;}
td:first-child{font-weight:500;color:var(--bark);white-space:nowrap;}

/* ---------- counterweight panel ---------- */
.tp-panel{
  background:var(--cream);border:1px solid var(--linen);
  padding:clamp(22px,4vw,32px);
}
.tp-panel h2{margin-bottom:10px;}
.tp-panel ul{margin:10px 0 0;padding-left:20px;}
.tp-panel li{margin-bottom:8px;}

/* ---------- closing ---------- */
.tp-close{
  border-top:1px solid var(--linen);padding-top:clamp(28px,4vw,40px);
  display:flex;flex-direction:column;gap:16px;align-items:flex-start;
}
.tp-close p{
  font-family:var(--serif);font-size:clamp(1.2rem,2.6vw,1.45rem);
  line-height:1.5;color:var(--bark);margin:0;
}
.tp-cta{
  background:var(--clay);color:#fff;
  padding:15px 32px;border-radius:4px;
  font-weight:700;font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .2s,transform .2s;
  box-shadow:0 4px 24px rgba(184,98,42,.28);
}
.tp-cta:hover{background:var(--clay-dk);color:#fff;transform:translateY(-2px);}

/* ---------- footer ---------- */
.tp-foot{
  background:var(--bark);color:rgba(245,239,227,.5);
  padding:36px clamp(20px,5vw,60px);
  font-size:.78rem;line-height:1.9;text-align:center;
}
.tp-foot a{color:rgba(245,239,227,.72);}
.tp-foot a:hover{color:var(--clay-lt);}

@media (max-width:520px){
  .tp-nav{padding-left:16px;padding-right:16px;}
  .tp-lead{padding-left:16px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

@media print{
  .tp-nav,.tp-cta{display:none;}
  body{background:#fff;}
}