/* Prorata — an open ledger book on a dark desk. Two pages, a spine down the middle, and the
   footer is the signature line at the foot of the right page. No hero image, no panel stack. */

@font-face{ font-family:"Alexandria"; src:url("/fonts/Alexandria.ttf") format("truetype"); font-weight:400; font-display:block }
@font-face{ font-family:"RedHatMono"; src:url("/fonts/RedHatMono.ttf") format("truetype"); font-weight:400; font-display:block }

:root{
  --paper:#f4f1e8;
  --paper-2:#ece8dc;
  --ink:#1b1b1b;
  --red:#b8352c;
  --blue:#2b4a9b;
  --carbon:#9a958a;
  --rule:#c9c3b4;
  --desk:#2b2620;
  --sans:"Alexandria", "Helvetica Neue", Arial, sans-serif;
  --mono:"RedHatMono", ui-monospace, Consolas, monospace;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--desk); color:var(--ink); font-family:var(--mono); font-size:14px; line-height:1.6}
h1,h2{font-family:var(--sans); font-weight:400; margin:0; letter-spacing:-.4px}
code{font-family:var(--mono); background:#1b1b1b0f; padding:2px 6px}
.dim{color:var(--carbon)}
.fine{font-size:12px; color:var(--carbon)}
.empty{color:var(--carbon); padding:12px 0; margin:0}
.right{text-align:right}

/* ---------- the desk the book lies on ---------- */
.desk{
  min-height:100vh; padding:34px 20px 34px;
  background:
    radial-gradient(120% 80% at 50% 0%, #3a332b 0%, #2b2620 55%, #211d18 100%),
    url("/art/hero.png") center top / cover no-repeat;
  background-blend-mode:multiply, normal;
}

/* ---------- the book ---------- */
.book{
  max-width:1260px; margin:0 auto;
  display:grid; grid-template-columns:1fr 46px 1fr;
  box-shadow:0 26px 60px #0008;
}
.page{background:var(--paper); padding:30px 34px 40px; min-height:min(86vh, 900px)}
.page-left{
  /* ruled paper with a red margin, drawn rather than pictured */
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 31px, #c9c3b459 31px 32px),
    linear-gradient(to right, transparent 0 40px, #b8352c33 40px 41px, transparent 41px);
  background-position:0 120px, 0 0;
  border-right:1px solid var(--rule);
}
.page-right{background:var(--paper-2); border-left:1px solid var(--rule)}

/* the spine: stitching between the pages */
.spine{
  background:linear-gradient(90deg, #d8d2c2, #bdb7a6 35%, #8f8a7b 50%, #bdb7a6 65%, #d8d2c2);
  display:flex; flex-direction:column; align-items:center; justify-content:space-evenly; padding:60px 0;
}
.spine i{width:14px; height:3px; background:#6e6a5e; display:block}

/* ---------- page furniture ---------- */
.page-top{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.page-top-right{justify-content:flex-end}
.seal-mark{width:38px; height:38px}
.page-top h1{font-size:40px; line-height:1}
.page-sub{font-size:11px; letter-spacing:.6px; color:var(--carbon)}
.folio{margin-left:auto; font-size:12px; color:var(--carbon)}
.state{font-size:12px; color:var(--blue)}
.lede{margin:0 0 22px; font-size:14px; max-width:60ch}

/* ---------- the deed ---------- */
.cols, .line{display:grid; grid-template-columns:110px 1fr 90px 30px; gap:10px; align-items:center}
.cols{font-size:10px; letter-spacing:.9px; text-transform:uppercase; color:var(--carbon); padding-bottom:6px; border-bottom:1px solid var(--rule)}
.line{padding:6px 0}
.line input{
  font-family:var(--mono); font-size:13px; padding:8px 9px;
  border:1px solid var(--rule); background:#fffdf7; color:var(--ink); width:100%;
}
.line input:focus{outline:2px solid var(--blue); outline-offset:-2px}
.line input.pct{text-align:right}
.line .drop{background:transparent; border:0; color:var(--carbon); cursor:pointer; font-size:16px; line-height:1}
.line .drop:hover{color:var(--red)}
.line.bad input.addr{border-color:var(--red); background:#b8352c0f}
.ghost{
  font-family:var(--mono); font-size:13px; background:transparent; color:var(--blue);
  border:1px dashed var(--blue); padding:8px 12px; cursor:pointer; margin-top:10px;
}
.ghost:hover{background:#2b4a9b12}

.sums{display:flex; gap:28px; margin-top:20px; border-top:2px solid var(--ink); padding-top:12px; flex-wrap:wrap}
.sum span{display:block; font-size:10px; letter-spacing:.9px; text-transform:uppercase; color:var(--carbon)}
.sum b{font-family:var(--sans); font-size:26px}
.sum.over b{color:var(--red)}

.sign{display:flex; align-items:center; gap:18px; margin-top:22px; flex-wrap:wrap}
.stamp{width:78px; opacity:.12; transform:rotate(-12deg)}
.stamp.on{opacity:.9}
.sign .fine{flex:1; min-width:220px; margin:0}

/* ---------- the wheel on the right page ---------- */
.wheel{display:grid; grid-template-columns:150px 1fr; gap:20px; align-items:center; margin-bottom:26px}
.pie{width:150px; height:150px; border-radius:50%; border:2px solid var(--ink); background:conic-gradient(var(--rule) 0 100%)}
.pie-key{list-style:none; margin:0; padding:0}
.pie-key li{display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px dashed var(--rule); font-size:12px}
.pie-key i{width:11px; height:11px; display:block; flex:none; border:1px solid var(--ink)}
.pie-key b{margin-left:auto; font-family:var(--sans)}

.page-right h2{font-size:22px; margin:0 0 10px}
.register-list{list-style:none; margin:0 0 26px; padding:0}
.register-list li{display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--rule); font-size:13px}
.terms{margin:0 0 30px; padding-left:20px}
.terms li{margin:7px 0; font-size:13px}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--sans); font-size:13px; background:var(--ink); color:var(--paper);
  border:0; padding:9px 16px; cursor:pointer;
}
.btn:hover{background:var(--blue)}
.btn[disabled]{background:var(--carbon); cursor:not-allowed}
.btn-small{font-size:12px; padding:6px 10px}
.btn-seal{font-size:15px; padding:12px 22px; background:var(--red)}
.btn-seal:hover{background:#d2463b}

/* ---------- the signature line ---------- */
.signature{
  border-top:1px solid var(--ink); padding-top:14px;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
}
.sig-label{font-family:var(--sans); font-size:16px; color:var(--red)}
.links{display:flex; gap:16px; font-family:var(--sans); font-size:13px; margin-left:auto}
.links a{color:var(--blue); text-decoration:none; border-bottom:1px solid #2b4a9b4d}
.links a:hover{color:var(--red)}
.signature .fine{flex-basis:100%; margin:6px 0 0}

@media (max-width:980px){
  .book{grid-template-columns:1fr}
  .spine{height:22px; padding:0; flex-direction:row}
  .page-left{border-right:0}
  .page-right{border-left:0}
  .wheel{grid-template-columns:1fr}
  .pie{margin:0 auto}
}

/* links that exist but lead nowhere until the coin launches */
.links a.soon{opacity:.4; pointer-events:none; cursor:default}