:root {
  --wood: #c4b49a;
  --desk: #d8cbb4;
  --ink: #1c1712;
  --mute: #6a5e52;
  --line: #b7a890;
  --sans: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
  --serif: "Iowan Old Style", "Songti SC", "STSong", Georgia, serif;
  --mono: "SFMono-Regular", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(255,255,255,.35), transparent 50%),
    linear-gradient(180deg, #ddd0b8 0%, var(--desk) 28%, #cfc0a6 100%);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible { outline: 3px solid #1c1712; outline-offset: 3px; }
.skip {
  position: absolute; left: 12px; top: 12px; z-index: 20;
  padding: 8px 12px; background: #1c1712; color: #f4efe6;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

.top {
  width: min(1240px, calc(100vw - 80px));
  margin: 0 auto;
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 28px 0 0;
}
.brand {
  font: 700 13px/1 var(--mono);
  letter-spacing: 0.22em;
  text-decoration: none;
}
.top nav a { font-size: 14px; color: var(--mute); text-decoration: none; }
.top nav a:hover { color: var(--ink); }

.hero {
  width: min(1240px, calc(100vw - 80px));
  margin: 0 auto;
  padding: 8vh 0 5vh;
}
.hero h1 {
  margin: 0;
  max-width: 16em;
  font: 700 clamp(44px, 5.4vw, 76px)/1.06 var(--serif);
  letter-spacing: -0.045em;
}
.hero p {
  max-width: 34rem;
  margin: 22px 0 0;
  color: var(--mute);
  font-size: 19px;
  line-height: 1.7;
}

.desk {
  width: min(1240px, calc(100vw - 80px));
  margin: 0 auto;
  padding: 0 0 10vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.nb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 210px;
  padding: 18px 18px 16px;
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(60, 40, 20, 0.18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.nb:hover { transform: translateY(-6px) rotate(-0.4deg); box-shadow: 0 26px 50px rgba(60, 40, 20, 0.28); }
.nb small {
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.14em;
  opacity: 0.7;
}
.nb b {
  display: block;
  margin-top: 18px;
  font: 700 26px/1.2 var(--serif);
}
.nb em {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.82;
}
.nb.wide { grid-column: span 6; min-height: 300px; padding: 28px 26px 22px; }
.nb.mid { grid-column: span 4; min-height: 240px; padding: 22px 22px 18px; }
.nb.slim { grid-column: span 3; min-height: 220px; }
.nb.wide b { font-size: 34px; }
.nb.mid b { font-size: 26px; }
.nb.slim b { font-size: 22px; }

.c-agent { background: #14110e; color: #f3eee4; }
.c-agent b { color: #e2a54a; }
.c-dl { background: #eef3f8; color: #1a2332; box-shadow: inset 0 0 0 1px #c5d2e0, 0 18px 40px rgba(60,40,20,.18); }
.c-kid { background: #fbf4ea; color: #3b2a22; }
.c-kid b { color: #c56a43; }
.c-arch { background: #0e1c33; color: #d7e4f5; }
.c-infra { background: #0b120e; color: #cfe7d4; }
.c-infra b { color: #7dffb3; }
.c-mig { background: #c4a574; color: #3b2a14; }
.c-rag { background: #f6f0e4; color: #2a1818; border-top: 8px solid #7a2e2e; }
.c-pm { background: #fbfaf6; color: #1c1712; box-shadow: 0 18px 40px rgba(60,40,20,.18), inset 0 0 0 1px #e6e0d4; }
.c-pm b { color: #c45c3e; }
.c-rel { background: #eef1ec; color: #243028; }
.c-work { background: #fff8d6; color: #222; }

.foot {
  width: min(1240px, calc(100vw - 80px));
  margin: 0 auto;
  padding: 0 0 56px;
  color: var(--mute);
  font-size: 13px;
}

@media (max-width: 900px) {
  .nb.wide, .nb.mid, .nb.slim { grid-column: span 6; }
}
@media (max-width: 560px) {
  .desk { grid-template-columns: 1fr; }
  .nb.wide, .nb.mid, .nb.slim { grid-column: span 1; min-height: 160px; }
  .nb:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nb:hover { transform: none; }
}