/* ---------- Project cards ---------- */
.projects {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 720px) {
  .projects {
    grid-template-columns: 1fr 1fr;
  }
}

.project {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.project:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.project__index {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  margin: 0 0 12px;
}

.project__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  margin: 0 0 10px;
}

.project__desc {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 20px;
  flex-grow: 1;
}

.project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%,
}

.project__tags li {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px 8px;
}

.project__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding-right: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%,
}

.project__links a {
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--text-muted);
  transition: border-color 0.15s ease;
}

.project__links a:hover {
  border-bottom-color: var(--accent);
}

/* ---------- Terminal panel ---------- */
.term {
  margin: 32px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #05080F;
  overflow: hidden;
}

.term__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
}

.term__label {
  color: var(--text-primary);
}

.term__note {
  margin-left: auto;
  color: var(--text-secondary);
}

.term__code {
  margin: 0;
  padding: 18px 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-secondary);
  -webkit-overflow-scrolling: touch;
}

.term__verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--signal);
}

.term__dot {
  width: 8px;
  height: 8px;
  color: var(--signal);
  border-radius: 50%;
  background: currentColor;
}

.term__meta {
  margin-left: auto;
  color: var(--text-secondary);
  font-weight: 400;
  letter-spacing: 0;
}

.tok-p {
  color: var(--accent-2);
}

.tok-k {
  color: var(--tok-fn);
}

.tok-n {
  color: var(--tok-num);
}

.tok-c {
  color: var(--tok-comment);
}

.tok-e {
  color: var(--tok-err);
  font-weight: 500;
}

@media (max-width: 560px) {
  .term__code {
    font-size: 12px;
  }
}

.project__go {
  position: absolute;
  bottom: 12px;
  right: 24px;
  font-family: var(--font-mono);
  font-size: 26px;
  color: var(--text-muted);
  transition: color 0.2s ease, transform 0.2s ease;
}

.project:hover .project__go {
  color: var(--accent);
  transform: translateX(3px);
}

.project__name a {
  color: inherit;
  text-decoration: none;
}

/* Stretched link: the title is the real anchor and its
   pseudo-element covers the card, so the whole surface
   navigates without nesting anchors. */
.project__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.project:hover .project__name a {
  color: var(--accent-2);
}

.tok-str {
  color: var(--tok-str);
}

.tok-k {
  color: var(--tok-kw);
}

.tok-fn {
  color: var(--tok-fn);
}

/* Code blocks carry no syntax palette. The frame stays neutral, the
   structure being compared is lifted out of it, only what differs
   takes the accent, and the variant label sits apart from both. */
.term__code .hl-body {
  color: var(--text-primary);
}

.term__code .hl {
  color: var(--accent-2);
  font-weight: 500;
}

/* Literal rather than a token, so it survives --info being pruned. */
.term__code .hl-cfg {
  color: #8B7BFF;
  font-weight: 500;
}

/* Key phrases lift out of the body colour without taking the accent,
   which stays reserved for links and markers. */
.detail__lead .key,
.detail__text .key {
  color: var(--text-primary);
  font-weight: 500;
}

/* Long headings break where the sense breaks, but only when there is
   room for the break to help. */
@media (max-width: 560px) {
  .title-break {
    display: none;
  }
}

/* Fact cards: the project-card treatment without the hover lift,
   since these do not go anywhere. */
.facts {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.fact {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.fact__label {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  margin: 0 0 12px;
}

.fact__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 10px;
}

.fact__desc {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
}

/* Demo videos. Framed like the code panels, so a recording and a
   listing read as the same kind of evidence. */
.demo {
  margin: 28px 0;
}

.demo video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #05080F;
}

.demo__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.demo__verdict {
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.demo__meta {
  color: var(--text-secondary);
}