/* The Ministry's own look, loaded after Babble's base.css on every page.
   Same family (Londrina logo, geometric avatars, hand-cut edges, lapis and clay as accents), but the
   house style is an over-staffed Babylonian office: manila forms, typewriters, rubber stamps, wax seals,
   carbon copies and clay tablets with routing slips paper-clipped on. */
@font-face { font-family: "Alfa Slab One"; src: url("/fonts/alfa-slab-one.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Special Elite"; src: url("/fonts/special-elite.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Courier Prime"; font-weight: 400; src: url("/fonts/courier-prime.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Courier Prime"; font-weight: 700; src: url("/fonts/courier-prime-700.woff2") format("woff2"); font-display: block; }

:root {
  --manila: #e9d4a0;
  --manila-dk: #c8aa6c;
  --paper: #f4ecd6;
  --legal: #f2e08a;
  --carbon: #34548f;
  --carbon-lt: #c9d3ea;
  --ledger: #22402f;
  --ledger-dk: #142a1e;
  --brass: #c9a24a;
  --red-ink: #b5302a;
  --green-ink: #2b6a45;
  --blue-ink: #2a4a8a;
  --type-ink: #241d16;
  --wax: #9e2a22;

  --slab: "Alfa Slab One", "Rockwell", Georgia, serif;
  --typewriter: "Special Elite", "Courier New", monospace;
  --typed: "Courier Prime", "Courier New", monospace;   /* what players write: crisp and readable */
  --display: var(--typewriter);

  /* paper: fibres and the faintest ruled lines */
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .03' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --rules: repeating-linear-gradient(180deg, transparent 0 27px, rgba(60,90,140,.13) 27px 28px);
  /* cuneiform: little wedges pressed into wet clay */
  --wedges: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60'%3E%3Cg fill='%23000' fill-opacity='.07'%3E%3Cpath d='M6 8l9 3-9 3z M20 6l3 10-3-3z M30 9l9 2-9 4z M54 7l9 3-9 3z M66 5l3 9-4-2z M10 32l3 10-3-2z M18 34l9 3-9 3z M40 30l9 3-9 3z M52 33l3 9-3-2z M70 31l9 3-9 3z M8 52l9 3-9 3z M34 50l3 9-3-2z M60 52l9 3-9 3z'/%3E%3C/g%3E%3C/svg%3E");
  /* rubber-stamp ink never lands evenly */
  --inkmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E");
  /* a steel paperclip */
  --clip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='70' viewBox='0 0 26 70'%3E%3Cpath d='M18 22V58a6 6 0 0 1-12 0V12a8 8 0 0 1 16 0v40' fill='none' stroke='%23565c66' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M18 22V58a6 6 0 0 1-12 0V12a8 8 0 0 1 16 0v40' fill='none' stroke='%23c7ccd4' stroke-width='1.2' stroke-linecap='round' transform='translate(-.6 -.6)'/%3E%3C/svg%3E");
}

/* the desk: a green leather blotter */
body {
  background: var(--noise), radial-gradient(1300px 800px at 50% 40%, rgba(255,240,200,.08), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #27493a, var(--ledger-dk));
  font-family: var(--typewriter);
  letter-spacing: 0;
}
body.teal { /* the "other" desk colour: oxblood leather */
  background: var(--noise), radial-gradient(1100px 700px at 50% 30%, rgba(255,200,150,.08), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #5a2a26, #34160f);
}

/* every .strip is now a slip of paper (the hand-cut edges stay: they're the family resemblance) */
.strip { color: var(--type-ink); font-family: var(--typewriter); }
.strip::before {
  background-image: var(--fibre), var(--noise), radial-gradient(130% 150% at 30% 20%, rgba(255,255,245,.35), transparent 60%);
  box-shadow: inset 0 0 0 1px rgba(60,40,20,.12), inset 0 -4px 8px rgba(80,60,30,.12);
  filter: url(#hew-a) drop-shadow(0 3px 0 rgba(0,0,0,.35)) drop-shadow(0 8px 12px rgba(0,0,0,.25));
}
.strip:nth-child(3n+1)::before { filter: url(#hew-b) drop-shadow(0 3px 0 rgba(0,0,0,.35)) drop-shadow(0 8px 12px rgba(0,0,0,.25)); }
.strip:nth-child(3n+2)::before { filter: url(#hew-c) drop-shadow(0 3px 0 rgba(0,0,0,.35)) drop-shadow(0 8px 12px rgba(0,0,0,.25)); }
.strip { --stone: var(--manila); }
.strip.peach { --stone: var(--paper); }
.strip.rose { --stone: #e7b4a4; color: var(--type-ink); }      /* pink carbon copy */
.strip.sky { --stone: var(--carbon-lt); color: var(--type-ink); } /* blue carbon copy */
.strip.sage { --stone: #b9d2b0; color: var(--type-ink); }
.strip.butter { --stone: var(--legal); color: var(--type-ink); } /* yellow legal pad */
.strip.go { --stone: #b9d9c0; color: var(--type-ink); }
.strip.sky::before, .strip.sage::before, .strip.butter::before, .strip.go::before { background-image: var(--fibre), var(--noise), var(--rules); }

/* buttons: brass-cornered, ink-dark, slab-lettered */
.btn { font-family: var(--slab); font-size: 1.2em; letter-spacing: .02em; padding: .45em 1em .38em; background: #2e5541 var(--noise);
  border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(201,162,74,.55), inset 0 -5px 8px rgba(0,0,0,.3), 0 4px 0 rgba(0,0,0,.4); }
.btn.navy { background-color: #1e2f4f; }
.btn.coral { background-color: var(--red-ink); }
.btn.tan { background-color: var(--brass); color: var(--type-ink); }

/* ---------- the rubber stamp ---------- */
.rstamp {
  --ink: var(--red-ink);
  display: inline-block; font-family: var(--slab); text-transform: uppercase; line-height: 1; letter-spacing: .04em;
  color: var(--ink); padding: .28em .55em .2em; border: .14em solid var(--ink); border-radius: .2em;
  box-shadow: inset 0 0 0 .07em var(--paper), inset 0 0 0 .13em var(--ink);
  transform: rotate(var(--tilt, -7deg)); opacity: .9; mix-blend-mode: multiply;
  -webkit-mask-image: var(--inkmask); mask-image: var(--inkmask); -webkit-mask-size: 260px 110px; mask-size: 260px 110px;
  white-space: nowrap;
}
.rstamp.ok { --ink: var(--green-ink); }
.rstamp.blue { --ink: var(--blue-ink); }
.rstamp.on-dark { mix-blend-mode: normal; background: rgba(244,236,214,.92); }
@keyframes stampdown { 0% { transform: scale(2.3) rotate(var(--tilt, -7deg)); opacity: 0; } 70% { transform: scale(.96) rotate(var(--tilt, -7deg)); opacity: .95; } 100% { transform: scale(1) rotate(var(--tilt, -7deg)); opacity: .9; } }
.rstamp.fresh, .rstamp.land { animation: stampdown .32s cubic-bezier(.5,0,.9,.5) both; }

/* ---------- a clay tablet, with a typed routing slip clipped to it ---------- */
.claytab {
  position: relative; isolation: isolate; color: #3a2414; font-family: var(--typed); font-weight: 700; text-align: center;
  display: flex; align-items: center; justify-content: center; word-break: break-word;
}
.claytab::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 18% 22% 20% 24% / 26% 22% 28% 24%;
  background-color: #cf9a6a;
  background-image: var(--wedges), var(--mottle), var(--pits), var(--noise), radial-gradient(120% 130% at 35% 25%, rgba(255,230,200,.35), transparent 60%);
  box-shadow: inset 0 -10px 18px rgba(70,30,10,.3), inset 0 6px 10px rgba(255,230,200,.25), inset 0 0 0 2px rgba(70,30,10,.2);
  filter: url(#hew-b) drop-shadow(0 8px 0 rgba(30,15,6,.45)) drop-shadow(0 18px 26px rgba(0,0,0,.3));
}
.claytab.fired::before { background-color: #b9a07a; }      /* the deciphered guess: grey-baked */
.claytab.archive::before { background-color: #d9b45a; }    /* the original, from the archive: gilded */
.slip {
  position: relative; background: var(--paper) var(--fibre); color: var(--type-ink); font-family: var(--typewriter);
  padding: 10px 16px 9px 30px; box-shadow: 0 2px 0 rgba(0,0,0,.2), 0 6px 14px rgba(0,0,0,.25); text-align: left; line-height: 1.25;
  clip-path: polygon(0 0, 100% 0, 99.4% 22%, 100% 47%, 99.5% 75%, 100% 100%, 0 100%);
}
.slip::after { content: ""; position: absolute; left: 6px; top: -16px; width: 18px; height: 48px; background: var(--clip) center / contain no-repeat; }
.slip .form { display: block; font-size: .62em; letter-spacing: .08em; opacity: .65; text-transform: uppercase; }
.slip b { font-family: var(--slab); font-weight: 400; letter-spacing: .02em; }

/* ---------- the job card: a Warrant of Appointment ---------- */
.warrant {
  position: relative; display: block; width: 100%; text-align: left; border: 0; color: var(--type-ink); font-family: var(--typewriter);
  background: var(--manila) var(--fibre); padding: 14px 16px 14px; line-height: 1.3;
  box-shadow: inset 0 0 0 6px rgba(255,250,235,.35), inset 0 0 0 7px rgba(120,90,40,.35), 0 5px 0 rgba(0,0,0,.35), 0 12px 22px rgba(0,0,0,.25);
}
.warrant .whead { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; border-bottom: 1px dashed rgba(60,40,20,.4); padding-bottom: 4px; }
.warrant .wname { font-family: var(--slab); font-size: 30px; line-height: 1.02; color: #5a1f14; margin: 8px 0 0; text-transform: uppercase; }
.warrant .wgrade { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.warrant .wflavor { font-style: italic; opacity: .75; margin: 4px 0 8px; font-size: 15px; }
.warrant .wduty { font-family: var(--typed); font-weight: 700; font-size: 19px; line-height: 1.28; }
.warrant .wduty::before { content: "DUTIES: "; font-family: var(--typewriter); font-weight: 400; font-size: 13px; letter-spacing: .1em; opacity: .7; }
.warrant .wfall { font-family: var(--typed); font-size: 15px; margin-top: 6px; opacity: .9; }
.warrant .wfall::before { content: "MISDIRECTED POST? "; font-family: var(--typewriter); font-size: 12px; letter-spacing: .1em; opacity: .7; }
.warrant .wspec { margin-top: 10px; padding: 7px 10px; background: rgba(255,252,240,.55); border-left: 3px solid rgba(120,90,40,.4); font-family: var(--typed); font-size: 14px; display: grid; gap: 2px; }
.warrant .wspec::before { content: "SPECIMEN"; font-family: var(--typewriter); font-size: 11px; letter-spacing: .14em; opacity: .6; }
.warrant .wspec s { opacity: .65; text-decoration-color: rgba(181,48,42,.7); }
/* the wax seal */
.warrant .seal { position: absolute; right: 12px; bottom: 10px; width: 54px; height: 54px; border-radius: 50%; opacity: .95;
  background: radial-gradient(circle at 38% 34%, #d0574a, var(--wax) 55%, #6d1712);
  box-shadow: 0 2px 0 rgba(0,0,0,.3), inset 0 0 0 5px rgba(0,0,0,.12), inset 0 0 0 6px rgba(255,190,170,.18);
  clip-path: polygon(50% 0, 62% 6%, 76% 4%, 82% 16%, 95% 22%, 94% 37%, 100% 50%, 94% 63%, 96% 78%, 82% 84%, 76% 96%, 62% 94%, 50% 100%, 38% 94%, 24% 96%, 18% 84%, 4% 78%, 6% 63%, 0 50%, 6% 37%, 5% 22%, 18% 16%, 24% 4%, 38% 6%); }
/* a little ziggurat pressed into the wax */
.warrant .seal::after { content: ""; position: absolute; inset: 14px 13px 16px; opacity: .45;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath d='M1 20h28v-5H25v-5h-4V5h-4V1h-4v4H9v5H5v5H1z' fill='%23ffd2c4'/%3E%3C/svg%3E") center / contain no-repeat; }
.warrant.uncommon { background-color: #e7cf95; }
.warrant.rare { background-color: #ead07a; box-shadow: inset 0 0 0 6px rgba(255,250,235,.35), inset 0 0 0 8px rgba(160,110,20,.6), 0 5px 0 rgba(0,0,0,.35), 0 12px 22px rgba(0,0,0,.25); }
.warrant.chosen { outline: 4px solid var(--brass); outline-offset: 3px; }
/* an Infiltrator's orders: a smudged carbon copy */
.warrant.forged { background: #2f3b63 var(--fibre); color: #dfe4f3; box-shadow: inset 0 0 0 6px rgba(255,255,255,.05), inset 0 0 0 7px rgba(200,210,240,.25), 0 5px 0 rgba(0,0,0,.4), 0 12px 22px rgba(0,0,0,.3); }
.warrant.forged .wname { color: #ffb3a3; }
.warrant.forged .whead { border-color: rgba(220,225,245,.3); }
.warrant.forged .wspec { background: rgba(0,0,0,.2); border-color: rgba(220,225,245,.3); }
.warrant .wcover { position: relative; margin-top: 12px; padding: 10px 12px 10px; background: var(--manila) var(--fibre); color: var(--type-ink); transform: rotate(-.8deg); box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.warrant .wcover .wgrade { opacity: .8; }
.warrant .wcover .wname { font-size: 24px; margin-top: 2px; }
.warrant .wcover::before { content: ""; position: absolute; left: 50%; top: -6px; width: 34px; height: 9px; margin-left: -17px; border: 2px solid #8a909a; border-bottom: 0; } /* staple */
.warrant .wtag { position: absolute; right: 10px; top: -12px; font-size: 18px; --tilt: 5deg; }
.warrant .wcover .wname { color: #5a1f14; }
.warrant .wspec { margin-right: 52px; }
.warrant.forged .whead span:last-child { visibility: hidden; }

/* a stamp on the dark desk: no paper to soak into, so brighter ink and no blend */
.rstamp.on-dark { mix-blend-mode: normal; background: none; --ink: #ff7a68; box-shadow: inset 0 0 0 .07em transparent, inset 0 0 0 .13em var(--ink); }
.rstamp.on-dark.ok { --ink: #7fe0a6; }

/* your artwork: a symbol at the top of the warrant, and wax seals pressed on at random angles */
.warrant .wicon { display: block; width: 76px; height: 76px; object-fit: contain; margin: 10px auto 0; filter: drop-shadow(0 2px 0 rgba(60,40,20,.25)); }
.warrant .wicon.small { width: 54px; height: 54px; margin: 4px 0 0; float: right; }
.warrant .wicon + .wname { text-align: center; }
.warrant .seal, .warrant .sealimg { transform: rotate(var(--rot, 0deg)); }
.warrant .sealimg { position: absolute; width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(0,0,0,.35)); pointer-events: none; }
/* counterfeit: your seal in the wrong wax, or the drawn one in cheap black-blue wax */
.warrant .sealimg.counterfeit { filter: hue-rotate(200deg) saturate(.6) brightness(.75) drop-shadow(0 2px 1px rgba(0,0,0,.35)); }
.warrant .seal.counterfeit { background: radial-gradient(circle at 38% 34%, #5a6a9a, #26304f 55%, #10162a); }
.warrant.forged .seal, .warrant.forged .sealimg { bottom: auto !important; top: 46px; }
.warrant .wspec { margin-right: 64px; }

/* words pressed into wet clay: dark in the groove, a light catch on the lower lip */
.claytab { color: rgba(88,44,16,.92); text-shadow: 0 .05em 0 rgba(255,228,190,.7), 0 .08em .02em rgba(255,228,190,.25), 0 -.045em .01em rgba(28,9,0,.75), 0 0 .12em rgba(60,25,5,.18); }
.claytab.fired { color: rgba(60,44,26,.92); }
.claytab.archive { color: rgba(110,72,10,.92); text-shadow: 0 .05em 0 rgba(255,244,200,.8), 0 .08em .02em rgba(255,244,200,.3), 0 -.045em .01em rgba(60,30,0,.75), 0 0 .12em rgba(80,50,0,.2); }

/* Architects Daughter: the hand everything on the scrolls is written in */
@font-face { font-family: "Architects Daughter"; src: url("/fonts/architects-daughter.woff2") format("woff2"); font-display: block; }
:root { --hand: "Architects Daughter", "Comic Neue", cursive; }
/* no drop shadows on text, anywhere */
*, *::before, *::after { text-shadow: none !important; }