.la-archive-shell {
  width: min(100% - 2rem, 980px);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(3.8rem, 8vh, 6.5rem) 0 3rem;
}

.la-archive-head {
  margin-bottom: 1.15rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid rgba(39, 202, 238, .38);
  border-radius: 8px;
  background: rgba(2, 12, 16, .84);
  box-shadow: inset 0 0 30px rgba(25, 200, 255, .025);
  backdrop-filter: blur(7px);
}

.la-archive-head p {
  margin: 0;
  color: #93a2aa;
  font: 500 .74rem/1.55 'JetBrains Mono', monospace;
}

.la-archive-head .la-archive-command {
  margin-bottom: .55rem;
  color: #d8e4e9;
  font-size: clamp(.88rem, 2.3vw, 1.04rem);
}

.la-archive-head .la-archive-command strong {
  color: var(--la-cyan);
  font-weight: 600;
}

.la-archive-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1rem;
}

.la-archive-nav a,
.la-archive-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: .48rem .7rem;
  border: 1px solid rgba(39, 202, 238, .32);
  border-radius: 5px;
  background: rgba(0, 18, 24, .62);
  color: #9edff0;
  font: 600 .68rem/1 'JetBrains Mono', monospace;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.la-archive-nav a:hover,
.la-archive-nav a:focus-visible,
.la-archive-action:hover,
.la-archive-action:focus-visible {
  border-color: var(--la-cyan);
  background: rgba(0, 180, 255, .09);
  color: #effcff;
  outline: none;
}

/* Graphics archive */
.la-graphics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.la-graphic-card {
  overflow: hidden;
  border: 1px solid rgba(39, 202, 238, .28);
  border-radius: 8px;
  background: rgba(2, 11, 15, .9);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}

.la-graphic-card.la-wide {
  grid-column: 1 / -1;
}

.la-graphic-preview {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #020608;
}

.la-graphic-card.la-cover .la-graphic-preview {
  aspect-ratio: 4 / 5;
  object-fit: contain;
  padding: 1rem;
}

.la-graphic-meta {
  padding: 1rem 1.05rem 1.1rem;
}

.la-graphic-meta h2 {
  margin: 0 0 .45rem;
  color: #dff8ff;
  font: 600 .86rem/1.35 'JetBrains Mono', monospace;
}

.la-graphic-meta p {
  margin: 0 0 .85rem;
  color: #8f9ba3;
  font: 400 .71rem/1.55 'JetBrains Mono', monospace;
}

.la-graphic-card.la-spoiler-only {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
}

.la-spoiler-only .la-graphic-meta {
  width: min(100%, 34rem);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  text-align: center;
}

.la-spoiler-tag {
  display: inline-block;
  margin-left: .35rem;
  color: #d0a56b;
  font-size: .72em;
  letter-spacing: .04em;
}

/* Personnel archive: deliberately warmer, like paper folders on a desk. */
.la-personnel-desk {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 1.6rem);
  border: 1px solid rgba(98, 69, 41, .72);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 14%, rgba(0,0,0,.08) 45%, transparent 71%),
    linear-gradient(180deg, #2f2117 0%, #22170f 100%);
  box-shadow: 0 25px 70px rgba(0,0,0,.43), inset 0 0 35px rgba(0,0,0,.26);
}

.la-personnel-desk::after {
  content: "ARCHIVE DESK · PERSONNEL FILES";
  position: absolute;
  right: .8rem;
  bottom: .55rem;
  color: rgba(227, 195, 135, .16);
  font: 700 .62rem/1 'JetBrains Mono', monospace;
  letter-spacing: .13em;
  pointer-events: none;
}

.la-folder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  align-items: start;
}

.personnel-folder {
  position: relative;
  min-width: 0;
  border: 0;
}

/* An opened folder becomes the full-width case file. */
.personnel-folder[open] {
  grid-column: 1 / -1;
  z-index: 2;
}

.personnel-folder > summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  min-height: 112px;
  padding: 1.15rem 1rem .9rem;
  border: 1px solid rgba(120, 92, 49, .86);
  border-radius: 4px 7px 7px 7px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 32%),
    #c7a66b;
  box-shadow: 0 7px 16px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.08);
  color: #21170f;
  font-family: 'JetBrains Mono', monospace;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.personnel-folder > summary::-webkit-details-marker {
  display: none;
}

.personnel-folder > summary::before {
  content: "";
  position: absolute;
  left: -.5px;
  top: -11px;
  width: 42%;
  height: 12px;
  border: 1px solid rgba(120, 92, 49, .86);
  border-bottom: 0;
  border-radius: 5px 8px 0 0;
  background: #b79358;
}

.personnel-folder > summary:hover,
.personnel-folder > summary:focus-visible {
  transform: translateY(-2px) rotate(-.15deg);
  filter: brightness(1.04);
  box-shadow: 0 10px 21px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1);
  outline: none;
}

.personnel-folder[open] > summary {
  min-height: 96px;
  border-radius: 4px 7px 0 0;
  box-shadow: 0 5px 13px rgba(0,0,0,.2);
}

.personnel-file-no {
  display: block;
  margin-bottom: .75rem;
  color: rgba(48, 32, 20, .67);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.personnel-name {
  display: block;
  font-size: clamp(.82rem, 2.1vw, .98rem);
  font-weight: 800;
  letter-spacing: .015em;
}

.personnel-role {
  display: block;
  margin-top: .38rem;
  color: rgba(48, 32, 20, .72);
  font-size: .63rem;
  line-height: 1.35;
}

.personnel-record {
  margin: 0;
  padding: .95rem 1rem 1.1rem;
  border: 1px solid rgba(120, 92, 49, .72);
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background: #e4d4af;
  color: #33261c;
  box-shadow: inset 0 8px 14px rgba(80, 57, 31, .08);
  font: 500 .68rem/1.55 'JetBrains Mono', monospace;
}

/* Optional full-bleed portrait block for completed records.
   Insert .personnel-record-media as the first child of .personnel-record. */
.personnel-record-media {
  position: relative;
  overflow: hidden;
  height: clamp(390px, 62vw, 720px);
  margin: -.95rem -1rem 1.1rem;
  background: #17120e;
  border-bottom: 1px solid rgba(120, 92, 49, .58);
}

.personnel-record-media img,
.personnel-record-media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.personnel-record-media img {
  object-fit: cover;
  object-position: center 34%;
}

/* Grissom & Byte share one file but keep their own portraits. */
.personnel-record-media--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: clamp(390px, 50vw, 650px);
}

.personnel-record-media--pair img {
  min-width: 0;
  object-position: center 42%;
}

.personnel-record-media--pair img + img {
  border-left: 1px solid rgba(228, 212, 175, .38);
}

.personnel-record-body {
  width: min(100%, 52rem);
  margin: 0 auto;
  padding: .15rem clamp(.1rem, 1vw, .45rem) .25rem;
}

.personnel-record-kicker {
  margin: 0 0 .45rem;
  color: #89683c;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.personnel-record h2 {
  margin: 0 0 .7rem;
  color: #302116;
  font: 800 clamp(1rem, 2.6vw, 1.35rem)/1.25 'JetBrains Mono', monospace;
}

.personnel-record strong {
  color: #664823;
}

.personnel-record .record-pending {
  margin: .7rem 0 0;
  padding-top: .65rem;
  border-top: 1px dashed rgba(74, 54, 31, .34);
  color: #725f47;
  font-size: .64rem;
}

.la-personnel-note {
  margin: .9rem 0 0;
  color: #8d989f;
  font: 500 .67rem/1.55 'JetBrains Mono', monospace;
}

@media (max-width: 700px) {
  .la-archive-shell {
    width: min(100% - 1rem, 680px);
    padding-top: 2.8rem;
  }

  .la-graphics-grid,
  .la-folder-grid {
    grid-template-columns: 1fr;
  }

  .la-graphic-card.la-wide,
  .personnel-folder[open] {
    grid-column: auto;
  }

  .personnel-record-media {
    height: clamp(360px, 115vw, 620px);
  }

  .personnel-record-media--pair {
    grid-template-columns: 1fr;
    height: auto;
  }

  .personnel-record-media--pair img {
    height: clamp(330px, 105vw, 560px);
  }

  .personnel-record-media--pair img + img {
    border-left: 0;
    border-top: 1px solid rgba(228, 212, 175, .38);
  }
}

@media (max-width: 440px) {
  .la-archive-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .la-archive-nav a {
    text-align: center;
  }

  .personnel-folder > summary {
    min-height: 104px;
  }

  .personnel-folder[open] > summary {
    min-height: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .la-archive-nav a,
  .la-archive-action,
  .personnel-folder > summary {
    transition: none;
  }
}

/* Preserve each single-person portrait's original composition.
   The dossier still fills the full width, but no head/shoulder crop is forced. */
.personnel-record-media:not(.personnel-record-media--pair) {
  height: auto;
  overflow: visible;
}

.personnel-record-media:not(.personnel-record-media--pair) img {
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* Personnel archive spoiler warning: replace the generic helper text and hide navigation. */
.la-archive-shell:has(.la-personnel-desk) .la-archive-nav {
  display: none;
}

.la-archive-shell:has(.la-personnel-desk) .la-archive-head > p:not(.la-archive-command) {
  max-width: 46rem;
  margin: .95rem auto 0;
  padding: .9rem 1rem;
  border: 1px solid rgba(255, 82, 82, .58);
  border-radius: 6px;
  background: rgba(112, 0, 0, .22);
  box-shadow: inset 0 0 22px rgba(255, 48, 48, .035), 0 0 22px rgba(150, 0, 0, .08);
  font-size: 0;
  line-height: 1.55;
  text-align: center;
}

.la-archive-shell:has(.la-personnel-desk) .la-archive-head > p:not(.la-archive-command)::before {
  content: "SPOILER ALERT";
  display: block;
  margin-bottom: .45rem;
  color: #ff5e5e;
  font: 800 clamp(.9rem, 2.3vw, 1.05rem)/1.2 'JetBrains Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.la-archive-shell:has(.la-personnel-desk) .la-archive-head > p:not(.la-archive-command)::after {
  content: "Recovered personnel records may contain major story spoilers. For the best experience, read the book first and return to this archive afterward.";
  display: block;
  color: #ffb9b9;
  font: italic 500 .74rem/1.6 'JetBrains Mono', monospace;
}

/* Personnel archive header: keep the prompt, replace the command label with a real home link. */
.la-archive-shell:has(.la-personnel-desk) .la-archive-head {
  position: relative;
}

.la-archive-shell:has(.la-personnel-desk) .la-archive-command {
  padding-right: 8.5rem;
  font-size: 0;
}

.la-archive-shell:has(.la-personnel-desk) .la-archive-command strong {
  font-size: clamp(.88rem, 2.3vw, 1.04rem);
}

.la-archive-shell:has(.la-personnel-desk) .la-archive-nav {
  position: absolute;
  top: .95rem;
  right: 1.35rem;
  display: flex;
  margin: 0;
}

.la-archive-shell:has(.la-personnel-desk) .la-archive-nav a:not(:last-child) {
  display: none;
}

.la-archive-shell:has(.la-personnel-desk) .la-archive-nav a:last-child {
  font-size: 0;
}

.la-archive-shell:has(.la-personnel-desk) .la-archive-nav a:last-child::before {
  content: "← back home";
  font: 600 .68rem/1 'JetBrains Mono', monospace;
}

@media (max-width: 700px) {
  .la-archive-shell:has(.la-personnel-desk) .la-archive-command {
    padding-right: 0;
    text-align: center;
  }

  .la-archive-shell:has(.la-personnel-desk) .la-archive-nav {
    position: static;
    justify-content: center;
    margin: .7rem 0 0;
  }
}