/* ALIENSGOVFILES.COM — "The Reading Room"
   Palette: manila #E9E2D0 / paper #F6F1E1 / ink #1C1A16 / stamp red #B3261E / folder tan #C9B98A / bar #141210 */

:root{
  --manila:#E9E2D0; --paper:#F6F1E1; --ink:#1C1A16; --stamp:#B3261E;
  --tan:#C9B98A; --bar:#141210; --faded:#6E6655; --line:#B9AE8F;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--manila); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif; line-height:1.55;
  background-image:radial-gradient(rgba(28,26,22,.045) 1px, transparent 1px);
  background-size:5px 5px;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
a{color:inherit}
:focus-visible{outline:3px solid var(--stamp); outline-offset:2px}

/* ---------- header ---------- */
header.site{
  border-bottom:3px solid var(--bar); background:var(--paper);
  padding:.6rem 1.2rem; display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:50; box-shadow:0 2px 0 rgba(28,26,22,.12);
}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none}
.brand svg{flex:0 0 auto}
.brand b{font-family:"IBM Plex Mono",monospace; font-size:1.05rem; letter-spacing:.06em}
.brand small{display:block; font-size:.62rem; letter-spacing:.22em; color:var(--faded); text-transform:uppercase}
nav.site a{font-family:"IBM Plex Mono",monospace; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; margin-left:1.1rem; border-bottom:2px solid transparent; padding-bottom:2px}
nav.site a:hover, nav.site a[aria-current]{border-color:var(--stamp)}

/* ---------- hero ---------- */
.hero{max-width:1200px; margin:0 auto; padding:3.2rem 1.2rem 2rem; position:relative}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--faded); margin:0 0 .8rem}
.hero h1{
  font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:clamp(1.7rem,4.4vw,3.1rem);
  line-height:1.18; margin:0 0 1rem; max-width:21ch; text-wrap:balance;
}
/* redaction bars: hover/focus reveals */
.redact{
  background:var(--bar); color:var(--bar); padding:0 .18em; border-radius:1px;
  transition:color .25s ease, background .25s ease; cursor:help; box-decoration-break:clone;
}
.redact:hover,.redact:focus{background:transparent; color:var(--stamp)}
.hero p.lede{max-width:62ch; font-size:1.02rem; color:#3A362C}
.stamp{
  position:absolute; right:1.2rem; top:2.4rem; transform:rotate(8deg);
  font-family:"Saira Stencil One",monospace; color:var(--stamp); border:4px double var(--stamp);
  padding:.35rem .9rem; font-size:clamp(.8rem,2vw,1.25rem); letter-spacing:.14em; text-transform:uppercase;
  opacity:.85; pointer-events:none; mix-blend-mode:multiply;
}
.statline{display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:1.6rem}
.statline div{border-left:3px solid var(--tan); padding-left:.7rem}
.statline b{font-family:"IBM Plex Mono",monospace; font-size:1.4rem; display:block}
.statline span{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faded)}

/* ---------- featured dossiers ---------- */
.section-label{
  max-width:1200px; margin:2.2rem auto .9rem; padding:0 1.2rem;
  font-family:"IBM Plex Mono",monospace; font-size:.75rem; letter-spacing:.26em; text-transform:uppercase;
  display:flex; align-items:center; gap:.9rem; color:var(--faded);
}
.section-label::after{content:""; flex:1; height:1px; background:var(--line)}
.featured{max-width:1200px; margin:0 auto; padding:0 1.2rem; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.folder{
  background:var(--paper); border:1.5px solid var(--bar); position:relative;
  box-shadow:3px 3px 0 rgba(28,26,22,.85); display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease; text-decoration:none; cursor:pointer;
}
.folder:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 rgba(28,26,22,.85)}
.folder::before{ /* folder tab */
  content:attr(data-tab); position:absolute; top:-1.45rem; left:-1.5px;
  background:var(--tan); border:1.5px solid var(--bar); border-bottom:none;
  font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.14em;
  padding:.18rem .6rem .1rem; text-transform:uppercase;
}
.folder .img{aspect-ratio:16/9; overflow:hidden; border-bottom:1.5px solid var(--bar); background:#D8CFB6}
.folder .img img{width:100%; height:100%; object-fit:cover; filter:sepia(.18) contrast(1.03); display:block}
.folder .body{padding:.9rem 1rem 1.05rem}
.folder h3{font-family:"IBM Plex Mono",monospace; font-size:.98rem; margin:.1rem 0 .45rem; line-height:1.3}
.folder p{font-size:.86rem; margin:0; color:#3A362C}
.meta{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.1em; color:var(--faded); text-transform:uppercase; display:flex; gap:.9rem; flex-wrap:wrap; margin-top:.6rem}
.featured-wrap{padding-top:1.45rem}

/* ---------- archive controls ---------- */
.controls{
  max-width:1200px; margin:0 auto; padding:0 1.2rem; display:grid; gap:.7rem;
  grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(140px,1fr)) auto;
  align-items:end;
}
.controls label{display:block; font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faded); margin-bottom:.25rem}
.controls input,.controls select{
  width:100%; padding:.55rem .65rem; border:1.5px solid var(--bar); background:var(--paper);
  font-family:"IBM Plex Mono",monospace; font-size:.85rem; color:var(--ink); border-radius:0;
}
.controls .count{font-family:"IBM Plex Mono",monospace; font-size:.78rem; padding-bottom:.65rem; color:var(--faded); white-space:nowrap}
.controls .count b{color:var(--stamp)}

/* ---------- record grid ---------- */
.grid{max-width:1200px; margin:1.1rem auto 3rem; padding:0 1.2rem; display:grid; gap:.8rem;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));}
.card{
  background:var(--paper); border:1.5px solid var(--bar); padding:.85rem .95rem; cursor:pointer;
  box-shadow:2px 2px 0 rgba(28,26,22,.7); transition:transform .12s ease, box-shadow .12s ease;
  display:flex; flex-direction:column; gap:.45rem; text-align:left; font:inherit; color:inherit; width:100%;
}
.card:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 rgba(28,26,22,.7)}
.card .id{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:.86rem; word-break:break-word}
.card .desc{font-size:.8rem; color:#3A362C; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.badges{display:flex; gap:.4rem; flex-wrap:wrap}
.badge{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--bar); padding:.1rem .4rem; background:var(--manila)}
.badge.r02{background:var(--stamp); color:var(--paper); border-color:var(--stamp)}
.badge.vid{background:var(--bar); color:var(--paper)}
.more{display:block; margin:0 auto 3.5rem; border:1.5px solid var(--bar); background:var(--paper);
  font-family:"IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem;
  padding:.7rem 2.2rem; cursor:pointer; box-shadow:3px 3px 0 rgba(28,26,22,.85)}
.more:hover{background:var(--tan)}

/* ---------- modal ---------- */
dialog{
  border:2px solid var(--bar); background:var(--paper); color:var(--ink); padding:0;
  width:min(760px,92vw); max-height:88vh; box-shadow:8px 8px 0 rgba(28,26,22,.85);
}
dialog::backdrop{background:rgba(28,26,22,.55)}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
  border-bottom:2px solid var(--bar); padding:.9rem 1.1rem; background:var(--manila)}
.modal-head h2{font-family:"IBM Plex Mono",monospace; font-size:1.05rem; margin:0; word-break:break-word}
.modal-close{border:1.5px solid var(--bar); background:var(--paper); font-family:"IBM Plex Mono",monospace; cursor:pointer; padding:.2rem .6rem; font-size:.9rem}
.modal-body{padding:1.1rem; overflow-y:auto}
.modal-body img{max-width:100%; border:1.5px solid var(--bar); display:block; margin:0 0 .9rem}
.modal-body iframe{width:100%; aspect-ratio:16/9; border:1.5px solid var(--bar); margin:0 0 .9rem; background:#000}
.modal-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.6rem; margin:.2rem 0 .9rem}
.modal-meta div{border-left:3px solid var(--tan); padding-left:.6rem}
.modal-meta span{font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faded); display:block}
.modal-meta b{font-family:"IBM Plex Mono",monospace; font-size:.82rem; font-weight:600}
.btn-row{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1rem}
.btn{
  font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border:1.5px solid var(--bar); padding:.55rem .95rem; background:var(--paper);
  box-shadow:2px 2px 0 rgba(28,26,22,.85); display:inline-block;
}
.btn:hover{background:var(--tan)}
.btn.primary{background:var(--stamp); color:var(--paper); border-color:var(--stamp)}
.btn.primary:hover{background:#8F1D17}

/* ---------- bundles + footer ---------- */
.bundles{max-width:1200px; margin:0 auto 3rem; padding:0 1.2rem; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.bundle{border:1.5px solid var(--bar); background:var(--paper); padding:1rem 1.1rem; box-shadow:3px 3px 0 rgba(28,26,22,.85)}
.bundle h3{font-family:"IBM Plex Mono",monospace; margin:.1rem 0 .5rem; font-size:.95rem}
.bundle p{font-size:.84rem; color:#3A362C; margin:0 0 .8rem}
footer.site{border-top:3px solid var(--bar); background:var(--paper); margin-top:2rem}
footer.site .inner{max-width:1200px; margin:0 auto; padding:1.6rem 1.2rem; display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:space-between; font-size:.8rem; color:var(--faded)}
footer.site a{color:var(--ink)}
.prose{max-width:760px; margin:0 auto; padding:2.5rem 1.2rem 4rem}
.prose h1{font-family:"IBM Plex Mono",monospace; font-size:1.8rem}
.prose h2{font-family:"IBM Plex Mono",monospace; font-size:1.15rem; margin-top:2rem}

@media (max-width:860px){
  .controls{grid-template-columns:1fr 1fr}
  .controls .search{grid-column:1/-1}
  .stamp{position:static; display:inline-block; margin-bottom:1rem; transform:rotate(-2deg)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------- ad slots ---------- */
.ad-slot{max-width:1200px; margin:2.2rem auto; padding:0 1.2rem}
.ad-slot .ad-label{font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--faded); margin-bottom:.3rem; text-align:center}
.ad-slot .ad-box{border:1.5px dashed var(--line); background:var(--paper); min-height:90px; display:grid; place-items:center; color:var(--faded); font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.14em}