:root{
  --bg:#f1eee8;
  --bg-deep:#dad4c7;
  --surface:#fffdf7;
  --surface-2:#f8f3e8;
  --text:#1a1712;
  --muted:#5e5548;
  --line:#d8cdbb;
  --brand:#1f6f5f;
  --brand-ink:#10372f;
  --danger:#8d2e2e;
  --ok:#1f5f2b;
  --warn:#7a5a1f;
  --container:1120px;
  --radius:14px;
  --shadow:0 10px 30px rgba(42,33,18,0.09);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1500px 500px at 0% -15%, #f9f3e7 20%, transparent 65%),
    radial-gradient(1000px 400px at 100% 0%, #e7e0d1 10%, transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-deep));
  font-family:"Space Grotesk","Avenir Next","Segoe UI",system-ui,sans-serif;
  line-height:1.6;
}

a{color:var(--brand-ink)}
a:hover{opacity:.9}
a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.site-header,.site-footer{max-width:var(--container);margin:0 auto;padding:1.1rem 1rem}
main{max-width:var(--container);margin:0 auto;padding:0 1rem 2.4rem}

.site-nav{display:flex;gap:.6rem;flex-wrap:wrap}
.site-nav a{
  text-decoration:none;
  color:var(--text);
  font-weight:600;
  border:1px solid transparent;
  padding:.45rem .72rem;
  border-radius:10px;
}
.site-nav a[aria-current="page"],
.site-nav a:hover{
  background:var(--surface);
  border-color:var(--line);
}

.hero{
  margin-top:.3rem;
  margin-bottom:1.4rem;
  background:linear-gradient(145deg, #fffdf8, #f4ebda);
  border:1px solid var(--line);
  border-radius:22px;
  padding:1.4rem;
  box-shadow:var(--shadow);
}
.eyebrow{
  margin:0;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.hero h1{
  margin:.35rem 0 .7rem;
  font-size:clamp(1.9rem,4vw,3.2rem);
  line-height:1.12;
}
.hero-copy{max-width:760px;margin:0 0 1rem;color:var(--muted)}
.hero-actions{display:flex;gap:.65rem;flex-wrap:wrap}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  text-decoration:none;
  padding:.6rem 1rem;
  border-radius:11px;
  font-weight:700;
  border:1px solid transparent;
  background:var(--brand);
  color:#f4fffb;
}
.btn-ghost{
  background:transparent;
  color:var(--brand-ink);
  border-color:var(--line);
}

.signal-row{
  margin:1rem 0 0;
  padding:0;
  list-style:none;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.signal-row li{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.26rem .65rem;
  font-size:.82rem;
  color:var(--muted);
}

section{margin:1.15rem 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:.65rem}
.section-head h2{margin:0;font-size:clamp(1.25rem,2.2vw,1.7rem)}
.section-head a{text-decoration:none;font-weight:700;color:var(--brand-ink)}

.cards-grid{display:grid;gap:.85rem}
.cards-grid-2{grid-template-columns:repeat(1,minmax(0,1fr))}
.cards-grid-3{grid-template-columns:repeat(1,minmax(0,1fr))}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:0 2px 0 rgba(48,39,26,0.02);
}
.card h3{margin:0 0 .35rem;font-size:1.05rem}
.card p{margin:.15rem 0 .45rem}

.inline-link{font-weight:700}
.muted{color:var(--muted)}
.meta-line{font-size:.82rem;color:var(--muted);min-height:1.1rem}

.server-status{
  display:inline-block;
  font-size:.83rem;
  padding:.27rem .58rem;
  border-radius:8px;
  font-weight:700;
  border:1px solid transparent;
}
.status-online{color:var(--ok);background:#dcefdc;border-color:#b6d9b7}
.status-offline{color:var(--danger);background:#f8dede;border-color:#e5b6b6}
.status-unavailable{color:#4a4338;background:#ece7de;border-color:#d4cab8}
.status-planned{color:var(--warn);background:#f5ead2;border-color:#e5d0a4}

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

.cta-band{
  background:linear-gradient(120deg,#efe8d9,#e4dbc9);
  border:1px solid var(--line);
  border-radius:18px;
  padding:1.1rem;
}
.cta-band h2{margin:0 0 .45rem;font-size:clamp(1.2rem,2.1vw,1.55rem)}
.cta-band p{margin:.25rem 0 .6rem}

.ops-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1rem;
}

.apply-form{
  display:grid;
  gap:.65rem;
}
.apply-form label{
  display:grid;
  gap:.3rem;
  font-weight:600;
}
.apply-form input,
.apply-form select,
.apply-form textarea{
  width:100%;
  padding:.58rem .65rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
}
.apply-form input:focus-visible,
.apply-form select:focus-visible,
.apply-form textarea:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:1px;
}

.site-footer{
  border-top:1px solid var(--line);
  color:var(--muted);
  text-align:center;
  padding-bottom:1.6rem;
}

.table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
}
.status-table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}
.status-table th,
.status-table td{
  text-align:left;
  padding:.6rem .75rem;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.status-table th{
  font-size:.8rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--muted);
  background:var(--surface-2);
}
.status-table-state .server-status{
  margin:0;
}

@keyframes riseIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.hero,
.ops-panel,
.card,
.cta-band{
  animation:riseIn .45s ease both;
}

@media (min-width:760px){
  .cards-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:1100px){
  .projects-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}