/* ─────────────────────────────────────────────────────────────────────
   handcraft.css — earned imperfection primitives
   "you can draw a perfect square. you choose not to, because the
    hand-drawn one has more authority."
   ───────────────────────────────────────────────────────────────────── */

/* ── .rule-hand ────────────────────────────────────────────────────
   A hand-drawn horizontal rule. Use *once per page*, max. Replace the
   normal <hr> with <div class="rule-hand"></div>.

   Built from an inline SVG background — the line has tiny y-jitter at
   each segment and the dashes don't tile to a pixel grid. The wobble is
   committed to (it's the same wobble every render), not random.
   ──────────────────────────────────────────────────────────────────── */
.rule-hand {
  height: 4px;
  margin: 48px 0 48px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 4px;
  /* path is the wobble; stroke is the dash; --rule-color is the ink */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 4' preserveAspectRatio='none'>\
<path d='M0,2.1 L48,1.7 L94,2.3 L137,1.9 L188,2.0 L233,1.6 L281,2.4 L329,1.8 L378,2.2 L421,1.9 L471,2.3 L517,1.7 L562,2.1 L600,2.0' \
fill='none' stroke='%232b6263' stroke-width='1' \
stroke-dasharray='6 5 7 4 5 6 8 4 6 5 7 5'/>\
</svg>");
}

/* ── .rule-hand--hot ─ same rule, but inked in furnace. for emphasis. */
.rule-hand.rule-hand--hot {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 4' preserveAspectRatio='none'>\
<path d='M0,2.1 L48,1.7 L94,2.3 L137,1.9 L188,2.0 L233,1.6 L281,2.4 L329,1.8 L378,2.2 L421,1.9 L471,2.3 L517,1.7 L562,2.1 L600,2.0' \
fill='none' stroke='%23f15f22' stroke-width='1' \
stroke-dasharray='6 5 7 4 5 6 8 4 6 5 7 5'/>\
</svg>");
}

/* ── .btn-cut ──────────────────────────────────────────────────────
   A button with one shaved corner — top-right, 8px diagonal.
   Like a piece of brass cut once and not deburred. Apply on top of the
   .btn class.
   ──────────────────────────────────────────────────────────────────── */
.btn-cut {
  position: relative;
  /* The shave: clip-path with one diagonal at the top-right corner. */
  clip-path: polygon(
    0 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% 100%,
    0 100%
  );
}
/* clip-path eats the border, so re-draw the shaved edge as a 1px diagonal */
.btn-cut::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(135deg, transparent 0 calc(50% - 0.5px),
      var(--graphline) calc(50% - 0.5px) calc(50% + 0.5px),
      transparent calc(50% + 0.5px) 100%);
  pointer-events: none;
}
.btn-cut:hover::after {
  background:
    linear-gradient(135deg, transparent 0 calc(50% - 0.5px),
      var(--furnace) calc(50% - 0.5px) calc(50% + 0.5px),
      transparent calc(50% + 0.5px) 100%);
}

/* ── .pad-hand ─────────────────────────────────────────────────────
   Asymmetric padding for cards/panels. Within a ±4px band of the
   8px grid. The card looks placed by hand, not generated.
   ──────────────────────────────────────────────────────────────────── */
.pad-hand {
  padding: 20px 18px 18px 22px;
}

/* ── .note-pin ─────────────────────────────────────────────────────
   Marginalia. A pinned annotation, slightly rotated, placed in the
   margin. Reserve for surfaces that earn one (manifesto, changelog,
   doc page). Never on utility surfaces.

   Usage:
     <div class="note-pin">— probe reattached after the second power cut</div>
   ──────────────────────────────────────────────────────────────────── */
.note-pin {
  display: inline-block;
  color: var(--patina);
  font-style: italic;
  font-size: var(--type-sm);
  letter-spacing: 0.01em;
  transform: rotate(-0.4deg);
  padding: 2px 8px 2px 10px;
  border-left: 1px solid var(--graphline);
  margin: 8px 0;
  max-width: 32ch;
  line-height: 1.5;
}
.note-pin.note-pin--right {
  float: right;
  margin: 4px 0 8px 16px;
  transform: rotate(0.6deg);
  text-align: right;
  border-left: none;
  border-right: 1px solid var(--graphline);
  padding: 2px 10px 2px 8px;
}

/* ── .breathe-* ────────────────────────────────────────────────────
   Section bottom-margin variants. Pick one per section. Read top to
   bottom, the page breathes rhythmically, not mechanically.
   ──────────────────────────────────────────────────────────────────── */
.breathe-tight { margin-bottom: 56px; }
.breathe       { margin-bottom: 64px; }
.breathe-loose { margin-bottom: 72px; }
.breathe-wide  { margin-bottom: 80px; }

/* ── .hand-underline ───────────────────────────────────────────────
   An underline that looks drawn under the type rather than rendered
   beneath it. Useful sparingly on inline emphasis in prose.
   ──────────────────────────────────────────────────────────────────── */
.hand-underline {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 4' preserveAspectRatio='none'>\
<path d='M0,2.2 L30,1.6 L62,2.4 L90,1.8 L120,2.1' fill='none' stroke='%23f15f22' stroke-width='1'/>\
</svg>");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 4px;
  padding-bottom: 4px;
  text-decoration: none;
}

/* ── .wobble-frame ─────────────────────────────────────────────────
   A 1px graphline border that is *almost* aligned to the box but the
   stroke is drawn slightly inside on top/left, slightly outside on
   bottom/right. Reads as a square traced once by a steady hand.
   Use sparingly. One frame per page, max.
   ──────────────────────────────────────────────────────────────────── */
.wobble-frame {
  position: relative;
  border: none;
  background: var(--workbench);
}
.wobble-frame::before {
  content: "";
  position: absolute;
  inset: -1px -1px 0 0;
  border-top: 1px solid var(--graphline);
  border-right: 1px solid var(--graphline);
  pointer-events: none;
}
.wobble-frame::after {
  content: "";
  position: absolute;
  inset: 0 0 -1px -1px;
  border-bottom: 1px solid var(--graphline);
  border-left: 1px solid var(--graphline);
  pointer-events: none;
}