/* ══════════════════════════════════════════════════════
   ARCHITECTURE
   ══════════════════════════════════════════════════════ */
.arch-section {
  background: var(--paper-dark);
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
}

.arch-intro {
  max-width: var(--max-w-narrow);
  margin-bottom: var(--sp-3xl);
}

.arch-layers {
  display: grid;
  gap: 0;
  border: var(--border-ink);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--sp-3xl);
  box-shadow: 6px 6px 0 var(--ink);
}

.arch-layer {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  gap: var(--sp-xl);
  align-items: start;
  padding: var(--sp-2xl);
  border-bottom: var(--border-ink);
  background: var(--paper-warm);
  position: relative;
  transition: background var(--ease-base);
}
.arch-layer:last-child { border-bottom: 0; }
.arch-layer:nth-child(even) { background: var(--paper); }
.arch-layer:hover { background: var(--rose-soft); }

.al-num {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--rose);
  line-height: 1;
  padding-top: 0.2rem;
}

.al-content h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--sp-sm);
}
.al-content p { font-size: var(--text-sm); margin-bottom: var(--sp-md); }

.al-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}
.al-tags span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 0.15rem 0.6rem;
  border: var(--border-line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--muted-strong);
}

.al-annotation {
  font-family: var(--font-hand);
  font-size: 0.95rem;
  color: var(--rose);
  opacity: 0.7;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  align-self: center;
  white-space: nowrap;
}

/* Code card */
.code-card {
  border: var(--border-ink);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-0.3deg);
}

.cc-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg);
  background: var(--ink);
}
.cc-dots { display: flex; gap: 6px; }
.cc-dots span {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgb(255 255 255 / 20%);
}
.cc-dots span:nth-child(1) { background: #ff5f57; }
.cc-dots span:nth-child(2) { background: #febc2e; }
.cc-dots span:nth-child(3) { background: #28c840; }

.cc-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgb(255 255 255 / 45%);
  letter-spacing: 0.05em;
  flex: 1;
}
.cc-hand {
  font-family: var(--font-hand);
  font-size: 0.95rem;
  color: var(--rose-mid);
  transform: rotate(-1deg);
  display: inline-block;
}

.cc-body {
  margin: 0;
  padding: var(--sp-xl) var(--sp-2xl);
  background: var(--ink-soft);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.9;
}
.cc-body code { display: block; }
.c-dir  { color: var(--orange-mid); font-weight: 700; }
.c-file { color: rgb(255 255 255 / 75%); }
.c-note { color: rgb(255 255 255 / 30%); }