/* ================================================================
   Landing page sections. Loaded after style.css and repo.css, which
   own the palette, the shell and the shared box components.
   ================================================================ */

.home-sec{padding:0 0 88px}
.home-sec .sec-head{margin-bottom:32px}

/* ---------- pending development ---------- */

.sec-note{color:var(--faint);font-size:.945rem;margin:-12px 0 0;max-width:62ch}
.products.is-pending{padding-bottom:0}
.products.is-pending .card{background:transparent;border-style:dashed;border-color:var(--line-hi)}
.products.is-pending a.card:hover{background:var(--surface)}
.pill.is-pending{border-style:dashed;border-color:var(--line-hi)}
.pill.is-pending::before{background:transparent;box-shadow:inset 0 0 0 1px currentColor}

/* ---------- hero vitals ---------- */

.hero-stats{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  text-align:center;
  gap:22px 56px;
  margin-top:40px;
  padding-top:32px;
  border-top:1px solid var(--line);
}

.hstat-n{
  display:block;
  font-family:var(--serif);
  font-size:1.9rem;
  line-height:1.1;
  color:var(--text);
  letter-spacing:-.01em;
}

.hstat-k{
  display:block;
  margin-top:3px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
}

/* Shown while the newest commit is under three hours old. */
.live-badge{
  flex-basis:100%;
  display:flex;
  justify-content:center;
  margin:0 0 6px;
}

.live-badge[hidden]{display:none}

.live-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 16px;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--live);
  background:rgba(95,211,154,.08);
  border:1px solid rgba(95,211,154,.4);
  border-radius:999px;
  animation:live-glow 3.2s ease-in-out infinite;
}

.live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--live);
  animation:pulse 2.6s ease-out infinite;
}

@keyframes live-glow{
  0%,100%{box-shadow:0 0 14px rgba(95,211,154,.18), inset 0 0 10px rgba(95,211,154,.06)}
  50%{box-shadow:0 0 28px rgba(95,211,154,.4), inset 0 0 14px rgba(95,211,154,.12)}
}

/* ---------- in progress ---------- */

.now-grid{display:grid;gap:18px}

@media (min-width:760px){
  .now-grid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
}

.now-card{
  display:block;
  padding:24px 26px;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  border-radius:12px;
  transition:
    transform .4s var(--ease),
    background .4s var(--ease),
    border-color .4s var(--ease),
    box-shadow .4s var(--ease);
}

.now-card:hover{
  transform:translateY(-3px);
  background:var(--surface-hi);
  border-color:var(--line-hi);
  border-left-color:var(--accent);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.85);
}

.now-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.now-project{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}

.now-when{font-family:var(--mono);font-size:.72rem;color:var(--faint)}

.now-title{
  font-family:var(--serif);
  font-size:1.3rem;
  line-height:1.25;
  color:var(--text);
  margin:0 0 16px;
}

.now-bar{
  height:7px;
  border-radius:999px;
  background:var(--surface-hi);
  border:1px solid var(--line);
  overflow:hidden;
  margin:0 0 10px;
}

.now-bar i{display:block;height:100%;background:var(--accent)}

.now-meta{
  font-family:var(--mono);
  font-size:.73rem;
  letter-spacing:.06em;
  color:var(--faint);
  margin:0;
}

.now-latest{
  margin:18px 0 0;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:.89rem;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.now-latest span{
  display:block;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:6px;
}

.now-latest code{
  font-family:var(--mono);
  font-size:.86em;
  background:var(--surface-hi);
  border:1px solid var(--line);
  border-radius:5px;
  padding:1px 5px;
  color:var(--text);
}

/* ---------- card footer vitals ---------- */

.card-foot{
  display:flex;
  align-items:center;
  gap:10px 22px;
  flex-wrap:wrap;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.fact{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.73rem;
  letter-spacing:.05em;
  color:var(--faint);
  white-space:nowrap;
}

.fact .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}

.fact.mini{gap:9px}

.mini-bar{
  display:block;
  width:54px;
  height:6px;
  border-radius:999px;
  background:var(--surface-hi);
  border:1px solid var(--line);
  overflow:hidden;
}

.mini-bar i{display:block;height:100%;background:var(--accent)}

/* ---------- how we build ---------- */

.approach-grid{display:grid;gap:18px}

@media (min-width:760px){
  .approach-grid{grid-template-columns:repeat(3,1fr)}
}

.approach-card{
  padding:28px 26px 26px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  position:relative;
  overflow:hidden;
}

.approach-card::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,var(--accent),transparent 70%);
  opacity:.5;
}

.approach-n{
  display:block;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  color:var(--accent);
  margin-bottom:16px;
}

.approach-card h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.24rem;
  line-height:1.25;
  color:var(--text);
  margin:0 0 12px;
}

.approach-card p{color:var(--muted);font-size:.93rem;margin:0}

/* ---------- about ---------- */

.about-copy p{color:var(--muted);margin:0 0 18px;max-width:64ch}
.about-copy p:last-child{margin-bottom:0}
.about-copy strong{color:var(--text);font-weight:500}
.about-copy a{color:var(--accent)}

@media (max-width:520px){
  .home-sec{padding-bottom:64px}
  .hero-stats{gap:18px 34px}
  .hstat-n{font-size:1.6rem}
  .now-card,.approach-card{padding:22px}
}

/* ---------- stats and activity ---------- */

.stat-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;
  margin-bottom:18px;
}

.stat-tile{
  padding:18px 20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
}

.stat-n{
  display:block;
  font-family:var(--serif);
  font-size:1.6rem;
  line-height:1.1;
  color:var(--text);
}

.stat-k{
  display:block;
  margin-top:6px;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
}

.stats-grid{display:grid;gap:18px;margin-top:18px;align-items:start}

@media (min-width:860px){
  .stats-grid{grid-template-columns:1fr 1fr}
}

.stats-grid .box + .box{margin-top:0}
.stats-col{display:grid;gap:18px}

.lang-legend .uses{
  margin-left:auto;
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--faint);
}

.lang-legend .uses + .pct{margin-left:18px;min-width:48px;text-align:right}

.lang-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}

.lang-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-hi);
  font-size:.84rem;
  color:var(--text);
}

.lang-chip .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}

.proj-commits{margin:0;padding:0;list-style:none}

.proj-commits li{
  display:grid;
  grid-template-columns:110px 1fr auto;
  align-items:center;
  gap:14px;
  padding:6px 0;
  font-size:.9rem;
}

.proj-commits .name{color:var(--text)}
.proj-commits .name:hover{color:var(--accent)}

.proj-bar{
  display:block;
  height:7px;
  border-radius:999px;
  background:var(--surface-hi);
  border:1px solid var(--line);
  overflow:hidden;
}

.proj-bar i{display:block;height:100%;background:var(--accent)}

.proj-commits .n{font-family:var(--mono);font-size:.82rem;color:var(--faint);min-width:32px;text-align:right}

@media (max-width:520px){
  .stat-tiles{grid-template-columns:1fr 1fr}
  .stat-n{font-size:1.35rem}
  .lang-legend .uses{display:none}
  .lang-legend .uses + .pct{margin-left:auto}
}