/* ==========================================================================
   Jefa Builders — Base
   Reset, layout container, typography scale, buttons and the dimension rule.
   ========================================================================== */

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);margin:0 0 18px;display:block;
}
.eyebrow.on-dark{color:rgba(255,255,255,.55)}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;line-height:1.02;letter-spacing:-.015em}
h1{font-size:clamp(40px,6.4vw,78px);font-variation-settings:'wdth' 108;text-wrap:balance}
h2{font-size:clamp(30px,4.2vw,52px);font-variation-settings:'wdth' 105}
h3{font-size:21px;font-variation-settings:'wdth' 100;letter-spacing:-.005em}
p{margin:0 0 18px}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--ink-soft);max-width:56ch}

/* ---------- dimension rule (drafting motif) ---------- */
.dim{display:flex;align-items:center;gap:14px}
.dim-line{flex:1;height:1px;background:var(--line);position:relative}
.dim-line::before,.dim-line::after{
  content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--line);
}
.dim-line::before{left:0}
.dim-line::after{right:0}
.dim-label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);white-space:nowrap;
}
.dim.on-dark .dim-line,.dim.on-dark .dim-line::before,.dim.on-dark .dim-line::after{background:rgba(255,255,255,.25)}
.dim.on-dark .dim-label{color:rgba(255,255,255,.5)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 24px;text-decoration:none;border:1px solid var(--ink);
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--orange);border-color:var(--orange)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-orange{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-orange:hover{background:#fff;color:var(--ink);border-color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.btn i{font-size:.95em}

/* Skip link — visible only once it takes keyboard focus */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:12px 20px;text-decoration:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
.skip:focus{left:0}