/* LOVR — Sub-Contractor Agreement, signable single page */

@font-face {
  font-family: 'GT Sectra';
  src: url('assets/fonts/GT-Sectra-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GT Pressura';
  src: url('assets/fonts/GT-Pressura-Standard-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --bordeaux: #4A0D1A;
  --bordeaux-soft: #6b2230;
  --ecru: #F5F0E8;
  --ecru-soft: #EAE3D6;
  --ink: #271a14;
  --line: color-mix(in srgb, var(--bordeaux) 18%, transparent);
  --serif: 'GT Sectra', 'Times New Roman', Georgia, serif;
  --mono: 'GT Pressura', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --gutter-x: clamp(1.4rem, 5vw, 5rem);
  --max-width: 50rem;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body {
  background: var(--ecru);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.62;
}

/* ---------- gate ---------- */
.gate {
  position: fixed; inset: 0;
  background: var(--bordeaux);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity 420ms ease, visibility 0s linear 420ms;
}
.locked .gate { opacity: 1; visibility: visible; transition: opacity 420ms ease, visibility 0s; }
body.unlocked .gate { opacity: 0; visibility: hidden; pointer-events: none; }
.gate__inner { display: flex; flex-direction: column; align-items: center; gap: 2.2rem; }
.gate__logo { width: 84px; height: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.gate__form { width: min(280px, 82vw); display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.gate__input {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ecru) 50%, transparent);
  color: var(--ecru); font-family: var(--mono); font-size: 0.95rem;
  letter-spacing: 0.08em; text-align: center; padding: 0.75rem 0; outline: none;
  caret-color: var(--ecru); transition: border-bottom-color 180ms ease;
}
.gate__input:focus { border-bottom-color: var(--ecru); }
.gate__input::placeholder { color: color-mix(in srgb, var(--ecru) 42%, transparent); font-family: var(--mono); letter-spacing: 0.08em; }
.gate__input.shake { animation: shake 320ms ease; }
.gate__btn {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ecru); background: transparent;
  border: 1px solid color-mix(in srgb, var(--ecru) 38%, transparent);
  padding: 0.7rem 1.8rem; cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.gate__btn:hover { background: var(--ecru); color: var(--bordeaux); border-color: var(--ecru); }
.gate__btn:focus-visible { outline: none; border-color: var(--ecru); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }

/* ---------- doc ---------- */
.doc {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(3rem, 7vh, 5.5rem) var(--gutter-x) clamp(4rem, 8vh, 6rem);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--bordeaux); opacity: 0.75; margin: 0 0 1.3rem;
}

/* cover */
.cover { text-align: center; padding: clamp(1rem, 4vh, 3rem) 0 clamp(2rem, 5vh, 3rem); }
.cover__mark {
  font-family: var(--serif); color: var(--bordeaux);
  font-size: clamp(2.6rem, 7vw, 3.6rem); letter-spacing: 0.04em; margin-bottom: 2.4rem;
}
.cover .eyebrow { margin-bottom: 2.6rem; }
.cover__parties { font-size: 1.05rem; letter-spacing: 0.02em; color: var(--bordeaux); margin: 0.2rem 0; }
.cover__parties span { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; opacity: 0.7; }
.cover__and { font-style: italic; opacity: 0.6; margin: 0.9rem 0; }

.rule { border: 0; border-top: 1px solid var(--line); margin: clamp(2.4rem, 5vh, 3.4rem) 0; }

/* letter */
.letter { margin-bottom: clamp(2.4rem, 5vh, 3.4rem); }
.letter p { margin: 0 0 1.15rem; }
.letter__meta { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; opacity: 0.72; margin-bottom: 0.4rem !important; }
.letter__addr { line-height: 1.5; }
.letter__title {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bordeaux); margin: 1.8rem 0 1.6rem !important;
}

/* clauses */
.clause { margin: 0 0 clamp(2rem, 4.5vh, 3rem); }
.clause__head {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.32rem; color: var(--bordeaux); letter-spacing: 0.005em;
  margin: 0 0 1.25rem; display: flex; align-items: baseline; gap: 0.7rem;
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--line);
}
.clause__num {
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.05em;
  color: var(--bordeaux-soft); flex: 0 0 auto;
  min-width: 1.6rem;
}
.sub { margin: 0 0 0.95rem; padding-left: 2.3rem; position: relative; }
.sub__n {
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.03em;
  color: var(--bordeaux-soft); opacity: 0.85;
}
.lead-in { margin: 0 0 0.9rem; }
.bullets { list-style: none; margin: 0; padding: 0; }
.bullets li { position: relative; padding-left: 1.5rem; margin: 0 0 0.7rem; }
.bullets li::before {
  content: ''; position: absolute; left: 0.15rem; top: 0.72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--bordeaux); opacity: 0.7;
}
.bullets--lettered { counter-reset: lr; }
.bullets--lettered li { padding-left: 2.1rem; }
.bullets--lettered li::before { content: none; }
.bullets--lettered li::after {
  counter-increment: lr; content: '(' counter(lr, lower-alpha) ')';
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 0.74rem; color: var(--bordeaux-soft);
}

/* acceptance + signing */
.accept { margin-top: clamp(1rem, 3vh, 2rem); }
.accept__statement { font-size: 1.05rem; line-height: 1.6; margin: 0 0 2.4rem; }

.sign {
  background: color-mix(in srgb, var(--ecru-soft) 55%, transparent);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  display: flex; flex-direction: column; gap: 1.6rem;
}
.field { display: flex; flex-direction: column; gap: 0.6rem; }
.field__label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bordeaux); opacity: 0.8;
}
.field__input {
  font-family: var(--serif); font-size: 1.05rem; color: var(--ink);
  background: var(--ecru); border: 1px solid var(--line); border-radius: 3px;
  padding: 0.7rem 0.85rem; outline: none;
  transition: border-color 160ms ease;
}
.field__input:focus { border-color: var(--bordeaux); }
.field__input--date { max-width: 16rem; color: var(--bordeaux-soft); }

.pad { position: relative; }
.pad__canvas {
  display: block; width: 100%; height: 180px;
  background: var(--ecru); border: 1px solid var(--line); border-radius: 3px;
  touch-action: none; cursor: crosshair;
}
.pad__hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--bordeaux); opacity: 0.4; pointer-events: none; text-align: center; width: 90%;
  transition: opacity 160ms ease;
}
.pad.is-drawn .pad__hint { opacity: 0; }
.pad__clear {
  align-self: flex-start;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bordeaux-soft); background: transparent; border: 0; padding: 0.2rem 0;
  cursor: pointer; opacity: 0.8; border-bottom: 1px solid var(--line);
}
.pad__clear:hover { opacity: 1; }

.agree { display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer; font-size: 0.98rem; }
.agree input { margin-top: 0.32em; width: 1.05rem; height: 1.05rem; accent-color: var(--bordeaux); flex: 0 0 auto; }

.sign__row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.4rem; }
.sign__btn {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ecru); background: var(--bordeaux); border: 1px solid var(--bordeaux);
  padding: 0.95rem 2.2rem; cursor: pointer; border-radius: 3px;
  transition: background 160ms ease, opacity 160ms ease;
}
.sign__btn:hover { background: var(--bordeaux-soft); }
.sign__btn:disabled { opacity: 0.5; cursor: default; }
.sign__status { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--bordeaux-soft); }

.principal { margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.principal__sig { font-size: 1.1rem; color: var(--bordeaux); margin: 0 0 0.2rem; }
.principal__role { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; opacity: 0.72; margin: 0.1rem 0; }

/* done overlay */
.done {
  position: fixed; inset: 0; z-index: 9998;
  background: color-mix(in srgb, var(--bordeaux) 92%, black);
  display: flex; align-items: center; justify-content: center; padding: 1.4rem;
}
.done[hidden] { display: none; }
.done__card { text-align: center; max-width: 30rem; }
.done__mark { font-family: var(--serif); color: var(--ecru); font-size: 2.4rem; letter-spacing: 0.05em; margin-bottom: 1.8rem; }
.done__head { font-family: var(--serif); color: var(--ecru); font-size: 1.5rem; margin: 0 0 1rem; }
.done__body { color: color-mix(in srgb, var(--ecru) 82%, transparent); margin: 0 0 2rem; line-height: 1.6; }
.done__print {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ecru); background: transparent; border: 1px solid color-mix(in srgb, var(--ecru) 40%, transparent);
  padding: 0.8rem 2rem; cursor: pointer;
}
.done__print:hover { background: var(--ecru); color: var(--bordeaux); }

/* signed-state stamp (after submit, in place of the pad) */
.sigimg { display: block; max-width: 100%; height: 150px; object-fit: contain; object-position: left center; background: var(--ecru); border: 1px solid var(--line); border-radius: 3px; }

/* ---------- print ---------- */
@media print {
  @page { margin: 18mm 16mm; }
  html, body { background: #fff; color: #000; font-size: 12px; }
  .gate, .done, .pad__clear, .pad__hint { display: none !important; }
  .doc { max-width: none; padding: 0; }
  .sign { background: none; border: 0; padding: 0; gap: 1rem; }
  .field__input, .sigimg, .pad__canvas { border: 0; background: none; }
  .field__input { padding-left: 0; }
  .sign__row, #agree-box { display: none !important; }
  .agree { font-size: 11px; }
  .clause, .accept { break-inside: avoid; }
  .cover__mark, .done__mark { color: var(--bordeaux); }
}