/* ============================================================
   THE ARCHIVE — an institution that is losing.
   Decay states, sealed vault, strata, specimens, intrusion.
   ============================================================ */

.arch-intro{
  max-width:62ch;
  margin:0 0 clamp(40px,7vh,80px);
}
.arch-kicker{
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--feedback-blue);
  margin:0 0 14px;
}
.arch-title{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,7vw,6rem);
  line-height:.9; text-transform:uppercase;
  margin:0 0 18px;
}
.arch-lede{
  font-family:var(--font-editorial);
  font-style:italic;
  font-size:clamp(1rem,1.8vw,1.4rem);
  line-height:1.5;
  opacity:.78;
  margin:0;
}
.arch-section-head{
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone); opacity:.42;
  margin:clamp(48px,9vh,100px) 0 22px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(232,221,200,.12);
}

/* ---------- 1. DOMAIN PLATES (decay as layout) ---------- */
.plates{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(12px,1.6vw,22px);
}
.plate{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(232,221,200,.10);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:clamp(200px,30vh,320px);
  padding:clamp(14px,1.6vw,22px);
  background:#0b0b0e;
}
/* the carved surface — decayed per plate */
.plate__stone{
  position:absolute; inset:0;
  background:url("../assets/glyph-wall.jpg") center/cover no-repeat;
  z-index:0;
}
.plate__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(16,16,20,.30) 0%,
    rgba(16,16,20,.62) 50%,
    rgba(16,16,20,.95) 100%);
}
.plate__body{
  position:relative; z-index:2;
}

/* --- decay states: the plate decays, the text never does --- */
/* Tears of Oshun — deeply eroded */
.plate--eroded .plate__stone{
  filter:blur(2.4px) contrast(.62) brightness(.5) saturate(.5);
  opacity:.5;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 92%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 92%);
}
/* Breath of Shu — crisp, freshly cut */
.plate--fresh .plate__stone{
  filter:contrast(1.16) brightness(.86) saturate(.9);
  opacity:1;
}
/* Bones of Geb — half worn, chipped */
.plate--worn .plate__stone{
  filter:blur(1px) contrast(.86) brightness(.68) saturate(.7);
  opacity:.78;
  mask-image:linear-gradient(115deg, #000 0 46%, rgba(0,0,0,.28) 72%, transparent 88%);
  -webkit-mask-image:linear-gradient(115deg, #000 0 46%, rgba(0,0,0,.28) 72%, transparent 88%);
}
/* Flame of Sekhmet — sharp, recent */
.plate--sharp .plate__stone{
  filter:contrast(1.08) brightness(.8) saturate(1);
  opacity:.95;
}
/* Spear of Shango — nearly gone */
.plate--gone .plate__stone{
  filter:blur(3.2px) contrast(.5) brightness(.42) saturate(.35);
  opacity:.34;
  mask-image:radial-gradient(ellipse 60% 45% at 30% 35%, #000 20%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 60% 45% at 30% 35%, #000 20%, transparent 70%);
}

.plate__meta{
  font-family:var(--font-mono);
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone); opacity:.55;
  margin:0 0 8px;
  display:flex; justify-content:space-between; gap:10px;
}
.plate__cond{color:var(--jade);}
.plate--eroded .plate__cond{color:var(--oxide-red);}
.plate--gone   .plate__cond{color:var(--oxide-red);}
.plate--worn   .plate__cond{color:#C99A4A;}

.plate__name{
  font-family:var(--font-display);
  font-size:clamp(1.1rem,2.1vw,1.9rem);
  line-height:1; text-transform:uppercase;
  margin:0 0 8px;
}
.plate__desc{
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(.8rem,.95vw,.9rem);
  line-height:1.55;
  opacity:.8;
  margin:0;
}
/* uneven spans — not a uniform grid */
.plate:nth-child(1){grid-column:span 3;}
.plate:nth-child(2){grid-column:span 3;}
.plate:nth-child(3){grid-column:span 2;}
.plate:nth-child(4){grid-column:span 2;}
.plate:nth-child(5){grid-column:span 2;}

/* ---------- 2. SEALED VAULT (three hidden domains) ---------- */
.vault{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(232,221,200,.14);
  background:#0b0b0e;
  padding:clamp(26px,4vw,54px);
}
.vault__stone{
  position:absolute; inset:0;
  background:url("../assets/glyph-wall.jpg") center/cover no-repeat;
  filter:contrast(.7) brightness(.34) saturate(.4);
  z-index:0;
}
/* bronze band across the vault */
.vault__band{
  position:absolute;
  left:0; right:0; top:50%;
  height:3px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,
    rgba(184,149,106,.15), rgba(184,149,106,.75), rgba(184,149,106,.15));
  z-index:2;
  pointer-events:none;
}
.vault__inner{
  position:relative; z-index:3;
}
.vault__eyebrow{
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--oxide-red);
  margin:0 0 14px;
}
.vault__title{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,3.4vw,2.6rem);
  text-transform:uppercase;
  line-height:1;
  margin:0 0 12px;
}
.vault__sub{
  font-family:var(--font-editorial);
  font-style:italic;
  font-size:clamp(.95rem,1.4vw,1.15rem);
  opacity:.7;
  margin:0 0 26px;
}
/* three struck seals */
.seals{
  display:flex; flex-wrap:wrap; gap:14px;
  margin:0 0 24px; padding:0; list-style:none;
}
.seal{
  flex:1 1 190px;
  border:1px solid rgba(232,221,200,.16);
  padding:16px 18px;
  position:relative;
  /* withheld by default */
  opacity:.38;
  filter:blur(1.4px);
  transition:opacity .4s var(--ease-micro), filter .4s var(--ease-micro);
  background:rgba(16,16,20,.55);
}
.seal__name{
  font-family:var(--font-display);
  font-size:1.05rem; text-transform:uppercase;
  margin:0 0 6px;
  display:block;
}
.seal__desc{
  font-family:var(--font-body);
  font-weight:300; font-size:.82rem; line-height:1.5;
  opacity:.82; margin:0;
}
/* partial lift on hover AND keyboard focus — never full, never opens */
.vault:hover .seal,
.vault:focus-within .seal{
  opacity:.72;
  filter:blur(.3px);
}
.seal::after{
  content:'';
  position:absolute; inset:0;
  background:rgba(16,16,20,.42);
  pointer-events:none;
  transition:background .4s var(--ease-micro);
}
.vault:hover .seal::after,
.vault:focus-within .seal::after{background:rgba(16,16,20,.16);}

.vault__lock{
  font-family:var(--font-mono);
  font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--oxide-red);
  border:1px solid var(--oxide-red);
  padding:5px 10px;
  display:inline-block;
}

/* ---------- 3. STRATA (five ages, stacked not sequential) ---------- */
.strata{
  position:relative;
  border:1px solid rgba(232,221,200,.12);
  overflow:hidden;
}
.stratum{
  position:relative;
  padding:clamp(16px,2.4vw,26px) clamp(18px,2.6vw,30px);
  border-bottom:1px solid rgba(232,221,200,.08);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px;
}
.stratum:last-child{border-bottom:none;}
/* irregular layer edges, not ruled */
.stratum::before{
  content:'';
  position:absolute; left:0; right:0; top:0;
  height:2px;
  background:rgba(232,221,200,.14);
  clip-path:polygon(0 0,8% 100%,19% 0,31% 100%,44% 0,58% 100%,71% 0,84% 100%,96% 0,100% 100%,100% 0);
}
.stratum__age{
  font-family:var(--font-display);
  font-size:clamp(1rem,1.9vw,1.5rem);
  text-transform:uppercase;
  min-width:170px;
  margin:0;
}
.stratum__no{
  font-family:var(--font-mono);
  font-size:9px; letter-spacing:.2em;
  opacity:.4;
}
.stratum__desc{
  font-family:var(--font-body);
  font-weight:300; font-size:.86rem; line-height:1.5;
  opacity:.72; margin:0; flex:1 1 260px;
}
/* each layer keeps the colour of what it rests on */
.stratum:nth-child(1){background:rgba(60,48,43,.42);}
.stratum:nth-child(2){background:rgba(60,48,43,.32);}
.stratum:nth-child(3){background:rgba(47,167,214,.07);}
.stratum:nth-child(4){background:rgba(47,167,214,.12);}
.stratum:nth-child(5){background:rgba(125,78,216,.14);}
/* where the city is now */
.strata__now{
  position:absolute;
  right:0; top:0; bottom:0;
  width:2px;
  background:var(--feedback-blue);
  z-index:2;
}
.strata__now span{
  position:absolute;
  top:12px; right:10px;
  font-family:var(--font-mono);
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--feedback-blue);
  white-space:nowrap;
}
.strata__note{
  font-family:var(--font-mono);
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  opacity:.4; margin:12px 0 0;
}

/* ---------- 4. SPECIMEN FILES (AI tiers) ---------- */
.specimens{display:grid;gap:16px;}
.specimen{
  border:1px solid rgba(232,221,200,.12);
  padding:clamp(16px,2vw,24px);
  background:#0b0b0e;
}
.specimen__head{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px;
  font-family:var(--font-mono);
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  opacity:.55;
  padding-bottom:10px; margin-bottom:12px;
  border-bottom:1px solid rgba(232,221,200,.10);
}
.specimen__name{
  font-family:var(--font-display);
  font-size:clamp(1.1rem,2.2vw,1.7rem);
  text-transform:uppercase; margin:0 0 8px;
}
.specimen__desc{
  font-family:var(--font-body);
  font-weight:300; font-size:.88rem; line-height:1.55;
  opacity:.78; margin:0 0 14px; max-width:64ch;
}
.specimen__status{
  font-family:var(--font-mono);
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  opacity:.62;
  display:inline-block;
  border:1px solid rgba(232,221,200,.2);
  padding:4px 9px;
}
.specimen--prohibited{border-color:rgba(157,46,46,.5);}
.specimen--prohibited .specimen__status{
  color:var(--oxide-red); border-color:var(--oxide-red); opacity:1;
}
/* visible redaction */
.redact{
  background:var(--amp-black);
  color:transparent;
  border-bottom:2px solid var(--oxide-red);
  padding:0 4px;
  user-select:none;
  white-space:nowrap;
}
.redact--long{display:inline-block;min-width:180px;}

/* ---------- 5. MA'AT GROUND + ISFET INTRUSION ---------- */
.ground{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(232,221,200,.12);
  padding:clamp(28px,5vw,64px) clamp(22px,4vw,56px);
  background:#0b0b0e;
}
.ground__stone{
  position:absolute; inset:0;
  background:url("../assets/glyph-wall.jpg") center/cover no-repeat;
  filter:contrast(.8) brightness(.3) saturate(.35);
  opacity:.55;
  z-index:0;
}
.ground__inner{position:relative; z-index:2; max-width:64ch;}
.ground__title{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,4vw,3.2rem);
  text-transform:uppercase; line-height:.95;
  margin:0 0 14px;
}
.ground__desc{
  font-family:var(--font-body);
  font-weight:300; font-size:clamp(.86rem,1.05vw,.98rem);
  line-height:1.6; opacity:.8; margin:0 0 22px;
}
.ground__quote{
  font-family:var(--font-editorial);
  font-style:italic;
  font-size:clamp(1rem,1.7vw,1.3rem);
  line-height:1.5;
  opacity:.85;
  margin:0;
  padding-left:16px;
  border-left:2px solid var(--feedback-blue);
}
/* the parasite gets a margin, never half the page */
.isfet{
  position:absolute;
  top:0; bottom:0; right:0;
  width:clamp(64px,11vw,150px);
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(270deg, rgba(157,46,46,.42), rgba(157,46,46,.12) 55%, transparent);
  clip-path:polygon(100% 0,100% 100%,62% 100%,78% 84%,54% 70%,74% 56%,52% 42%,72% 28%,56% 14%,70% 0);
}
.isfet__tag{
  position:absolute;
  bottom:14px; right:10px;
  font-family:var(--font-mono);
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--oxide-red);
  writing-mode:vertical-rl;
}

/* ---------- 6. LEDGER READOUT ---------- */
.ledger{
  border:1px solid rgba(232,221,200,.12);
  padding:clamp(20px,3vw,34px);
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
}
.ledger dl{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px 20px;
  margin:0;
}
.ledger dt{opacity:.5;}
.ledger dd{
  margin:0; text-align:right;
  color:var(--oxide-red);
  opacity:.85;
}
.ledger__note{
  margin:18px 0 0;
  padding-top:14px;
  border-top:1px solid rgba(232,221,200,.10);
  opacity:.4;
  font-size:9px;
}

/* ---------- FOCUS ---------- */
a:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--feedback-blue);
  outline-offset:3px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .plate:nth-child(n){grid-column:span 3;}
}
@media (max-width:620px){
  .plates{grid-template-columns:1fr;}
  .plate:nth-child(n){grid-column:span 1;}
  .stratum__age{min-width:100%;}
  .ledger dl{grid-template-columns:1fr;}
  .ledger dd{text-align:left;}
  .isfet{width:52px;}
}

/* ---------- TOUCH: sealed vault must still be readable ---------- */
@media (hover:none){
  .seal{opacity:.66;filter:blur(.4px);}
  .seal::after{background:rgba(16,16,20,.20);}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .seal{transition:none;opacity:.66;filter:blur(.4px);}
  .seal::after{background:rgba(16,16,20,.20);}
  .vault:hover .seal,
  .vault:focus-within .seal{opacity:.66;filter:blur(.4px);}
}