.archive-page { background: var(--bg); }

.archive-hero {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 148px 48px 82px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: end;
  gap: 72px;
}

.archive-hero h1 {
  max-width: 760px;
  font-size: clamp(3rem, 7vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.archive-deck {
  padding: 0 0 8px 24px;
  border-left: 3px solid var(--accent);
  font-size: 1.08rem;
  line-height: 1.75;
}

.collection-section {
  padding: 100px 48px 112px;
  background: var(--bg-alt);
}

.collection-heading,
.collection-card,
.soft-launch-note {
  max-width: var(--max-w);
  margin-right: auto;
  margin-left: auto;
}

.collection-heading {
  margin-bottom: 42px;
  display: grid;
  grid-template-columns: 1fr .8fr;
  align-items: end;
  gap: 60px;
}

.collection-heading h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); letter-spacing: -.035em; }
.collection-heading > p { padding-bottom: 4px; line-height: 1.75; }

.collection-card {
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.collection-card + .collection-card { margin-top: 42px; }

.graphics-tutor-preview {
  min-height: 560px;
  padding: 26px;
  display: grid;
  grid-template-rows: 34px 36px 1fr 54px;
  color: #111;
  background: #dcdcdc;
  font-family: Tahoma, "MS Sans Serif", Arial, sans-serif;
}

.gt-window-title {
  padding: 5px 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  background: linear-gradient(90deg, #17498e, #76a6dc);
  font-size: .66rem;
  font-weight: 700;
}

.gt-window-title b { width: 20px; height: 20px; display: grid; place-items: center; background: #dc640a; border: 1px solid white; font-size: .5rem; }
.gt-menu { padding: 4px 7px; display: flex; align-items: center; gap: 12px; border: 1px solid #aaa; background: #f0f0f0; font-size: .65rem; }
.gt-menu strong { width: 180px; padding: 5px 8px; background: white; border: 1px inset white; font-weight: 400; }
.gt-workspace { min-height: 0; display: grid; grid-template-columns: 1fr 42%; gap: 2px; background: #888; }
.gt-grid {
  position: relative;
  overflow: hidden;
  background-color: #f8f8f8;
  background-image: linear-gradient(#222 1px, transparent 1px), linear-gradient(90deg, #222 1px, transparent 1px);
  background-size: 28px 28px;
}
.gt-grid::before { content: ""; position: absolute; left: 24%; top: 58%; width: 58%; height: 3px; transform: rotate(-22deg); transform-origin: left; background: #dc640a; }
.gt-grid i { position: absolute; width: 28px; height: 28px; background: #111; }
.gt-grid i:nth-child(1) { left: 25%; top: 58%; }
.gt-grid i:nth-child(2) { left: 33%; top: 53%; }
.gt-grid i:nth-child(3) { left: 41%; top: 48%; }
.gt-grid i:nth-child(4) { left: 49%; top: 43%; }
.gt-grid i:nth-child(5) { left: 57%; top: 38%; }
.gt-grid i:nth-child(6) { left: 65%; top: 33%; }
.gt-grid i:nth-child(n+7) { display: none; }
.gt-code { background: #ededed; border: 1px inset white; }
.gt-code b { padding: 7px; display: block; border-bottom: 1px solid #aaa; font-size: .7rem; }
.gt-code code { padding: 30px 18px; display: block; color: #333; font: .61rem/2 "Courier New", monospace; }
.gt-controls { padding: 9px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; border: 1px groove white; background: #f0f0f0; }
.gt-controls span { margin-right: auto; color: #dc640a; font-size: .55rem; font-weight: 800; letter-spacing: .1em; }
.gt-controls button { padding: 5px 11px; border: 2px outset white; background: #eee; font-size: .6rem; }

.anternet-preview {
  min-height: 560px;
  display: grid;
  grid-template-rows: 46px 1fr 58px;
  color: #f2f0e8;
  background:
    radial-gradient(circle at 82% 22%, rgba(49,92,255,.54), transparent 30%),
    linear-gradient(135deg, #111114, #25252a);
}

.preview-topbar {
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #424249;
  font: 700 .63rem/1 "Courier New", monospace;
  letter-spacing: .08em;
}

.preview-topbar i { width: 7px; height: 7px; border-radius: 50%; background: #8c8c93; }
.preview-topbar i:first-child { background: #d9ff3f; }
.preview-topbar span { margin-left: auto; color: #9c9ca2; }

.preview-body { padding: 64px 8%; align-self: center; }
.preview-body > p { color: #d9ff3f; font: 700 .65rem/1 "Courier New", monospace; letter-spacing: .14em; }
.preview-body h3 { margin: 18px 0 52px; color: white; font: 900 clamp(2.8rem, 5.4vw, 5rem)/.85 Arial, sans-serif; letter-spacing: -.075em; }
.preview-body h3 small { margin-right: .4em; color: #d9ff3f; font: 700 .18em/1 "Courier New", monospace; letter-spacing: .02em; text-transform: uppercase; vertical-align: middle; }
.preview-index { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #4c4c53; }
.preview-index span { padding: 12px 0; color: #b7b7bd; border-bottom: 1px solid #4c4c53; font: 700 .61rem/1 "Courier New", monospace; letter-spacing: .08em; }

.preview-switch {
  padding: 0 8%;
  display: flex;
  align-items: center;
  gap: 13px;
  border-top: 1px solid #424249;
  font: 700 .57rem/1 "Courier New", monospace;
  letter-spacing: .08em;
}

.preview-switch i { position: relative; width: 35px; height: 18px; border: 1px solid #d9ff3f; border-radius: 20px; }
.preview-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: #d9ff3f; }

.collection-copy { padding: 54px 50px; }
.collection-status { display: flex; justify-content: space-between; gap: 20px; color: var(--accent); font-size: .65rem; font-weight: 800; letter-spacing: .13em; }
.collection-number { margin-top: 72px; color: var(--text-3); font-size: .7rem; font-weight: 800; letter-spacing: .15em; }
.collection-copy h2 { margin: 8px 0 20px; font-size: clamp(2.5rem, 4vw, 4rem); letter-spacing: -.045em; }
.collection-summary { font-size: 1rem; line-height: 1.75; }
.collection-copy dl { margin: 32px 0; border-top: 1px solid var(--border); }
.collection-copy dl div { padding: 11px 0; display: grid; grid-template-columns: 95px 1fr; border-bottom: 1px solid var(--border); }
.collection-copy dt { color: var(--text-3); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.collection-copy dd { color: var(--text-1); font-size: .82rem; font-weight: 600; }
.collection-enter { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.collection-enter i { transition: transform .2s var(--ease); }
.collection-enter:hover i, .collection-enter:focus-visible i { transform: translateX(5px); }

.soft-launch-note {
  margin-top: 30px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.soft-launch-note span { padding-top: 3px; color: var(--accent); font-size: .67rem; font-weight: 800; letter-spacing: .15em; }
.soft-launch-note p { font-size: .86rem; line-height: 1.65; }

@media (max-width: 900px) {
  .archive-hero { padding: 120px 24px 64px; display: block; }
  .archive-deck { max-width: 680px; margin-top: 32px; }
  .collection-section { padding: 72px 24px; }
  .collection-heading { display: block; }
  .collection-heading > p { margin-top: 18px; }
  .collection-card { grid-template-columns: 1fr; }
  .anternet-preview { min-height: 480px; }
}

@media (max-width: 540px) {
  .archive-hero h1 { font-size: 3rem; }
  .archive-deck { padding-left: 16px; font-size: .98rem; }
  .anternet-preview { min-height: 410px; }
  .preview-body { padding-top: 38px; padding-bottom: 38px; }
  .preview-body h3 { margin-bottom: 38px; font-size: 2.8rem; }
  .collection-copy { padding: 38px 26px; }
  .collection-status { align-items: flex-start; flex-direction: column; gap: 5px; }
  .collection-number { margin-top: 44px; }
  .collection-copy dl div { grid-template-columns: 1fr; gap: 3px; }
  .soft-launch-note { grid-template-columns: 1fr; gap: 8px; }
}