@font-face {
  font-family: "Noto Sans Egyptian Hieroglyphs Local";
  src: url("assets/fonts/noto-sans-egyptian-hieroglyphs.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.symbol-hero {
  background:
    linear-gradient(110deg, rgba(23, 20, 17, 0.95), rgba(23, 20, 17, 0.62)),
    radial-gradient(circle at 72% 24%, rgba(201, 145, 47, 0.38), transparent 28%),
    radial-gradient(circle at 82% 70%, rgba(162, 72, 46, 0.3), transparent 30%),
    var(--night);
}

.symbol-rule-section {
  background: #fbf5ec;
}

.symbol-rule-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.symbol-rule-grid article,
.symbol-family,
.matrix-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-strong);
  box-shadow: var(--shadow);
}

.symbol-rule-grid article {
  padding: 1.1rem;
}

.symbol-rule-grid strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--night);
}

.symbol-rule-grid span {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.42;
}

.symbol-jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.symbol-jump-list a {
  min-height: 2.2rem;
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper-strong);
  font-size: 0.86rem;
  font-weight: 850;
}

.symbol-family {
  margin-top: 1rem;
  padding: 1rem;
}

.symbol-family h3 {
  margin-bottom: 1rem;
  font-size: 1.45rem;
}

.symbol-card-grid,
.year-symbol-grid {
  display: grid;
  gap: 0.75rem;
}

.symbol-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compact-symbol-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.year-symbol-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.system-symbol-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.8rem;
  border: 1px solid #eadbc7;
  border-radius: 8px;
  background: #fffdf8;
}

.system-symbol-card.compact {
  grid-template-columns: 1fr;
}

.system-symbol-card.compact .system-symbol-art {
  width: 4.2rem;
}

.system-symbol-art {
  width: 4.6rem;
  aspect-ratio: 1;
  border: 1px solid #d8c5aa;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 250, 241, 0.95), rgba(255, 250, 241, 0) 28%),
    #f7f1e8;
  overflow: hidden;
  flex: 0 0 auto;
}

.symbol-hieroglyph { font-family: "Noto Sans Egyptian Hieroglyphs Local", "Noto Sans Egyptian Hieroglyphs", "Segoe UI Historic", "Noto Sans Symbols 2", sans-serif; font-size: 38px; fill: #171411; paint-order: stroke; stroke: rgba(255,250,241,.92); stroke-width: 2px; }

.symbol-greek { font-family: "Times New Roman", "Noto Serif", serif; font-size: 24px; font-weight: 700; fill: #24706c; paint-order: stroke; stroke: rgba(255,250,241,.94); stroke-width: 2px; }

.system-symbol-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.system-symbol-copy h4 {
  margin: 0;
  color: var(--night);
  font-size: 0.94rem;
  line-height: 1.18;
}

.system-symbol-copy span {
  display: block;
  margin-top: 0.22rem;
  color: var(--teal-dark);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.system-symbol-copy p {
  margin: 0.42rem 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.36;
}

.system-symbol-copy code {
  display: inline-block;
  margin-top: 0.44rem;
  padding: 0.22rem 0.36rem;
  border-radius: 999px;
  color: var(--night);
  background: #f0e0ca;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 850;
}

.matrix-wrap {
  overflow: auto;
  padding: 1rem;
}

.pulse-matrix-grid {
  min-width: 72rem;
  display: grid;
  grid-template-columns: 6.5rem repeat(20, minmax(5.2rem, 1fr));
  gap: 0.25rem;
}

.matrix-cell {
  min-height: 4.65rem;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 0.42rem;
  border: 1px solid #eadbc7;
  border-radius: 6px;
  background: #fffdf8;
}

.matrix-cell.header,
.matrix-cell.tone-header {
  min-height: auto;
  color: var(--paper-strong);
  background: var(--night);
  border-color: var(--night);
  font-weight: 850;
}

.matrix-cell.tone-header {
  position: sticky;
  left: 0;
  z-index: 1;
}

.matrix-cell strong {
  color: var(--night);
  font-size: 0.72rem;
  line-height: 1.15;
}

.matrix-cell.header strong,
.matrix-cell.tone-header strong {
  color: var(--paper-strong);
}

.matrix-mark {
  width: 1.8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}

.matrix-mark .symbol-hieroglyph { font-size: 53px; }
.matrix-mark .symbol-greek { font-size: 30px; }

.matrix-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.matrix-cell span {
  color: var(--ink-soft);
  font-size: 0.66rem;
  line-height: 1.15;
}

@media (max-width: 1180px) {
  .symbol-rule-grid,
  .compact-symbol-grid,
  .year-symbol-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .symbol-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .symbol-rule-grid,
  .symbol-card-grid,
  .compact-symbol-grid,
  .year-symbol-grid {
    grid-template-columns: 1fr;
  }

  .symbol-family {
    padding: 0.75rem;
  }

  .system-symbol-card {
    grid-template-columns: 4rem minmax(0, 1fr);
    padding: 0.7rem;
  }

  .system-symbol-art {
    width: 4rem;
  }

  .matrix-wrap {
    padding: 0.75rem;
  }
}

.holiday-seal-intro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(18rem, 1.2fr); gap: 1.5rem; align-items: end; margin-bottom: 1rem; }
.holiday-seal-intro h3 { margin: 0; }
.holiday-seal-intro > p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.holiday-seal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.holiday-seal-card { min-width: 0; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1rem; border: 1px solid #d8c5aa; border-radius: 8px; background: linear-gradient(135deg, #fffdf8, #f4e8d6); }
.holiday-seal-art { width: 8.5rem; aspect-ratio: 1; }
.holiday-seal-art svg { display: block; width: 100%; height: 100%; }
.holiday-seal-copy h4 { margin: 0; color: var(--night); font-size: 1rem; }
.holiday-seal-copy code { display: inline-block; margin-top: .45rem; padding: .32rem .5rem; border: 1px solid rgba(141, 97, 23, .25); border-radius: 999px; color: var(--teal-dark); background: #fffaf1; font: 850 .84rem/1.2 "Times New Roman", serif; }
.holiday-seal-copy p { margin: .55rem 0 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.45; }
.holiday-script { font-family: "Noto Sans Egyptian Hieroglyphs Local", "Segoe UI Historic", serif; font-size: 23px; fill: #8d6117; paint-order: stroke; stroke: #fbf5ec; stroke-width: 2px; }
.holiday-math { font-family: "Times New Roman", "Noto Serif", serif; font-size: 18px; font-weight: 700; fill: #171411; paint-order: stroke; stroke: #fbf5ec; stroke-width: 3px; }
.holiday-number { font-family: ui-monospace, monospace; font-size: 7px; font-weight: 800; letter-spacing: 1.5px; fill: #24706c; }
@media (max-width: 900px) { .holiday-seal-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .holiday-seal-intro { grid-template-columns: 1fr; gap: .65rem; } .holiday-seal-card { grid-template-columns: 6.5rem minmax(0, 1fr); padding: .75rem; } .holiday-seal-art { width: 6.5rem; } }