/* ByJTT Experiments hub — mobile-first styles */
html, body {
  margin: 0;
  padding: 0;
  background: #faf8ef;
  color: #776e65;
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px; }

body { margin: 40px 0; }

.container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }

.heading { margin-bottom: 24px; }

h1.title {
  font-size: 44px;
  font-weight: bold;
  margin: 0; }

.title-accent { color: #bbada0; }

.tagline {
  margin: 8px 0 0;
  color: #a0948a;
  font-size: 16px; }

.game-list {
  display: flex;
  flex-direction: column;
  gap: 16px; }

.game-card {
  display: block;
  background: #fff;
  border: 2px solid #eee4da;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: #776e65;
  transition: border-color 150ms ease, transform 150ms ease; }
  .game-card:hover, .game-card:focus-visible {
    border-color: #bbada0;
    transform: translateY(-2px); }
  .game-card:focus-visible { outline: 3px solid #f2b179; }

.card-thumb {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center; }

.card-thumb-text {
  font-size: 56px;
  font-weight: bold;
  color: #f9f6f2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }

.card-body { padding: 16px; }

.card-title {
  margin: 0 0 6px;
  font-size: 22px;
  color: #776e65; }

.card-desc {
  margin: 0 0 10px;
  line-height: 1.55;
  font-size: 15px;
  color: #a0948a; }

.card-meta {
  font-size: 13px;
  color: #bbada0;
  text-transform: uppercase;
  letter-spacing: 0.04em; }

.game-card-empty { border-style: dashed; }

p { line-height: 1.65; }

a { color: #776e65; font-weight: bold; }

strong.important { text-transform: uppercase; }

hr {
  border: none;
  border-bottom: 1px solid #d8d4d0;
  margin-top: 28px;
  margin-bottom: 28px; }

.game-explanation { margin-top: 0; }

/* tab-bar + footer styles now live in style/site.css (shared site-wide) */

/* ---- Principles (mobile-first grid) ---- */
.principles { margin-top: 4px; }

.principles-title {
  font-size: 24px;
  margin: 0 0 14px; }

.principles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px; }

.principle {
  background: #fff;
  border: 2px solid #eee4da;
  border-radius: 8px;
  padding: 14px 16px; }
  .principle h3 {
    margin: 0 0 6px;
    font-size: 17px; }
  .principle p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #a0948a; }

.principles-note {
  margin-top: 14px;
  font-size: 13px;
  color: #a0948a; }

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

/* ---- Timeline (experiments explore page) ---- */
.timeline {
  list-style: none;
  margin: 24px 0 0;
  padding: 0; }

.timeline-item {
  position: relative;
  padding-left: 34px;
  margin-bottom: 22px; }
  .timeline-item::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 6px;
    bottom: -22px;
    width: 3px;
    background: #eee4da;
    border-radius: 2px; }
  .timeline-item:last-child::before { display: none; }

.timeline-marker {
  position: absolute;
  left: 0;
  top: 4px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #f2b179;
  border: 3px solid #faf8ef;
  box-shadow: 0 0 0 3px #f2b179; }

.timeline-item-next .timeline-marker {
  background: #eee4da;
  box-shadow: 0 0 0 3px #eee4da; }

.timeline-card {
  background: #fff;
  border: 2px solid #eee4da;
  border-radius: 10px;
  padding: 14px 16px; }

.timeline-card-next {
  border-style: dashed;
  background: #fdfbf7; }

.timeline-date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e8834a;
  margin-bottom: 6px; }

.timeline-title {
  margin: 0 0 6px;
  font-size: 20px; }

.timeline-desc {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.55;
  color: #776e65; }

.timeline-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0; }
  .timeline-tags li {
    font-size: 12px;
    font-weight: 700;
    color: #776e65;
    background: #f4efe7;
    border-radius: 20px;
    padding: 3px 10px; }

.timeline-links {
  font-size: 14px; }
  .timeline-links a { font-weight: bold; color: #776e65; }

/* ---- About page: pipeline list ---- */
.pipeline {
  margin: 0 0 20px;
  padding-left: 22px; }
  .pipeline li {
    margin-bottom: 8px;
    line-height: 1.55;
    color: #776e65; }
}

/* ---- Experiment stats grid (timeline) ---- */
.exp-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 12px 0;
  padding: 12px 14px;
  background: #fdfbf7;
  border: 1px solid #eee4da;
  border-radius: 8px; }
  .exp-stats .exp-stat {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px; }
    .exp-stats dt { color: #a0948a; font-weight: 700; flex-shrink: 0; }
    .exp-stats dd { margin: 0; color: #776e65; text-align: right; }

@media (min-width: 641px) {
  .exp-stats { grid-template-columns: 1fr 1fr; }
  .exp-stats .exp-stat { border-bottom: 1px solid #f4efe7; padding-bottom: 6px; }
  .exp-stats .exp-stat:nth-last-child(-n+2) { border-bottom: none; }
}