/* Eastern Pinetree Engineering PLLC — drafting-sheet theme */

:root{
  --ink:#0E1A2B;        /* drafting ink, near-black blue */
  --blueprint:#16324F;  /* field blue */
  --brass:#B8873B;      /* survey brass / signage gilt */
  --paper:#EFEAE0;      /* sheet stock */
  --paper-2:#E4DED1;    /* second sheet */
  --steel:#5C6B7A;      /* secondary text */
  --rule:#C6BEAE;       /* hairline */

  --display:"Oswald", "Arial Narrow", sans-serif;
  --body:"Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:980px;
  margin:0 auto;
  padding:0 24px;
}

a{ color:var(--blueprint); }
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

/* ---------- masthead ---------- */

.masthead{
  background:var(--ink);
  color:var(--paper);
  border-bottom:3px solid var(--brass);
}
.masthead-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 24px;
  padding-top:18px;
  padding-bottom:18px;
}
.mark{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.mark-name{
  font-family:var(--display);
  font-weight:600;
  font-size:1.35rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.mark-sub{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass);
}
.contact{
  margin:0;
  font-family:var(--mono);
  font-size:.82rem;
}
.contact a{ color:var(--paper); text-decoration:none; border-bottom:1px solid rgba(239,234,224,.35); }
.contact a:hover{ border-bottom-color:var(--brass); color:#fff; }
.dot{ color:var(--brass); padding:0 6px; }

/* ---------- hero ---------- */

.hero{
  background:var(--blueprint);
  color:var(--paper);
  padding:64px 0 56px;
  /* faint drafting grid */
  background-image:
    linear-gradient(rgba(239,234,224,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,234,224,.055) 1px, transparent 1px);
  background-size:32px 32px, 32px 32px;
}
.eyebrow{
  margin:0 0 18px;
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass);
}
.hero h1{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2.3rem, 6.5vw, 4rem);
  line-height:1.02;
  letter-spacing:.005em;
  margin:0 0 16px;
  max-width:16ch;
}
.deck{
  margin:0 0 34px;
  max-width:58ch;
  font-size:1.1rem;
  color:#DCD6C9;
}

/* title block */
.titleblock{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border:1px solid rgba(239,234,224,.4);
  margin:0 0 30px;
}
.titleblock .field{
  padding:12px 14px 14px;
  border-right:1px solid rgba(239,234,224,.25);
}
.titleblock .field:last-child{ border-right:0; }
.titleblock dt{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:4px;
}
.titleblock dd{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:1.15rem;
  letter-spacing:.02em;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 22px;
  margin:0;
}
.cta{
  display:inline-block;
  background:var(--brass);
  color:var(--ink);
  font-family:var(--display);
  font-weight:500;
  font-size:1rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  padding:13px 24px;
}
.cta:hover{ background:#CFA050; }
.cta-quiet{
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.08em;
  color:var(--paper);
  text-decoration:none;
  border-bottom:1px solid var(--brass);
  padding-bottom:2px;
}
.cta-quiet:hover{ color:var(--brass); }

/* ---------- content bands ---------- */

.band{ padding:60px 0; }
.band.alt{ background:var(--paper-2); }

.band h2,
.closer h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.6rem, 3.4vw, 2.1rem);
  letter-spacing:.01em;
  margin:0 0 14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--rule);
}
.lede{
  margin:0 0 34px;
  max-width:62ch;
  color:var(--steel);
}

/* agenda: the left rule thins as the wall does */
.agenda{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:none;
}
.agenda li{
  display:flex;
  align-items:baseline;
  gap:18px;
  padding:16px 0 16px 22px;
  border-left:var(--wall, 4px) solid var(--ink);
  margin-bottom:6px;
}
.agenda .w1{ --wall:20px; }
.agenda .w2{ --wall:17px; }
.agenda .w3{ --wall:14px; }
.agenda .w4{ --wall:11px; }
.agenda .w5{ --wall:8px; }
.agenda .w6{ --wall:5px; }
.agenda .w7{ --wall:2px; }

.agenda .num{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--brass);
  letter-spacing:.1em;
  flex:0 0 auto;
}
.agenda .topic{
  font-size:1.08rem;
  max-width:58ch;
}

/* FAQ */
.qa{
  padding:22px 0;
  border-bottom:1px dashed var(--rule);
  max-width:66ch;
}
.qa:last-child{ border-bottom:0; }
.qa h3{
  font-family:var(--display);
  font-weight:500;
  font-size:1.15rem;
  letter-spacing:.02em;
  margin:0 0 6px;
}
.qa p{ margin:0 0 8px; }

.zones{
  border-collapse:collapse;
  margin-top:10px;
  font-family:var(--mono);
  font-size:.86rem;
}
.zones td{
  padding:7px 20px 7px 0;
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.zones .time{ font-weight:500; }
.zones .zone{ color:var(--steel); }

/* ---------- closer ---------- */

.closer{
  background:var(--ink);
  color:var(--paper);
  padding:58px 0;
}
.closer h2{ border-bottom-color:rgba(239,234,224,.25); max-width:20ch; }
.closer p{ color:#DCD6C9; max-width:52ch; }
.closer .actions{ margin-top:26px; }

/* ---------- footer ---------- */

.site-footer{
  background:var(--ink);
  color:var(--steel);
  border-top:1px solid rgba(239,234,224,.15);
  padding:22px 0 30px;
  font-family:var(--mono);
  font-size:.78rem;
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:6px 20px;
}
.site-footer p{ margin:0; }
.site-footer a{ color:#BFC8D1; text-decoration:none; }
.site-footer a:hover{ color:var(--brass); }

/* ---------- 404 ---------- */

.notfound{
  min-height:70vh;
  display:flex;
  align-items:center;
  padding:60px 0;
}
.notfound h1{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2rem,5vw,3rem);
  margin:0 0 10px;
}
.notfound .code{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 14px;
}
.notfound p{ max-width:48ch; }
.notfound .cta{ margin-top:18px; }

/* ---------- responsive ---------- */

@media (max-width:760px){
  .titleblock{ grid-template-columns:repeat(2, 1fr); }
  .titleblock .field{ border-bottom:1px solid rgba(239,234,224,.25); }
  .titleblock .field:nth-child(2n){ border-right:0; }
  .titleblock .field:nth-last-child(-n+2){ border-bottom:0; }
  .hero{ padding:48px 0 44px; }
  .band{ padding:46px 0; }
  .agenda li{ gap:12px; padding-left:16px; }
}

@media (max-width:430px){
  .titleblock{ grid-template-columns:1fr; }
  .titleblock .field{ border-right:0; }
  .agenda li{ flex-direction:column; gap:4px; }
}

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