/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}:root{
  --paper:#efe9db;
  --ink:#1a1a1a;
  --faded:#3a3a3a;
  --stamp:#7a1f1f;
  --green:#2b3a32;       /* institutional */
  --green2:#1f2b25;
  --rule: rgba(0,0,0,.18);
  --shadow: rgba(0,0,0,.20);
  --glow: rgba(140, 255, 210, .12);
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
}

body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(255,255,255,.12), transparent 50%),
    radial-gradient(900px 700px at 70% 20%, rgba(0,0,0,.25), transparent 50%),
    linear-gradient(180deg, var(--green2), var(--green));
  font-family: "Courier New", Courier, monospace;
  letter-spacing:.2px;
}

a{ color:inherit; }
a:hover{ text-decoration:none; }

.wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 16px 60px;
}

.topbar{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom: 14px;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.brand .seal{
  font-size:12px;
  color: rgba(255,255,255,.85);
  text-transform:uppercase;
  letter-spacing: 2px;
}

.brand .title{
  font-size:22px;
  line-height:1.2;
  color: rgba(255,255,255,.95);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.brand .sub{
  font-size:12px;
  color: rgba(255,255,255,.7);
  max-width: 520px;
}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
  padding-top: 4px;
}

.nav a{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing: 1.6px;
  color: rgba(255,255,255,.85);
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.08);
}

.nav a:hover{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.3);
}

.panel{
  background:
    linear-gradient(0deg, rgba(0,0,0,.03), rgba(0,0,0,.03)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.02), rgba(0,0,0,.02) 2px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 5px),
    var(--paper);
  border: 1px solid rgba(0,0,0,.22);
  box-shadow: 0 18px 40px var(--shadow);
  padding: 18px;
  position:relative;
  overflow:hidden;
}

.panel::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(closest-side at 30% 20%, rgba(0,0,0,.06), transparent 60%),
    radial-gradient(closest-side at 75% 45%, rgba(0,0,0,.05), transparent 65%),
    radial-gradient(closest-side at 45% 85%, rgba(0,0,0,.04), transparent 70%);
  transform: rotate(-2deg);
  pointer-events:none;
}

.header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  position:relative;
  z-index:1;
}

.hgroup{
  flex:1;
}

.h1{
  font-size:18px;
  margin:0;
  letter-spacing: .8px;
}

.meta{
  margin-top:6px;
  font-size:12px;
  color: var(--faded);
}

.rule{
  height:1px;
  background: var(--rule);
  margin: 14px 0;
}

.smallnote{
  font-size:12px;
  color: var(--faded);
  line-height:1.5;
}

.stamp{
  border:2px solid var(--stamp);
  color: var(--stamp);
  padding: 10px 12px;
  text-transform:uppercase;
  letter-spacing: 2px;
  font-size:12px;
  transform: rotate(6deg);
  opacity:.85;
  white-space:nowrap;
}

.doc{
  position:relative;
  z-index:1;
  font-size:14px;
  line-height:1.65;
  white-space: pre-wrap;
}

.doc p{
  margin: 0 0 14px;
}

.warn{
  font-size:12px;
  background: rgba(122,31,31,.08);
  border: 1px solid rgba(122,31,31,.22);
  padding: 10px;
}

.listgrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  position:relative;
  z-index:1;
}

.card{
  border:1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.35);
  padding: 12px;
}

.card h3{
  margin:0 0 8px;
  font-size:14px;
  letter-spacing:.5px;
}

.card .line{
  font-size:12px;
  color: var(--faded);
  margin-bottom:6px;
}

.card a{
  display:inline-block;
  margin-top: 8px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing: 1.4px;
  padding: 6px 8px;
  border:1px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.04);
}

.card a:hover{
  background: rgba(0,0,0,.10);
}

.footer{
  margin-top: 14px;
  font-size:11px;
  color: rgba(255,255,255,.65);
  text-align:center;
}

.margins{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.tag{
  font-size:11px;
  color: rgba(0,0,0,.7);
  border:1px dashed rgba(0,0,0,.25);
  padding: 4px 8px;
  background: rgba(255,255,255,.35);
}

/* “archival glitch” bits */
.redact{
  background:#111;
  color:#111;
  padding: 0 .25em;
  border-radius:2px;
}

.ghostline{
  color: rgba(0,0,0,.55);
  text-shadow: 0 0 12px var(--glow);
}

@media (max-width: 760px){
  .listgrid{ grid-template-columns: 1fr; }
  .topbar{ flex-direction:column; }
  .nav{ justify-content:flex-start; }
}