/* JokeJudge: parchment, ink, oxblood, and a gold seal. Court documents, not a website. */
:root {
  --paper:#f7f2e7; --paper-hi:#fbf8f0; --ink:#1e2430; --oxblood:#7a1f1f;
  --gold:#b08d3e; --faint:#8a8272; --line:#3a4152;
}
* { box-sizing:border-box; }
html,body { margin:0; background:var(--paper); color:var(--ink);
  font-family:'Libre Caslon Text', Georgia, serif; }

/* ── masthead ── */
#masthead { text-align:center; padding:34px 16px 0; }
.seal { width:64px; height:64px; margin:0 auto 10px; border-radius:50%;
  border:2.5px solid var(--gold); color:var(--gold); font-size:34px; line-height:60px;
  box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 4.5px var(--gold); }
.mast-title { font-variant:small-caps; letter-spacing:3px; font-size:clamp(20px, 4vw, 30px);
  font-weight:700; }
.mast-sub { font-style:italic; color:var(--faint); font-size:13px; margin-top:4px; }
.rule-double { max-width:680px; margin:16px auto 0; border-top:3px double var(--line); }

#court { max-width:680px; margin:0 auto; padding:26px 18px 40px; }
#colophon { text-align:center; font-style:italic; color:var(--faint); font-size:13px;
  padding:0 16px 44px; }

/* ── shared document furniture ── */
h2.doc { font-variant:small-caps; letter-spacing:2px; text-align:center;
  font-size:21px; margin:6px 0 4px; }
.docket-no { text-align:center; font-family:'Special Elite', monospace; font-size:13px;
  color:var(--oxblood); letter-spacing:1px; margin-bottom:14px; }
.legal { font-size:16.5px; line-height:1.7; }
.legal p { margin:0 0 14px; }
.center { text-align:center; }
.fine { font-size:13px; color:var(--faint); font-style:italic; }

button.gavel { display:inline-block; background:var(--ink); color:var(--paper-hi);
  border:none; padding:13px 30px; font-family:inherit; font-variant:small-caps;
  letter-spacing:2px; font-size:16px; cursor:pointer; border-radius:2px;
  box-shadow:2px 2px 0 var(--gold); }
button.gavel:hover { background:var(--oxblood); }
button.gavel:active { transform:translate(1px,1px); box-shadow:1px 1px 0 var(--gold); }
button.quiet { background:none; border:none; color:var(--faint); font-family:inherit;
  font-style:italic; font-size:14px; cursor:pointer; text-decoration:underline; padding:8px; }

/* ── division picker ── */
.division { display:block; width:100%; text-align:left; background:var(--paper-hi);
  border:1.5px solid var(--line); border-radius:3px; padding:16px 18px; margin:12px 0;
  cursor:pointer; font-family:inherit; color:var(--ink);
  transition:transform .08s ease, box-shadow .08s ease; }
.division:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(30,36,48,.18); }
.division .dv-name { font-variant:small-caps; letter-spacing:2px; font-size:19px;
  color:var(--oxblood); }
.division .dv-sub { font-style:italic; color:var(--faint); font-size:14px; margin-top:4px; }

/* ── the case: two exhibits ── */
.exhibits { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 8px; }
.exhibit { position:relative; background:var(--paper-hi); border:1.5px solid var(--line);
  border-radius:3px; padding:44px 18px 58px; cursor:pointer; text-align:left;
  font-family:inherit; color:var(--ink);
  transition:transform .1s ease, box-shadow .1s ease; }
.exhibit:hover { transform:translateY(-3px); box-shadow:0 6px 18px rgba(30,36,48,.22); }
.exhibit .ex-tag { position:absolute; top:10px; left:14px; font-family:'Special Elite',monospace;
  font-size:12px; letter-spacing:1.5px; color:var(--oxblood); }
.exhibit .ex-text { font-family:'Special Elite', monospace; font-size:15.5px; line-height:1.65; }
.exhibit .ex-find { position:absolute; bottom:12px; left:14px; right:14px; text-align:center;
  font-variant:small-caps; letter-spacing:1.5px; font-size:13px; color:var(--faint);
  border-top:1px solid rgba(58,65,82,.25); padding-top:8px; }
.exhibit:hover .ex-find { color:var(--oxblood); }

/* the stamp slammed on the prevailing exhibit */
.stamp { position:absolute; top:50%; left:50%; z-index:3;
  transform:translate(-50%,-50%) rotate(-14deg) scale(1.6); opacity:0;
  border:3px solid var(--oxblood); color:var(--oxblood); border-radius:4px;
  font-variant:small-caps; letter-spacing:2px; font-weight:700; font-size:20px;
  padding:6px 14px; background:rgba(247,242,231,.85); pointer-events:none;
  transition:transform .18s cubic-bezier(.2,1.6,.4,1), opacity .12s ease; }
.exhibit.prevailed .stamp { opacity:1; transform:translate(-50%,-50%) rotate(-14deg) scale(1); }

.aside { text-align:center; font-style:italic; color:var(--faint); font-size:14px;
  min-height:22px; margin-top:10px; }
.progress { text-align:center; font-family:'Special Elite',monospace; font-size:12px;
  color:var(--faint); letter-spacing:2px; margin-top:16px; }

/* ── the verdict certificate ── */
.certificate { background:var(--paper-hi); border:2px solid var(--line); border-radius:3px;
  padding:26px 26px 20px; margin:14px 0;
  box-shadow:inset 0 0 0 5px var(--paper-hi), inset 0 0 0 6.5px var(--gold); }
.certificate .cert-head { text-align:center; font-variant:small-caps; letter-spacing:2.5px;
  font-size:18px; color:var(--oxblood); margin-bottom:2px; }
.certificate .cert-sub { text-align:center; font-family:'Special Elite',monospace;
  font-size:12px; color:var(--faint); margin-bottom:16px; }
.certificate h4 { font-variant:small-caps; letter-spacing:1.5px; font-size:14px;
  margin:16px 0 6px; color:var(--ink); }
.certificate .body { font-size:15.5px; line-height:1.7; }
.certificate .so-ordered { margin-top:18px; text-align:right; }
.certificate .so-ordered .so { font-variant:small-caps; letter-spacing:2px; font-weight:700; }
.certificate .so-ordered .sig { font-style:italic; color:var(--faint); font-size:14px; }
.actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; }

/* ── records table ── */
table.records { width:100%; border-collapse:collapse; font-size:14.5px; margin-top:10px; }
table.records th { font-variant:small-caps; letter-spacing:1.5px; text-align:left;
  border-bottom:2px solid var(--line); padding:6px 8px; }
table.records td { border-bottom:1px solid rgba(58,65,82,.2); padding:7px 8px; }
table.records td.r { text-align:right; font-family:'Special Elite',monospace; font-size:13px; }

/* ── appeals form ── */
.appeal-form label { display:block; font-variant:small-caps; letter-spacing:1.5px;
  font-size:14px; margin:14px 0 4px; }
.appeal-form textarea, .appeal-form input { width:100%; background:var(--paper-hi);
  border:1.5px solid var(--line); border-radius:2px; padding:10px 12px;
  font-family:'Special Elite',monospace; font-size:14px; color:var(--ink); }
.appeal-form textarea { min-height:84px; resize:vertical; }

.deliberating { text-align:center; font-style:italic; color:var(--faint); padding:40px 0; }

@media (max-width:560px){
  .exhibits { grid-template-columns:1fr; }
  .exhibit { padding:40px 16px 54px; }
}
@media (prefers-reduced-motion: reduce){
  .exhibit, .division, .stamp { transition:none; }
}