/* ==========================================================================
   IN7 GAME — About page
   Editorial layout: manifesto hero · vertical timeline · pillars ·
   do / don't ledger · methodology
   ========================================================================== */

/* ---------- Manifesto hero ---------- */
.about-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5rem);
  background:
    radial-gradient(ellipse 70% 100% at 78% 0%, rgba(238, 223, 174, .55), transparent 62%),
    radial-gradient(ellipse 60% 90% at 5% 60%, rgba(251, 233, 236, .7), transparent 62%),
    var(--color-bg);
  border-bottom: 1px solid var(--color-border-soft);
}
.about-hero__inner { position: relative; z-index: var(--z-raised); }

.about-hero__title {
  font-size: var(--fs-display);
  max-width: 16ch;
  margin-block: 1.15rem 1.35rem;
}
.about-hero__title em {
  font-style: normal;
  color: var(--color-crimson);
  position: relative;
  white-space: nowrap;
}
.about-hero__title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.08em;
  height: 5px;
  border-radius: 5px;
  background: var(--grad-gold);
}

.about-hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: start;
  margin-top: .5rem;
}
@media (max-width: 900px) { .about-hero__split { grid-template-columns: 1fr; } }

.about-hero__lead { font-size: var(--fs-lead); color: var(--color-text-muted); line-height: var(--lh-loose); }

.about-hero__card {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--grad-card-face);
  border: 1px solid rgba(201, 162, 39, .4);
  box-shadow: var(--shadow-lift);
}
.about-hero__card h2 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 1.15rem;
}
.about-hero__ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.about-hero__ledger li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px dashed rgba(201, 162, 39, .25);
  font-size: var(--fs-sm);
  color: var(--color-text-invert-muted);
}
.about-hero__ledger li:last-child { border-bottom: 0; padding-bottom: 0; }
.about-hero__ledger b {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-gold-light);
  white-space: nowrap;
}

/* ---------- Vertical timeline ---------- */
.timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 clamp(1.5rem, .8rem + 2vw, 2.75rem);
  list-style: none;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .6rem;
  bottom: .6rem;
  width: 2px;
  background: linear-gradient(180deg, var(--color-gold), var(--color-gold-light) 55%, transparent);
  border-radius: 2px;
}

.timeline__item { position: relative; padding-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.timeline__item:last-child { padding-bottom: 0; }

.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.5rem, .8rem + 2vw, 2.75rem) + 1px);
  top: .55rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 3px solid var(--color-gold);
  box-shadow: 0 0 0 4px var(--color-gold-wash);
}

.timeline__tag {
  display: inline-block;
  margin-bottom: .5rem;
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
}
.timeline__title { font-size: var(--fs-h4); margin-bottom: .55rem; }
.timeline__text { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: var(--lh-loose); }
.timeline__text + .timeline__text { margin-top: .7rem; }

/* ---------- Pillar cards (offset) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, .6rem + 1.4vw, 1.75rem);
}
@media (max-width: 960px) { .pillars { grid-template-columns: 1fr; } }
@media (min-width: 961px) {
  .pillars > *:nth-child(2) { transform: translateY(2rem); }
}

.pillar {
  position: relative;
  padding: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.pillar:hover { border-color: var(--color-gold); box-shadow: var(--shadow-card-hover); }
@media (min-width: 961px) {
  .pillar:hover { transform: translateY(-6px); }
  .pillars > *:nth-child(2):hover { transform: translateY(calc(2rem - 6px)); }
}
.pillar::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}
.pillar:hover::before { transform: scaleX(1); }

.pillar__num {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-gold-light);
  margin-bottom: .85rem;
}
.pillar h3 { font-size: var(--fs-h4); margin-bottom: .7rem; }
.pillar p { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: var(--lh-loose); }
.pillar p + p { margin-top: .7rem; }

/* ---------- Do / don't ledger ---------- */
.ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, .6rem + 1.4vw, 1.75rem);
}
@media (max-width: 780px) { .ledger { grid-template-columns: 1fr; } }

.ledger__col {
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.ledger__col--do { border-top: 3px solid var(--color-gold); }
.ledger__col--dont { border-top: 3px solid var(--color-crimson); background: var(--color-surface-sunk); }

.ledger__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.35rem;
}
.ledger__mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  font-weight: 800;
}
.ledger__col--do .ledger__mark { background: var(--grad-gold); color: #2A1F05; }
.ledger__col--dont .ledger__mark { background: var(--color-crimson); color: #fff; }
.ledger__mark svg { width: 17px; height: 17px; }
.ledger__head h3 { font-size: var(--fs-h4); }

.ledger__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.ledger__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-sm);
  color: var(--color-text-body);
  line-height: var(--lh-loose);
}
.ledger__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 7px; height: 7px;
  border-radius: 50%;
}
.ledger__col--do .ledger__list li::before { background: var(--color-gold); }
.ledger__col--dont .ledger__list li::before { background: var(--color-crimson); }

/* ---------- Methodology strip ---------- */
.method {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
@media (max-width: 1000px) { .method { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .method { grid-template-columns: 1fr; } }

.method__cell {
  padding: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  border-right: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
  transition: background-color var(--t-base) var(--ease-out);
}
.method__cell:hover { background: var(--color-gold-wash); }
.method__cell:last-child { border-right: 0; }

.method__step {
  display: block;
  margin-bottom: .85rem;
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
}
.method__cell h3 { font-size: var(--fs-h4); margin-bottom: .6rem; }
.method__cell p { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: var(--lh-loose); }

/* ---------- Quote feature ---------- */
.manifesto {
  position: relative;
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  border-radius: var(--r-2xl);
  background: var(--grad-card-face);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.manifesto::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-gold);
}
.manifesto__quote {
  max-width: 62ch;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--color-text-invert);
  letter-spacing: -.01em;
}
.manifesto__quote span { color: var(--color-gold-light); }
.manifesto__by {
  margin-top: 1.5rem;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-invert-muted);
}