/* Archive and members pages. Loaded after site.css on
   /archive, /en/archive, /members, /en/members. */

/* ---- the record: a ledger, not a card grid (§12) ---- */
.rec { border-top: 1px solid var(--rule); padding: var(--s-7) 0; }
.rec-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
}
.rec-year {
  font-family: var(--util); font-size: 0.75rem; letter-spacing: 0.16em;
  color: var(--accent); width: 5rem; flex: none; font-variant-numeric: tabular-nums;
  margin: 0;
}
/* the subtitle ("2단 로켓", "핀 제어 로켓") is what the vehicle IS, so it sits
   directly under the name at reading size, above the competition line */
.rec-sub {
  font-size: 1.0625rem; font-weight: 500; color: var(--ink);
  margin: 0 0 var(--s-2);
}
.rec-meta {
  font-family: var(--util); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s-5);
}
.rec-body { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  /* year · text and figures · images */
  .rec-body { grid-template-columns: 5rem minmax(0, 1fr) 420px; align-items: start; gap: var(--s-8); }
}

/* an author's line breaks are kept; e-mail addresses become links in records.js */
.rec-summary, .role-remit { white-space: pre-line; }

/* figures sit under the text as a plain wrapping run, not a boxed table */
.rec-specs {
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-7);
  margin: var(--s-5) 0 0; padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.rec-spec { margin: 0; }
.rec-spec dt {
  font-family: var(--util); font-size: 0.75rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s-1);
}
.rec-spec dd {
  margin: 0; font-family: var(--util); font-size: 1.0625rem; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
/* opacity dimmed placeholder rows to 2.4:1 in the light theme. Mark them
   with a rule and muted heading instead, which stays readable. */
.is-placeholder .rec-name, .is-placeholder .rec-year { color: var(--ink-3); }
.is-placeholder { border-left: 2px solid var(--rule); padding-left: var(--s-5); }

/* ---- members ---- */
.role {
  display: grid; gap: var(--s-2) var(--s-6); grid-template-columns: 1fr;
  padding: var(--s-5) 0; border-top: 1px solid var(--rule);
}
@media (min-width: 760px) { .role { grid-template-columns: 16rem minmax(0, 1fr); } }
.role:last-child { border-bottom: 1px solid var(--rule); }
.role-title { font-family: var(--util); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0; }
.role-holder { color: var(--ink); font-size: 1.125rem; margin: var(--s-1) 0 0; }
.role-remit { color: var(--ink-2); margin: 0; max-width: 68ch; }

/* per-vehicle images: their own column on the right, captioned (§10).

   Nothing is cropped. Every photo keeps its own proportions and only its
   HEIGHT is capped, so a landscape frame fills the column and a portrait
   frame stands narrower beside the text, the way the home page already sets
   the HARANG 2 video. Half the team's photos are portrait; the old 4:3 box
   took the nose off every rocket. */
.rec-shots {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: flex-end; align-items: flex-start;
}
.rec-shot { margin: 0; max-width: 100%; }
.rec-shot button {
  display: block; padding: 0; border: 0; background: none; cursor: zoom-in;
  max-width: 100%; border-radius: 2px;
}
.rec-shot img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 480px;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--bg-lift);
}
/* several photos on one record: a strip of one height, whatever their shapes */
.rec-shots.is-many .rec-shot img { height: 240px; max-height: none; width: auto; }
.rec-shot figcaption {
  font-family: var(--util); font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); margin-top: var(--s-2);
  line-height: 1.4;
}
@media (max-width: 899.98px) {
  /* one column: full width, still uncropped, never taller than most of the screen */
  .rec-shots { justify-content: flex-start; }
  .rec-shot img { max-height: 60svh; }
  .rec-shots.is-many .rec-shot img { height: 180px; }
}

/* ---- lightbox: the photo at full size, on the page's own ground ---- */
.lightbox {
  border: 0; padding: 0; background: transparent; color: var(--ink);
  width: 100vw; height: 100svh; max-width: none; max-height: none;
  display: none; align-items: center; justify-content: center;
}
.lightbox[open] { display: flex; }
.lightbox::backdrop { background: var(--bg); opacity: 0.94; }
.lightbox-fig {
  position: relative; margin: 0; display: grid; gap: var(--s-3); justify-items: start;
  max-width: min(92vw, 1400px);
}
.lightbox-fig img {
  display: block; max-width: min(92vw, 1400px); max-height: 82svh;
  width: auto; height: auto; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--bg-lift);
}
/* the same target-lock brackets the cursor draws, held on the photo */
.lightbox-fig i {
  position: absolute; width: 14px; height: 14px; border: 0 solid var(--accent); pointer-events: none;
}
.lightbox-fig i:nth-of-type(1) { top: -8px; left: -8px; border-top-width: 1px; border-left-width: 1px; }
.lightbox-fig i:nth-of-type(2) { top: -8px; right: -8px; border-top-width: 1px; border-right-width: 1px; }
.lightbox-fig i:nth-of-type(3) { bottom: -8px; left: -8px; border-bottom-width: 1px; border-left-width: 1px; }
.lightbox-fig i:nth-of-type(4) { bottom: -8px; right: -8px; border-bottom-width: 1px; border-right-width: 1px; }
.lightbox-fig figcaption {
  font-family: var(--util); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); display: flex; gap: var(--s-4); flex-wrap: wrap;
}
.lightbox-fig figcaption b { font-weight: 500; color: var(--ink); }
.lightbox-btn {
  position: fixed; z-index: 2; font-family: var(--util); font-size: 0.75rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink); background: var(--bg-lift);
  border: 1px solid var(--rule); border-radius: 2px; padding: 10px 14px; cursor: pointer;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease);
}
.lightbox-btn:hover { border-color: var(--accent); background: var(--bg-rise); }
.lightbox-close { top: var(--s-4); right: var(--s-4); }
.lightbox-prev { left: var(--s-4); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--s-4); top: 50%; transform: translateY(-50%); }
.lightbox-btn[hidden] { display: none; }
@media (max-width: 899.98px) {
  .lightbox-prev, .lightbox-next { top: auto; bottom: var(--s-4); transform: none; }
}
html.has-lightbox { overflow: hidden; }


.back-home { margin: var(--s-9) 0 0; }

.stamp {
  font-family: var(--util); font-size: 0.75rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin-top: var(--s-8);
}
.state { font-family: var(--util); font-size: 0.75rem; color: var(--ink-3); }