/* ============================================================
   Clearline Septic — policy & disclosure pages
   Shares the site design system: Barlow Condensed + Spectral,
   ink & paper, APWA sewer-green, burnt amber for accents.
   ============================================================ */

:root{
  --ink:#161d19;
  --ink-2:#1f2823;
  --paper:#f2efe7;
  --paper-2:#e7e2d6;
  --green:#3f6b52;
  --amber:#bf6a24;
  --rule:#c6bfad;
  --rule-dk:#3a463e;
  --muted:#6a6555;
  --muted-ink:#9aa79e;
  --measure:74ch;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Spectral",Georgia,serif;
  font-size:17px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
}
body::after{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:var(--green);text-underline-offset:3px;}
a:hover{color:var(--amber);}
:where(a,button):focus-visible{outline:3px solid var(--amber);outline-offset:3px;}

/* ---------- header ---------- */
header.site-header{
  background:var(--paper);
  border-bottom:2px solid var(--ink);
  position:sticky;top:0;z-index:20;
}
header.site-header .wrap{
  max-width:var(--measure);margin:0 auto;padding:0 28px;
  min-height:66px;display:flex;align-items:center;gap:20px;
}
header.site-header .brand{
  font-family:"Barlow Condensed","Arial Narrow",sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:1.22rem;color:var(--ink);text-decoration:none;
  margin-right:auto;display:flex;align-items:center;gap:10px;
}
header.site-header .brand::before{
  content:"";width:26px;height:26px;flex:none;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 32% / 100% 2px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 30% 8% / 2px 26% no-repeat,
    linear-gradient(var(--green),var(--green)) 0 60% / 100% 2px no-repeat;
  border-bottom:2px solid var(--ink);
}
header.site-header .back{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.11em;font-size:.84rem;
  color:var(--muted);text-decoration:none;
  border-bottom:2px solid transparent;padding-bottom:2px;
  transition:color .16s ease,border-color .16s ease;
}
header.site-header .back:hover{color:var(--ink);border-bottom-color:var(--amber);}

/* ---------- document body ---------- */
main{
  max-width:var(--measure);
  margin:0 auto;
  padding:clamp(40px,6vw,76px) 28px clamp(56px,7vw,92px);
}

h1,h2,h3{
  font-family:"Barlow Condensed","Arial Narrow",sans-serif;
  font-weight:700;line-height:1.04;letter-spacing:-0.01em;
  text-transform:uppercase;text-wrap:balance;margin:0;
}
h1{
  font-size:clamp(2.4rem,5.6vw,3.8rem);
  padding-bottom:16px;border-bottom:3px solid var(--ink);
}
h2{
  font-size:clamp(1.4rem,2.6vw,1.85rem);
  margin:clamp(38px,4.5vw,54px) 0 14px;
  padding-top:14px;border-top:1px solid var(--rule);
  position:relative;
}
h2::before{
  content:"";position:absolute;top:-1px;left:0;
  width:52px;height:3px;background:var(--amber);
}
h3{font-size:1.14rem;margin:26px 0 8px;}

p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}

.effective-date{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;
  color:var(--muted);margin:14px 0 32px;
}

ul,ol{margin:0 0 1.2em;padding-left:0;list-style:none;}
ul li,ol li{position:relative;padding-left:28px;margin-bottom:.55em;}
ul li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:9px;height:2px;background:var(--amber);
}
ol{counter-reset:ol;}
ol li{counter-increment:ol;}
ol li::before{
  content:counter(ol,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:.86rem;color:var(--amber);line-height:1.9;
}
li > ul{margin:.5em 0 0;}

strong{font-weight:600;}
em{font-style:italic;}

/* ---------- callout ---------- */
.callout{
  background:var(--paper-2);
  border:2px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  padding:20px 22px;
  margin:28px 0 32px;
  font-size:.99rem;
}
.callout strong{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:1.08rem;
}
.callout > :first-child{margin-top:0;}
.callout ul li::before{background:var(--green);}

/* legacy: highlights any unfilled placeholder so it can't ship unnoticed */
.fill-in{
  background:#fff3cd;border-bottom:2px solid var(--amber);
  padding:0 4px;font-style:italic;
}

/* ---------- footer ---------- */
footer.site-footer{
  background:var(--ink);
  border-top:2px solid var(--ink);
  padding:clamp(30px,4vw,46px) 0;
}
footer.site-footer .wrap{
  max-width:var(--measure);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:10px 32px;
}
footer.site-footer a{
  color:#c3ccc5;text-decoration:none;font-size:.93rem;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .16s ease,border-color .16s ease;
}
footer.site-footer a:hover{color:#fff;border-bottom-color:var(--amber);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important;}
}

@media (max-width:640px){
  body{font-size:16.5px;}
  header.site-header .wrap,main,footer.site-footer .wrap{padding-left:20px;padding-right:20px;}
  .callout{box-shadow:4px 4px 0 var(--ink);}
}