/* Terra feature. Prefix tr-. Uses tokens from site.css. Flat colors only.
   Faction colors (#3b82f6 #ef4444 #22c55e) appear only as tag dots and hover borders via --c. */

.tr-sec .actions{margin-top:12px}
.tr-block{margin-top:96px}
.tr-h{font-size:1.875rem;line-height:2.25rem}
.tr-sec h4{font-size:1rem;line-height:1.5rem;font-weight:600;letter-spacing:0}

/* ---------- faction cards ---------- */
.tr-factions{display:grid;gap:16px;perspective:1200px}
@media(min-width:768px){.tr-factions{grid-template-columns:repeat(3,minmax(0,1fr))}}

.tr-card{
  --c:var(--accent);
  height:100%;display:flex;flex-direction:column;gap:8px;padding:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  transform-style:preserve-3d;
  transition:all 700ms cubic-bezier(0.32,0.72,0,1);
}
.tr-card img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:var(--raised);
}
.tr-body{display:flex;flex-direction:column;gap:8px;padding:8px 8px 16px;align-items:flex-start}
.tr-body p{font-size:.875rem;line-height:1.25rem;color:var(--muted)}
.tr-body .tr-quote{font-size:1rem;line-height:1.5rem;font-weight:500;color:var(--ink)}
.tr-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.75rem;line-height:1rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--c);border-radius:6px;padding:4px 8px;
}
.tr-tag::before{content:"";width:8px;height:8px;border-radius:9999px;background:var(--c)}

@media(hover:hover){
  .tr-card:hover{
    border-color:var(--c);background:var(--raised);
    transform:translateY(-8px) rotateX(2deg) rotateY(-3deg);
  }
  .tr-factions li:nth-child(2) .tr-card:hover{transform:translateY(-8px) rotateX(2deg) rotateY(0deg)}
  .tr-factions li:nth-child(3) .tr-card:hover{transform:translateY(-8px) rotateX(2deg) rotateY(3deg)}
}
.tr-card:active{transform:scale(.98)}

/* ---------- gallery ---------- */
.tr-gallery{display:grid;gap:16px;margin-top:16px}
@media(min-width:768px){.tr-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tr-shot{
  display:flex;flex-direction:column;gap:8px;padding:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
}
.tr-shot img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--raised)}
.tr-shot figcaption{padding:8px 8px 12px;font-size:.875rem;line-height:1.25rem;color:var(--muted);text-wrap:pretty}

/* ---------- timeline and phases ---------- */
.tr-timeline{display:flex;gap:4px;height:8px;margin-bottom:24px}
.tr-seg{display:block;border-radius:9999px;background:var(--line-strong)}
.tr-seg.tr-on{background:var(--accent)}

.tr-phases{display:grid;gap:12px}
@media(min-width:640px){.tr-phases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.tr-phases{grid-template-columns:repeat(5,minmax(0,1fr))}}
.tr-phases li{
  display:flex;flex-direction:column;gap:8px;padding:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  transition:all 700ms cubic-bezier(0.32,0.72,0,1);
}
.tr-phases li:hover{background:var(--raised);border-color:var(--line-strong)}
.tr-time{font-family:"Geist Mono",ui-monospace,monospace;font-size:.75rem;line-height:1rem;color:var(--accent)}
.tr-phases p{font-size:.875rem;line-height:1.25rem;color:var(--muted)}

.tr-round{
  margin-top:24px;padding:24px;display:flex;flex-direction:column;gap:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
}
.tr-round p{max-width:680px;color:var(--muted)}
.tr-steps{display:flex;flex-wrap:wrap;gap:8px;counter-reset:s}
.tr-steps li{
  counter-increment:s;display:inline-flex;align-items:center;gap:8px;
  font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--ink);
  padding:8px 12px;border:1px solid var(--line-strong);border-radius:9999px;
}
.tr-steps li::before{content:counter(s);font-family:"Geist Mono",ui-monospace,monospace;font-size:.75rem;line-height:1rem;color:var(--accent)}

/* ---------- built with ---------- */
.tr-built{display:grid;gap:12px}
@media(min-width:640px){.tr-built{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.tr-built{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tr-built li{
  display:flex;gap:12px;align-items:flex-start;padding:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  transition:all 700ms cubic-bezier(0.32,0.72,0,1);
}
.tr-built li:hover{background:var(--raised);border-color:var(--line-strong)}
.tr-built i{flex:none;font-size:1.5rem;line-height:1;color:var(--accent)}
.tr-built div{display:flex;flex-direction:column;gap:4px}
.tr-built b{font-size:1rem;line-height:1.5rem;font-weight:600}
.tr-built span{font-size:.875rem;line-height:1.25rem;color:var(--muted)}

/* ---------- about ---------- */
.tr-about{
  margin-top:64px;padding:32px;display:flex;flex-direction:column;gap:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
}
.tr-about p{font-size:1.125rem;line-height:1.75rem;max-width:680px;color:var(--ink)}
@media(min-width:768px){.tr-about{padding:48px}}

@media (prefers-reduced-motion:reduce){
  .tr-card:hover{transform:none}
}