/* The Jelia Agency — Field Missions Division
   Materials: struck brass, oxblood stamp ink, aged verdigris, on ink-black.
   Type: Marcellus for the agency's own voice, Source Serif for prose,
   Plex Mono for anything the Agency assigns you — codes, coordinates, times. */

:root{
  --ink:        #0d1014;
  --ink-2:      #141a20;
  --ink-3:      #1c242d;
  --brass:      #c6a15b;
  --brass-hi:   #e9d09c;
  --brass-lo:   #8a6b34;
  --parchment:  #ece2cb;
  --parch-dim:  #a2977f;
  --oxblood:    #8a4234;
  --oxblood-hi: #b06a56;
  --verdigris:  #4e8f7d;
  --rule:       rgba(198,161,91,.24);
  --gap:        clamp(18px, 4vw, 30px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:
    radial-gradient(1100px 520px at 50% -240px, #182029 0%, var(--ink) 62%),
    var(--ink);
  color:var(--parchment);
  font-family:"Source Serif 4",Georgia,serif;
  font-weight:340;
  line-height:1.65;
  min-height:100vh;
  overflow-x:hidden;
}
/* the faint tooth of file paper */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(236,226,203,.055) 1px, transparent 1px);
  background-size:3px 3px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 70%);
}
.wrap{width:min(940px, calc(100% - 40px));margin:0 auto;position:relative;z-index:1}

a{color:var(--brass);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}

/* seal styling lives at the foot of this file, with the artwork rules */

/* ── masthead ─────────────────────────────────────── */
.masthead{padding:56px 0 34px;text-align:center;display:grid;justify-items:center;gap:18px}
.masthead .agency{
  font-family:"Marcellus",serif;
  font-size:clamp(30px,6.2vw,50px);
  letter-spacing:.12em;color:var(--brass-hi);line-height:1.05;
  text-shadow:0 1px 0 rgba(0,0,0,.7);
}
.masthead .division{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.44em;
  text-transform:uppercase;color:var(--brass);
}
.masthead .file-no{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;
  color:var(--parch-dim);
}

/* ── the classification band: the page's one loud voice ── */
.band{
  margin:26px 0 40px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:14px 0;display:flex;gap:18px;align-items:center;justify-content:center;
  flex-wrap:wrap;text-align:center;
}
.stamp{
  font-family:"IBM Plex Mono",monospace;font-weight:500;
  font-size:clamp(13px,2.6vw,17px);letter-spacing:.3em;text-transform:uppercase;
  color:var(--oxblood-hi);border:2px solid rgba(138,66,52,.75);
  padding:7px 16px;transform:rotate(-1.6deg);
  box-shadow:inset 0 0 22px rgba(138,66,52,.16);
}
.band .note{font-size:14px;color:var(--parch-dim);font-style:italic;max-width:44ch}

/* ── prose ────────────────────────────────────────── */
.lede{
  max-width:62ch;margin:0 auto;text-align:center;
  font-size:clamp(16.5px,2.1vw,19px);color:var(--parchment);
}
.lede + .lede{margin-top:16px}
.sec{margin:clamp(46px,8vw,78px) 0}
.sec-h{
  display:flex;align-items:baseline;gap:14px;margin-bottom:22px;
  border-bottom:1px solid var(--rule);padding-bottom:10px;
}
.sec-h h2{
  font-family:"Marcellus",serif;font-weight:400;
  font-size:clamp(19px,3vw,25px);letter-spacing:.06em;color:var(--brass-hi);
}
.sec-h .tag{
  margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--parch-dim);white-space:nowrap;
}

/* ── dossier cards ────────────────────────────────── */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.grid-3{grid-template-columns:1fr}}

.card{
  position:relative;background:linear-gradient(168deg, rgba(236,226,203,.045), rgba(0,0,0,.2));
  border:1px solid var(--rule);padding:22px 22px 20px;
}
/* corner ticks: a file card, not a rounded app tile */
.card::before,.card::after{
  content:"";position:absolute;width:10px;height:10px;border:1px solid var(--brass-lo);
}
.card::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.card::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.card h3{
  font-family:"Marcellus",serif;font-weight:400;font-size:17px;
  letter-spacing:.04em;color:var(--brass-hi);margin-bottom:8px;
}
.card p{font-size:15px;color:var(--parch-dim)}
.card .step{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.24em;
  color:var(--brass);text-transform:uppercase;display:block;margin-bottom:10px;
}

/* ── data rows ────────────────────────────────────── */
.rows{border:1px solid var(--rule)}
.row{
  display:grid;grid-template-columns:170px 1fr;gap:14px;
  padding:13px 18px;border-bottom:1px solid rgba(198,161,91,.12);
}
.row:last-child{border-bottom:0}
.row dt,.row .k{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);padding-top:3px;
}
.row dd,.row .v{font-size:15.5px;color:var(--parchment)}
.row .v .mono{font-family:"IBM Plex Mono",monospace;font-size:14.5px}
@media(max-width:560px){.row{grid-template-columns:1fr;gap:3px}}

/* ── forms ────────────────────────────────────────── */
.form{max-width:460px;margin:0 auto}
.field{margin-bottom:17px}
.field label{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--brass);margin-bottom:7px;
}
.field input{
  width:100%;padding:13px 15px;background:rgba(0,0,0,.34);
  border:1px solid var(--brass-lo);color:var(--parchment);
  font-family:"IBM Plex Mono",monospace;font-size:16px;border-radius:0;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field input:focus{
  outline:none;border-color:var(--brass-hi);
  box-shadow:0 0 0 1px rgba(233,208,156,.32), inset 0 0 20px rgba(198,161,91,.07);
}
.field input::placeholder{color:rgba(162,151,127,.45)}
.field .hint{font-size:13px;color:var(--parch-dim);margin-top:6px;font-style:italic}

.btn{
  display:inline-block;width:100%;text-align:center;cursor:pointer;
  padding:14px 20px;border:1px solid var(--brass);
  background:linear-gradient(176deg, rgba(233,208,156,.20), rgba(198,161,91,.06));
  color:var(--brass-hi);font-family:"Marcellus",serif;font-size:15px;
  letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;text-decoration:none;
  transition:background .22s ease, box-shadow .22s ease, color .22s ease;
}
.btn:hover{
  background:linear-gradient(176deg, rgba(255,240,205,.30), rgba(198,161,91,.14));
  box-shadow:0 0 26px -8px rgba(198,161,91,.6);color:#fff4d6;
}
.btn-quiet{
  background:transparent;border-color:var(--brass-lo);color:var(--brass);
}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.btn-row .btn{width:auto;min-width:210px}

.msg{
  border-left:3px solid var(--oxblood);background:rgba(138,66,52,.12);
  padding:12px 15px;margin-bottom:18px;font-size:14.5px;color:var(--oxblood-hi);
}
.msg-ok{border-left-color:var(--verdigris);background:rgba(78,143,125,.12);color:#8fd3c0}

/* ── mission list ─────────────────────────────────── */
.msn{
  border:1px solid var(--rule);padding:20px 22px;margin-bottom:14px;
  background:linear-gradient(168deg, rgba(236,226,203,.04), rgba(0,0,0,.18));
  display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:start;
}
.msn .code{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.22em;
  color:var(--brass);text-transform:uppercase;
}
.msn h3{
  font-family:"Marcellus",serif;font-weight:400;font-size:19px;
  letter-spacing:.05em;color:var(--brass-hi);margin:4px 0 8px;
}
.msn .brief{font-size:15px;color:var(--parch-dim);grid-column:1/-1;max-width:70ch}
.msn .meta{
  grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;
}
.chip{border:1px solid var(--brass-lo);color:var(--brass);padding:4px 9px}
.chip-pts{border-color:rgba(233,208,156,.5);color:var(--brass-hi)}
.chip-sev{border-color:rgba(138,66,52,.6);color:var(--oxblood-hi)}
.chip-ok{border-color:rgba(78,143,125,.6);color:#8fd3c0}
.msn .points{
  font-family:"Marcellus",serif;font-size:30px;color:var(--brass-hi);line-height:1;
  text-align:right;white-space:nowrap;
}
.msn .points small{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:9px;
  letter-spacing:.22em;color:var(--parch-dim);margin-top:4px;
}
@media(max-width:560px){
  .msn{grid-template-columns:1fr}
  .msn .points{text-align:left}
}

/* ── operative record ─────────────────────────────── */
.record{
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
  border:1px solid var(--rule);padding:22px;
  background:linear-gradient(168deg, rgba(236,226,203,.05), rgba(0,0,0,.2));
}
.record .codename{
  font-family:"Marcellus",serif;font-size:clamp(22px,4vw,30px);
  letter-spacing:.1em;color:var(--brass-hi);line-height:1.15;
}
.record .idline{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;
  color:var(--brass);margin-top:6px;text-transform:uppercase;
}
.record .stats{display:flex;gap:22px;margin-top:14px;flex-wrap:wrap}
.record .stat b{
  display:block;font-family:"Marcellus",serif;font-size:24px;color:var(--parchment);
  font-weight:400;line-height:1;
}
.record .stat span{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--parch-dim);
}
@media(max-width:620px){.record{grid-template-columns:1fr;justify-items:center;text-align:center}}

/* ── nav + footer ─────────────────────────────────── */
.topnav{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  padding:16px 0;border-bottom:1px solid var(--rule);
}
.topnav a{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--parch-dim);text-decoration:none;
  padding:6px 11px;border:1px solid transparent;
}
.topnav a:hover,.topnav a[aria-current]{color:var(--brass-hi);border-color:var(--rule)}

footer{
  margin-top:clamp(60px,10vw,110px);padding:34px 0 54px;
  border-top:1px solid var(--rule);text-align:center;
  display:grid;justify-items:center;gap:14px;
}
footer .colophon{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--parch-dim);line-height:2.1;
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* the seal is artwork now, not an inline drawing */
.seal{
  display:block;border-radius:6px;
  box-shadow:0 14px 40px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(198,161,91,.18);
  max-width:100%;height:auto;
}
.masthead .seal{border-radius:8px}
footer .seal{opacity:.85}

/* "or with an Agency password" divider on the sign-in page */
.or-rule{
  display:flex;align-items:center;gap:14px;margin:22px 0 4px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--parch-dim);
}
.or-rule::before,.or-rule::after{content:"";flex:1;height:1px;background:var(--rule)}