/* projects.css — the projects archive: work lying on the desk as sheets of
   paper you pick up. Shares cyber-goth.css's chrome; everything here is the
   paper and the project pages. */

/* chrome is never selectable (house rule) */
button, [role="button"] {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ── the pile: the archive's own card, so its frame fits ── */
.paper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 30px;
  width: 100%; max-width: 1120px;
  margin: 6px auto 36px;
}
@media (max-width: 900px) { .paper-grid { max-width: 700px; gap: 20px; } }

.sheet { transform: rotate(var(--tilt, 0deg)); }
.sheet:hover, .sheet:focus-visible { transform: rotate(0deg) translateY(-6px); }
.sheet:focus-visible { outline: none; }

/* No screenshot behind these, unlike the archive grid: a page of research
   is a page of text, and a thumbnail of a wall of type says nothing the
   title does not say better. So the sheet is paper the words sit on, and
   the face carries no scrim of its own — a scrim exists to hold type off a
   picture, and stacking one on plain paper only darkens the card. */
.sheet .card-inner {
  background:
    radial-gradient(120% 90% at 30% 12%, rgba(185,173,249,0.15), transparent 62%),
    linear-gradient(162deg, #171033 0%, #0d0920 60%, #0a0718 100%);
  transition: background .35s;
}
.sheet:hover .card-inner, .sheet:focus-visible .card-inner {
  background:
    radial-gradient(120% 90% at 30% 12%, rgba(185,173,249,0.24), transparent 62%),
    linear-gradient(162deg, #1d1440 0%, #100b28 60%, #0c0920 100%);
}
.card-face {
  position: absolute; inset: 14%;
  z-index: 5;
  padding: 14px;
  display: flex; flex-direction: column;
  text-align: left;
}
.sheet-kind, .sheet-field, .sheet-stamp {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  text-transform: lowercase;
}
.sheet-kind { font-size: 10px; letter-spacing: 0.24em; color: rgba(116, 215, 254, 0.85); }
.sheet-name {
  margin-top: 16px;
  font-family: 'RoyaleCouture', serif;
  font-size: 24px; line-height: 1.2;
  color: var(--white);
}
.sheet-field {
  margin-top: 8px;
  font-size: 10px; letter-spacing: 0.16em;
  color: rgba(185, 173, 249, 0.68);
}
.sheet-stamp {
  margin: auto 0 0;
  align-self: flex-start;
  padding: 5px 10px;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(238, 170, 247, 0.85);
  border: 1px solid rgba(238, 170, 247, 0.5);
  transform: rotate(-6deg);
}

/* link row, shared by the archive and a project's own page */
.pr-link {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: lowercase;
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  transition: color .2s;
}
.pr-link:hover, .pr-link:focus-visible { color: var(--white); outline: none; }
.pr-note {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.14em;
  color: rgba(185, 173, 249, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .sheet-paper { transition: none; }
}


/* ── a project's own page ── */
.one {
  width: min(720px, 92vw);
  margin: 8px auto 0;
  padding: 4px 0 40px;
}
.one-kind {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.26em; text-transform: lowercase;
  color: rgba(116, 215, 254, 0.85);
}
.one-name {
  margin: 14px 0 0;
  font-family: 'RoyaleCouture', serif;
  font-size: clamp(1.7rem, 5.4vw, 2.9rem); line-height: 1.14;
  color: var(--white);
}
.one-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: 16px 0 34px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: lowercase;
  color: rgba(185, 173, 249, 0.7);
}
.one-meta span + span::before { content: '· '; color: rgba(185, 173, 249, 0.45); }
.one-head {
  margin: 34px 0 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: lowercase;
  color: rgba(238, 170, 247, 0.85);
}
.one-para {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15.5px; line-height: 1.78;
  color: rgba(226, 220, 255, 0.88);
  margin: 0 0 16px;
}
.one-para i { color: rgba(238, 170, 247, 0.9); font-style: italic; }
.one-links {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(138, 111, 232, 0.3);
}

/* ─── the phone ───
   40px of page padding leaves 310px for an article whose title does not
   break, so the article came out 359px wide and took the page sideways. */
@media (max-width: 720px) {
  .page { padding-left: 16px; padding-right: 16px; }
  .one, .one-name, .one-kind, .one-para {
    overflow-wrap: anywhere;
    max-width: 100%;
  }
  .one-meta, .pr-note, .sheet-kind, .ea, .one-kind { font-size: 12px !important; }
}