/* NMA expansion batch 002 — warm museum surfaces for NMA-021 through NMA-035 */

.nma-expansion-002-surface {
  width: min(1440px, calc(100% - 32px));
  margin: clamp(48px, 8vw, 112px) auto;
  padding: clamp(24px, 4vw, 56px);
  border: 1px solid rgba(255, 204, 142, .26);
  border-radius: 34px;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 190, 107, .15), transparent 36%),
    linear-gradient(135deg, rgba(38, 15, 48, .96), rgba(10, 8, 21, .98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .34);
  overflow: hidden;
}

.nma-expansion-heading { display: grid; gap: 12px; max-width: 850px; margin-bottom: clamp(24px, 4vw, 48px); }
.nma-expansion-heading h2 { margin: 0; font-size: clamp(2rem, 5vw, 4.4rem); line-height: .98; letter-spacing: -.045em; }
.nma-expansion-heading p { max-width: 68ch; margin: 0; color: rgba(255, 246, 232, .78); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.7; }
.nma-expansion-heading > a { width: fit-content; margin-top: 8px; color: #ffd69a; font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.nma-expansion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.nma-expansion-memory { display: grid; grid-template-rows: minmax(210px, 1fr) auto; min-width: 0; overflow: hidden; color: #fff8eb; text-decoration: none; border: 1px solid rgba(255,255,255,.11); border-radius: 24px; background: rgba(7, 6, 16, .78); transition: transform .22s ease, border-color .22s ease, background .22s ease; }
.nma-expansion-memory:hover, .nma-expansion-memory:focus-visible { transform: translateY(-4px); border-color: rgba(255, 205, 143, .62); background: rgba(24, 13, 32, .96); }
.nma-expansion-memory:focus-visible { outline: 3px solid #ffd28f; outline-offset: 4px; }
.nma-expansion-memory img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; background: #11091d; }
.nma-expansion-memory > div { display: grid; gap: 9px; padding: 20px; }
.nma-expansion-memory span, .nma-expansion-collection span { color: #ffd28f; font-family: "IBM Plex Mono", monospace; font-size: .76rem; letter-spacing: .08em; }
.nma-expansion-memory h3, .nma-expansion-collection h3 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.15; }
.nma-expansion-memory p { margin: 0; color: rgba(255, 246, 232, .68); line-height: 1.55; }
.nma-expansion-memory strong { color: #ffbe89; font-size: .9rem; }
.nma-expansion-memory.is-compact { grid-template-rows: 190px auto; }
.nma-expansion-memory.is-compact p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.nma-expansion-collection-grid { display: grid; gap: 26px; }
.nma-expansion-collection { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr); overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: rgba(5, 5, 13, .75); }
.nma-expansion-collection > img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.nma-expansion-collection > div { display: grid; align-content: center; gap: 14px; padding: clamp(24px, 5vw, 54px); }
.nma-expansion-collection p, .nma-expansion-collection strong { margin: 0; max-width: 65ch; line-height: 1.65; }
.nma-expansion-collection strong { color: #ffd9a7; }
.nma-expansion-collection nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; margin-top: 8px; }
.nma-expansion-collection nav a { color: rgba(255,255,255,.78); text-decoration-color: rgba(255, 202, 137, .4); text-underline-offset: 4px; }
.nma-expansion-references { margin: clamp(36px, 6vw, 72px) 0; padding: clamp(24px, 4vw, 44px); border: 1px solid rgba(255, 206, 145, .28); border-radius: 26px; background: linear-gradient(140deg, rgba(255, 221, 171, .08), rgba(50, 18, 55, .52)); }
.nma-expansion-references h2 { margin: 4px 0 12px; }
.nma-expansion-references > p:not(.eyebrow) { max-width: 70ch; color: rgba(255,255,255,.72); line-height: 1.7; }
.nma-expansion-references ul { display: grid; gap: 12px; padding: 0; margin: 24px 0 0; list-style: none; }
.nma-expansion-references li { display: grid; gap: 4px; padding: 15px 18px; border-radius: 15px; background: rgba(0,0,0,.22); }
.nma-expansion-references li a { color: #ffd69a; font-weight: 750; }
.nma-expansion-references li span { color: rgba(255,255,255,.58); font-size: .86rem; }
.nma-expansion-closing { margin: clamp(42px, 6vw, 76px) 0; padding: clamp(22px, 4vw, 38px); border-left: 4px solid #f4b66e; color: #fff3dd; background: rgba(244, 182, 110, .08); font-size: clamp(1.15rem, 2vw, 1.42rem); line-height: 1.7; }

@media (max-width: 1050px) {
  .nma-expansion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nma-expansion-collection { grid-template-columns: 1fr; }
  .nma-expansion-collection > img { min-height: 280px; max-height: 460px; }
}

@media (max-width: 650px) {
  .nma-expansion-002-surface { width: min(100% - 18px, 1440px); padding: 18px; border-radius: 22px; }
  .nma-expansion-grid { grid-template-columns: 1fr; }
  .nma-expansion-memory, .nma-expansion-memory.is-compact { grid-template-rows: 210px auto; }
  .nma-expansion-collection nav { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { .nma-expansion-memory { transition: none; } }