/* ============================================================
   Connie Liu — Portfolio 2026 · Catalog
   Faithful static reproduction of Figma frame 959:2 (1440 × 2931)
   + click-to-open experiment modals (7 cards, per design)
   ============================================================ */

:root {
  --bg:        #faf6ee;
  --ink:       #1a1814;
  --ink-strong:#15171a;
  --blue:      #3d5afe;
  --blue-strong:#1256d8;
  --muted:     #6b665a;
  --label:     #8a8474;
  --body:      #4a463c;
  --date:      #a8a293;
  --tag-tx:    #2a261e;
  --hairline-cream:#d8d2c2;
  --modal-bg:  #fbf8f1;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--bg); }
body {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 100;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  display: flex;
  justify-content: center;
}

.stage {
  position: relative;
  width: 1440px;
  height: 2931px;
  background: var(--bg);
  overflow: hidden;
  /* site max-width is 1200px — scale the 1440 design down proportionally */
  zoom: 0.833333;
}

/* ---------- Top bar (CATALOG active) ---------- */
.nav {
  position: absolute;
  left: 50%;
  transform: translateX(calc(-50% + 0.5px));
  top: 48px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  font-size: 15.6px;
  line-height: 16px;
}
.nav a { text-decoration: none; color: var(--muted); }
.nav .is-active {
  color: var(--blue);
  font-weight: 700;
  border-bottom: 1px solid var(--blue-strong);
  padding-bottom: 2px;
}
.availability {
  position: absolute;
  top: 48px;
  right: 48px;
  font-size: 13px;
  line-height: 14px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

/* ---------- Header ---------- */
.cat-head {
  position: absolute;
  left: 226px;
  top: 166px;
  width: 242px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.cat-head .eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  line-height: 18.75px;
  color: var(--label);
}
.cat-head .title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 98px;
  line-height: 95.88px;
  letter-spacing: -1.53px;
  color: var(--ink);
}
.cat-blurb {
  position: absolute;
  left: 667px;
  top: 203px;
  width: 657px;
  font-size: 18px;
  line-height: 28.8px;
  color: var(--body);
}
.cat-count {
  position: absolute;
  left: 666px;
  top: 286px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.38px;
  line-height: 17.25px;
  color: var(--label);
  white-space: nowrap;
}
.cat-rule { position: absolute; left: 48px; top: 355px; width: 1344px; height: 1px; background: var(--ink-strong); }

/* ---------- Experiment cards ---------- */
.card {
  position: absolute;
  width: 600px;
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.card .win {
  position: relative;
  width: 600px;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
}
.card .win img {
  position: absolute;
  /* native image-drag swallows the click if the mouse moves 1px mid-press */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.card .meta { margin-top: 32px; }
.card .trow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
}
.card .t {
  font-weight: 700;
  font-size: 19px;
  line-height: 28.5px;
  letter-spacing: -0.19px;
  color: var(--ink);
}
.card:hover .t { color: var(--blue); }
.card .y {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 16.5px;
  color: var(--date);
}
.card .d {
  margin-top: 8px;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}
.tag {
  position: absolute;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 15px 7px 14px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(211,211,211,0.72);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.44px;
  line-height: 16.5px;
  color: var(--tag-tx);
  white-space: nowrap;
}
.tag.light {
  background: rgba(255,253,248,0.72);
  border: 1px solid rgba(255,255,255,0.5);
}

/* ---------- Footer ---------- */
.footer { position: absolute; left: 50%; transform: translateX(-50%); top: 2698px; width: 1303.2px; height: 178.8px; border-top: 1.2px solid #1a1814; font-family: 'Archivo', sans-serif; font-variation-settings: 'wdth' 100; }
.footer .talk { position: absolute; top: 70.8px; left: 62.4px; font-family: 'Instrument Serif', serif; font-size: 38.4px; line-height: normal; color: #1a1814; white-space: nowrap; }
.footer .talk .dash { font-style: italic; }
.footer .talk a { color: #3d5afe; text-decoration: none; border-bottom: 1.2px solid #3d5afe; padding-bottom: 1.2px; }
.footer .links { position: absolute; top: 93.6px; left: 1021.2px; display: flex; gap: 28.8px; }
.footer .links a { display: inline-flex; align-items: center; gap: 2.4px; font-size: 15.6px; color: #6b665a; text-decoration: none; }
.footer .links .arrow { font-family: 'Source Sans 3', sans-serif; font-size: 9.6px; }