/* Free Clamp Generator — brand layer (Bartel Media styleguide) */
:root{
  --orange:#FF8731; --green:#186B76; --red:#D91600; --brown:#512314;
  --yellow:#FFAA01; --cream:#FAF5EC; --ink:#1a0d07;
}

html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:var(--orange); color:var(--cream); }

/* ── Form controls ──────────────────────────────────────────────── */
.ctl-label{
  display:block; font-family:"Space Mono",monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.12em; color:rgba(81,35,20,.65);
  margin-bottom:6px;
}
.ctl-field{
  display:flex; align-items:center; gap:6px;
  border:1.5px solid rgba(81,35,20,.3); border-radius:14px;
  background:#fff; padding:0 14px; transition:border-color .15s, box-shadow .15s;
}
.ctl-field:focus-within{
  border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,135,49,.22);
}
.ctl-field input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-size:16px; padding:13px 0; color:var(--ink); font-variant-numeric:tabular-nums;
}
.ctl-field input::-webkit-outer-spin-button,
.ctl-field input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ctl-field input[type=number]{ -moz-appearance:textfield; }
.ctl-unit{ font-family:"Space Mono",monospace; font-size:12px; color:rgba(81,35,20,.5); }

.unit-btn{ cursor:pointer; transition:background .15s,color .15s; }

/* ── Presets ────────────────────────────────────────────────────── */
.preset-btn{
  cursor:pointer; font-family:"Space Mono",monospace; font-size:12px;
  border:2px solid var(--ink); border-radius:999px; padding:7px 14px;
  background:#fff; color:var(--ink); box-shadow:0 4px 0 var(--ink);
  transition:transform .12s, box-shadow .12s, background .15s;
}
.preset-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--ink); background:var(--yellow); }
.preset-btn:active{ transform:translateY(3px); box-shadow:0 0 0 var(--ink); }

/* ── Section typography ─────────────────────────────────────────── */
.kick{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Space Mono",monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.15em; color:rgba(81,35,20,.55);
}
.sec-title{
  font-family:"Fredoka One",cursive; font-weight:400; letter-spacing:-0.01em;
  line-height:.95; color:var(--brown); margin-top:14px;
  font-size:clamp(30px,5vw,52px);
}
.prose-p{ margin-top:18px; font-size:17px; line-height:1.65; color:rgba(26,13,7,.78); }
.code-inline{
  font-family:"Space Mono",monospace; font-size:.92em;
  background:rgba(81,35,20,.08); border-radius:6px; padding:1px 6px; color:var(--brown);
}
.code-block{
  margin-top:18px; font-family:"Space Mono",monospace; font-size:14px;
  background:var(--ink); color:var(--cream); border-radius:14px; padding:18px 20px;
  overflow-x:auto; box-shadow:0 5px 0 rgba(26,13,7,.25);
}

/* ── Ads ────────────────────────────────────────────────────────── */
.ad-wrap{
  max-width:1100px; margin-left:auto; margin-right:auto;
  padding-left:20px; padding-right:20px;
}
.ad-placeholder{
  display:flex; align-items:center; justify-content:center;
  min-height:100px; border:1.5px dashed rgba(81,35,20,.25); border-radius:14px;
  background:rgba(81,35,20,.03);
}

/* ── Misc ───────────────────────────────────────────────────────── */
details summary::-webkit-details-marker{ display:none; }
#copyBtn.copied{ background:var(--green); color:var(--cream); }

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